Qiita - HTML5タグが付けられた新着投稿

htmlの雛形

SN

7/18 16:58

日本語のhtmlの雛形です。以前は、ブラウザの対応状況もあって細かいテクニックも必要でしたが、もうHTML5/jquery/utf8でだけで十分でしょう。shift jisを振り回さないといけなかった頃が懐かしい。


jquery CDN...

Vue.jsを使ってそれっぽいTodoリストを作ってみる

SN

7/17 21:26

 プログラミングを学び始めて気が付いたら半年経ったので、今の理解度を確認するために最近触れ始めたVue.jsを使ってシンプルなTodoリストを作ってみました。

 ・デモページ

 ・コードはこちら

 コード...

これから作ってみたいもの備忘録

SN

7/17 00:19

1:あるウェブサイトをクロールして、特定の箇所に表示される文字列を抜き出し、Excel形式で出力できるようにする。

出力先はExcelのファイル、また可能ならGoogleスプレッドシートへの出力ができるようにし...

bootstrap(4.1.1)で色を変更・指定する方法は?

SN

7/16 21:16



bootstrapとは?

cssフレームワーク。

フレームワークとは、使いやすいように先人がまとめてくれたもの。

(ライブラリとAPIとの違いは勉強中)

もともとTwitter bootstrapと言われていたが、今ではb...

CSSのtransform:rotateZ,rotateX,rotateZそれぞれの動き

SN

7/16 11:45



背景

transform:rotateのX,Y,Zの動きが分かりにくかったのでまとめました。

完全の個人的なメモ…


transform:rotate各種動き

下記のような縦軸、横軸にして交差したところは足しこんでいます。

縦軸...

SVGのtextPath要素上のテキスト均等配置について

SN

7/15 23:08

SVGでパス上の文字の均等配置をブラウザ(Win10のFirefox, Chrome, Edge)によらずに実現する方法について調べました。

SVGではtext要素にtextLength属性を設定することで文字間隔を調整できる。

textLength...

ブラウザだけでカメラのスナップショットを取る

SN

7/15 20:15

バーコードリーダーを作る必要があったので、周辺技術を学ぶためにブラウザからカメラのスナップショットを撮るスクリプトを作った。

WebRTCのAPIを使っているが、すべてクライアントサイドで完結する。

...

HTML5のCanvasで超新星爆発を目指した

SN

7/15 03:06

 Canvasの練習。




script.js
let canvas = null;
let ctx = null;

function drawRects(time, n, size, r, g, b, a, sx, sy) {
if (n <= 0) {
throw new Error('invalid number');
}

...

HTML5テンプレートを作成する際に気になったこと

SN

7/13 15:23



背景

HTML5のテンプレートを作成しようと思い参考になるサンプルを探していたところ、気になった点がいくつか(現時点で3点)あったので、できる限り調べつくして自分なりの答えを出してみました。


1.html要素...

Tonyu System 2であほげーを作ろう - その8 物理エンジンなど

SN

7/12 13:36



記事一覧

第1回 設定とタイトル

第2回 メイン画面

第3回 ターゲットと敵と

第4回 スコア・時間など

第5回 ゲームを公開する

第6回 Twitterにスコアを投稿

第7回 サウンド関係

第8...

Literalでjavascriptを呼び出すときの注意(メモ書き)

SN

7/11 13:27



書きたいこと



Literalを使用したときの注意点を記載。



経緯



webapp作成中ボタンのイベントハンドラー処理でポップアップを表示するためLiteralを使いjavascriptを使用した。
ボタンボタンイベント発生...

JavaScript(infinite-scroll)で無限スクロールの実装

SN

7/10 12:36

どうも、はぐっです・ω・♪


JavaScript(infinite-scroll.js)で無限スクロールを実装

Webサイトを制作していく中で、

同じ属性のコンテンツを多く提供することがあるかと思います。


多量コンテンツの提供...

selectタグで選択されたoptionのカスタム属性を取得する方法

SN

7/10 11:57

プルダウンから選択された属性(カスタムデータ属性)をinnerHTMLへ出力するサンプル

jQueryでのやり方はたくさんあるけど、プレーンなjsではサンプルがなかったので。


select.js

<table border="1">
&...

で同じファイルを選択してもchangeイベントをトリガーさせる

SN

7/9 01:06

change、onchangeイベントは、入力欄の内容を変更した時の発火されるイベント

しかし、同じファイルを選択した場合、changeイベントは発生しません????


解決策

<input id="file" type="file" onchange=...

WEBサイトを作る順番まとめ(自分用)

SN

7/8 03:29



WEBサイトを作る順番まとめ


0.誰のために何をするか考える

主に何らかの情報を必要としている人に対してその情報をわかりやすく伝える、検索する手間を省く


1.ひたすら参考になりそうなサイトを見まくる

...

コーディングレベルって業界的に言うと、どこらへんが合格ラインなんだろう?

SN

7/7 14:59



背景


HTML5の仕様をどこまで理解できていたのか?

HTML5の動画講座を制作するにあたり、改めてまともにHTML5の復習をしてみたところ、お恥ずかしいレベルの知識しかなかった自分に愕然としました。


言い訳...

[ページ遷移しないWebシステム] JavaScriptによるリッチテキストエディタ

SN

7/6 01:20

 CMSを自作しようと思うと、ついて回るのはテキスト編集機能です。HTMLタグをできる限り意識せずに、ある程度の体裁を表現できるものが必要となります。

 そこで必要になるのがリッチテキストエディタですが、...

メモ帳をつくる - 編集したHTML要素をlocalStorageに保存する方法

SN

7/5 17:39




はじめに

過去の投稿「HTML要素を編集可能にする方法」、「文字を装飾するボタンをつくる方法」に続いて、編集した内容を保存する方法を紹介します。

今回は比較的簡単な、localStorageによる保存方法を...

document.writeでscriptを読み込んではいけない

SN

7/5 13:41

document.writeでes6 modulesをロードしてはいけない(戒め)


introduction


状況説明

最近(18/5/9)、Firefoxがes6 modulesに対応しました。

これで、主要なブラウザがすべてes6 modulesに対応したことにな...

HTML,Canvas上にドラッグで直線を描く

SN

7/5 00:10

canvas,JavaScriptのマウスイベントで直線を描きます。

canvasで線分を描く方法のままマウスイベントを設定すると問題が発生するため、

問題点・解決案を書きました。


問題点

マウスイベント

1.on...

HTML / CSS / Javascriptの基礎中の基礎(下書きテスト中)

SN

7/4 18:12



HTML / CSS / Javascriptの基礎中の基礎

さて、みなさんは「HTMLって何?」「CSSって何?」「JSって何?」と聞かれた時に、さっ と答えることができますか?

なんとなくは分かっていても、具体的に何をし...

HTML5のdatalist

SN

7/3 16:58

<select>
<option value="ja">日本語</option>
<option value="en">英語</option>
</select>


DBに登録しておいた内容から選ばせたいので

セレクトタグを使い選択...

某RPGっぽいUIをCSSとHTMLだけでつくってみたよ

SN

7/3 00:43



背景

CSSだけで色々出来ることが分かってきたので、少し作ってみたよ。

*PC版Chromeでしか確認してないよ!




実装


CheckBoxで状態変化

CheckBoxがチェックされたときだけ状態を変化させる感じ。

HTML5&CSS3デザイン

SN

7/2 23:59



前置き

「HTML5&CSS3デザインブック」を読んだ。

大きくは、近年のWebデザインについて語られていた。

SIerとして、table ベースで作られていた社内向けWebページしかメンテしてこなかったので、<...

HTML5プロフェッショナル認定試験 Level1 バージョン2.0に合格した

SN

7/2 20:58



概要

2018年6月、HTML5プロフェッショナル認定試験 Level1 バージョン2.0に合格しました。

公式サイトで解説されている内容については割愛し、あくまでも主観に基づいた情報を中心に動機・勉強法などを共...

GoogleMapsAPIを使ってみる

SN

7/2 14:28

こんにちは.

前回まではwxPythonについての記事を連続5回を書きました.

しかし,今回はちょっとテーマを変えてGoogleMapsAPIについて話したいと思います.

なぜ突然を変えたと考えている人がいるか...

[HTML5]標準draggableについて

SN

7/1 20:45



HTML5のdraggable属性

html5の標準機能でDOMをドラッグ&ドロップできるのを初めて知りました。主要ブラウザでは既にサポートされているようです。


HTMLサンプル


html
<div draggable="true">dra...

Youtubeの再生速度を自在に変更する

SN

7/1 16:15

HTML5動画プレイヤーが普及してきました。

 「音楽の再生速度を小数点第2位まで指定して聞きたい」

 「ウルトラマンのように限られた時間しか動画が見れない」

そこでJavaScritpを使って再生速度を自...

CSSで任意サイズの枠線を%指定のボックスぴったりに収める

SN

7/1 07:09



背景

%指定等で枠線をつけると、枠線は対象の外側に引かれるためサイズがぴったりにならない

これの防止をする。

主として健忘症である未来の自分へのメモ


実装

※Chromeでのみ動作確認済み


css
.cl...

QiitaやGitHubのコメントで折りたたみ要素を作る方法

SN

7/1 06:39

GitHubのissuesに長いエラーコードを載せたいときや、Qiitaで長いソースコードを参考までに載せたいときなどに折りたたみ要素を作りたい場合があります。

折りたたみ要素は<details>というHTML5タグを利用...

PR:bitflyer

bitFlyer ビットコインを始めるなら安心・安全な取引所で