Tag HTML5

Update!

HTML: div, section, article の使い分け方

今更ですが、今回は HTML5 コーディング時にいつも迷ってしまう、div, section, article の使い分け方をおさらいしておきます。 目次 div, section, article の使い分け方 まとめ div, section, article の使い分け方 最初に言っておくと、HTML5 で登場した article や section をわざわざ使用しなくても div だけを使っても問題ない です。 このことを前提として、以下に詳細を説明します。 div div を使うケースの多くは レイアウトやビジュアルデザインが主な利用用途 になっているかと思います。 div タグ自体に文章構造上の意味がないため、冒頭で説明した div だけを使ったコーディングで問題ない という結論になるわけです。 div 自体に意味はないため section や article を内包しても問題ありません。 section section は div と違い、文脈的な意味がある コンテンツに対し使用します。 また、section 内には hx(h1) が必須 となり、コンテンツが独立して成立しない 場合に用います。 section 内には、section もしくは article を配置できます。 article article は section 同様、文脈的な意味がある コンテンツに対し行います。 section との違いは article 内のコンテンツが 独立して成立する 場合に用います。 内側の article が、外側の article の内容と関係がある場合、article を内包(ネスト)することができます。 各 article 内に section を内包(ネスト)することもできます。 div -> section -> article という順番で、よりセマンティックになっていく感じです。 まとめ HTML5 から登場した section と article ですが、WordPress 等のブログエンジンやテンプレートエンジン等で、あらかじめ設定済みのものをそのまま使うケースが多いです。 実際のところコンテンツをグルーピングしたい場合、div を使用すれば何も問題はないのですが、今はユニバーサルデザインを意識し開発することも求められますので、section や article を使い分け、各コンテンツの意味を考えながらコーディングしていくことも重要だと思います。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

HTML5: area-hidden プロパティについて

aria-hidden プロパティ とは、WAI-ARIA の仕様で定義されている、テキスト読み上げの有無を設定する値です。 主にアイコンフォントのタグに指定するケースがほとんどだと思いますが、今回はこの area-hidden プロパティ についてのメモしておきます。 目次 area-hidden プロパティについて area-hidden プロパティについて 今回説明に使用する CSS フレームワークは Bootstrap、アイコンは自家製アイコンフォントの MellowGlyph を例にとって説明したいと思います。 装飾アイコンの場合 機能に関係なく、単なる装飾であるアイコンの場合、aria-hidden=”true” を設定することで、スクリーンリーダーに対して存在しないものと認識させることができる。 表意アイコンの場合 アイコンの意匠そのものに機能的な意味が含まれる場合、aria-hidden=”true” を設定したうえで、代替テキスト を span class=”sr-only” に記述し、スクリーンリーダーに認識させます。 インタラクションアイコンの場合 アイコン自体がリンクになっていて、タッチやマウス等の入力デバイスによるインタラクションが発生する場合、aria-hidden=”true” と title プロパティ 設定したうえで、代替テキスト を span class=”sr-only” に記述し、スクリーンリーダーに認識させます。 まとめ アイコンのアクセシビリティを解決する方法として、タグを使用せずに ::before, ::after といった擬似要素で指定する方法があります。 ただし、この方法をとる場合は、定義された名前空間による直感的なコーディングが困難なため、タグで直接記述し、area-hidden プロパティ を適切に指定する方法が簡単かつ便利かと思います。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

Tools:HTML5&CSS3 16進数からRGBへの変換ツール

CSSのコーディング中に、16進数のカラーをRGBに変換したいときがあるので、自分用に変換ツールを作成しました。JavaScript のトップレベル関数 parseInt を使えば簡単に実装できました。 16進数からRGBへの変換ツール 16進数のカラーコードを入力して下さい。(入力例: #123, #1234ab, 567, 89abcd) 結果 RGB RGBa まとめ RGBから16進数への変換ツールもつくろうかと思ったのですが、今のところ不必要だったため見送ることにしました。必要になればまた別の機会に作成したいと思います。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

Tools:HTML5/CSS3 グラデーションCSSコードの書き出しツール

ネット上には優秀なグラデーション生成ツールはあるのですが、16進数の2値から単純なグラデーションのCSSコードを出力するだけのツールが欲しかったので、自分用に作成しました。 グラデーションCSSコードの書き出しツール カラー、グラデーションの描画方向、開始〜終了位置(%)を入力後「出力する」をクリックして下さい。 カラー1 : #  カラー2 : #  方向 :  縦方向   横方向 範囲 :  % 〜  % 結果 まとめ ベンダープレフィックスがなくなれば、こういったツールも必要ないのですが、もうしばらくの辛抱ですね。

HTML5:そろそろスッキリさせたい!CSS3 linear-gradient のベンダープレフィックス

CSS でグラデーションを描画する際に使用する linear-gradinet ですが、だいたいこのようなことになっているかと思います。(※IE6,7,8には対応していません) とりあえずこれらを、おまじないのように書いていればいいだろうと何年も放置したままだったので、一旦情報を整理して切り捨てるべき部分と、残していく部分の境界を決めたいと思います。 CSS3 linear-gradient のベンダープレフィックスについて 2つの-webkitプレフィックス 冒頭のサンプルコードを見て分かるように、グラデーション描画のための webkitベンダープレフィックス には -webkit-gradient() と -webkit-linear-gradient() の2つが存在します。 -webkit-gradient() のほうが古く、-webkit-linear-gradient() が新しいwebkitベンダープレフィックスとなります。 最終的にこれらのベンダープレフィックスは linear-gradient に統一されると思うのですが、 次にこれらのプレフィックスが各ブラウザの、どのバージョンに対応しているかをみてみます。 ブラウザごとの linear-gradient とベンダープレフィックスのサポート状況 IE IE10からサポート Chrome Chrome3-9:-webkit-gradient()で先行実装 Chrome10-25:-webkit-linear-gradient()で先行実装 Chrome26以降:linear-gradient をサポート Firefox Firefox3.6-15:-moz-のベンダー識別子で先行実装 Firefox16(2012.10リリース)以降:linear-gradient をサポート Safari safari4.0-5.0:-webkit-gradient()で先行実装 safari5.1から6.0:-webkit-linear-gradient()で先行実装 safari6.1, Safari7.0以降:linear-gradient をサポート Opera Opera11.1-12.0:-o-のベンダー識別子で先行実装 Opera12.1, Opera15以降(2013.7リリース):linear-gradient をサポート iOS iOS3.2-4.3:-webkit-gradient()で先行実装 iOS5.0-6.1:-webkit-linear-gradient()で先行実装 iOS7.0以降:linear-gradient をサポート Android Android2.1-3.0:-webkit-gradient()で先行実装 Android4.0以降:-webkit-linear-gradient()で先行実装 linear-gradient のサポートは未だなし 切り分けるポイント -moz-linear-gradient Firefox は早い段階で linear-gradient を実装していること、最近のシェア比率の低さから -moz-linear-gradient は必要なし。 -webkit-gradient Safari4.0-5.0、Chrome4.0-9.0、iOS4.0.4-5.0、Android 2.1-3.0等に対応するなら必要。バージョンのシェアが低いため切り捨てても問題ないが Android のことを考慮し保留。 -webkit-linear-gradient iOS はともかく Android のことを考えると linear-gradient がサポートされるまでは -webkit-linear-gradient に関しては保留。 -o-linear-gradient Opera に関しても Firefox 同様の考えから -o-linear-gradient は必要なし。 -ms-linear-gradient また、-ms-linear-gradient は対応するブラウザが現在存在しないこと、IE10以降で linear-gradient がサポートされたことから削除。 filter: filter: に関しては IE6-9 でグラデーション実現のために使用するものですが、filterを適用されたボックスは overflow:hidden となるため、子要素をはみ出すことができない、3色以上のグラデーションが効かない等の問題があるため、切り捨てます。さらばIE。 結論 以上のことから、CSS のソースコードは以下のようになります。これでいきましょう! まとめ 今更ですが、Chrome のバージョンを見るだけでも Google のブラウザに対する力の入れ具合が尋常ではないことが分かります。トップシェアを取るのにもそれなりの理由があるということですね。 Firefox も頑張って欲しいですが、こうなってくると難しいですね。かつての Netscape を思い出します。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

JavaScript:jQueryでHTMLのデフォルト動作(default behavior)を抑止する

HTML5/CSS3/JavaScript は従来のWebページ作成のためだけの仕様ではありません。 Webアプリケーションの開発時に、HTML固有の動作を別のメソッドに置き換えて処理しなければいけないようなとき、今回の preventDefault が必要になります。 更新履歴 [2014.04.17] HTMLサンプルの追加・コンテンツのレイアウトと誤植を修正しました。 jQueryでHTMLのデフォルトの動作(default behavior)を抑止する HTMLでのデフォルト動作(aタグやformのsubmitボタン等)を抑止したい場合には preventDefault() を呼び出す。 サンプルコード HTML JavaScript(jQuery) 次の「こちら」というテキストリンクはHTML sirochro.com のトップページへリンクしているが、クリックしてもページが遷移せず、アラートでリンク先が表示される。 結果 sirochro.comトップページはこちらです。 まとめ preventDafault は ajax 処理のときや form 送信を一旦フロントで処理したい場合は必要な組み込みメソッドです。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

JavaScript:HTML5の標準機能!WebStorageの仕様と使い方

Webアプリケーション開発においてWebStorageを使用する機会があったので、使い方をメモしておきます。 とても便利な機能なので、アプリの設定等の保存に活躍するかと思います。 WebStorageについて 種類 以下の2つのストレージがありますが、データの永続性の違いだけで、どちらも使い方は同じです。今回は localStorage について説明したいと思います。 sessionStorage localStorage 対応するブラウザのバージョン IE7対応を強いられる方たちには申し訳ないですが、以下の表を見る限り、実用可能と考えて問題なのではないでしょうか。 IE Firefox Safari Chrome Opera Android iPhone 8.0〜 3.5〜 4.0〜 4.0〜 10.5〜 2.0〜 2.0〜 ストレージの容量 最大5MB 設定データの保存としては必要十分な容量だと思います。 WebStorageの使い方 使い方はとても簡単です。key,value を使用してストレージに保存していきます。 valueへはどんな型でも保存は可能ですが、最終的に保存されるデータは文字列となるので、getした値を文字列として使用しない場合はキャストが必要になります。 基本操作 データをセット(保存)する キーからデータをゲット(取得)する キーごとにデータを削除する すべてのキーと値を削除する ログ出力とセットにしたlocalStorageの関数も作成しました。 その他の使い方 キーのインデックス値でアクセスする キーを列挙する キーの長さを取得する localStorageのデータが保存されている場所(*) Safari /Users/User名/Library/Safari/LocalStorage/ Chrome /Users/User名/Library/Application Support/Google/Chrome/Default/Local Storage/ ※マシン環境は Mac OS X です まとめ WebStorage は HTML5で実装された標準機能ですが、実用レベルに耐えられる便利な機能だと思います。 W3C による HTML5 の勧告はもうすぐですが、HTML5 というワード自体は珍しいものでなくなりました。デファクトスタンダードだと判断できるのは、そのもの自体が騒がれなくなったときだということなのでしょう。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

HTML5:CSS1からCSS3までの擬似クラス一覧

CSS3までの擬似クラスの一覧リストを作成しました。 HTML5/CSS3であればjQueryを使わなくても、ちょっとしたデザインやレイアウトなら実現できることが分かります。 CSS1からCSS3までの擬似クラス一覧 CSS1 擬似クラス ターゲット :link 未訪問のリンク :visited 訪問済みのリンク :active 訪問済みのリンク CSS2 擬似クラス ターゲット :hover カーソルが上に乗り、アクティブでない要素 :focus テキスト入力にフォーカスされている要素 :first-child ある親要素の最初の子要素 CSS3 擬似クラス ターゲット :last-child ある親要素の最後の子要素 :target フラグメント識別子を持ってるurlリンクでターゲット対象にされた要素 :enabled ある要素が有効なとき :disabled ある要素が無効なとき :checked ラジオボタン/チェックボックスがチェックされた状態のとき :indeterminate ラジオボタン/チェックボックスがチェックされてるかどうかが不確定の状態のとき :root ドキュメントルートの要素 :nth-child(n) 親要素のn番目の子要素 :nth-last-child(n) 親要素の最後から数えてn番目の子要素 :nth-of-type(n) 親要素の中で兄弟関係にある同じ種類の要素の中のn番目の要素 :nth-last-of-type(n) 親要素の中で兄弟関係にある同じ種類の要素の中の最後からn番目の要素 :first-of-type 親要素の中で兄弟関係にある同じ種類の要素の中の最初の要素 :last-of-type 親要素の中で兄弟関係にある同じ種類の要素の中の最後の要素 :only-child 兄弟を一つも持たずその親の唯一の子である要素 :only-of-type 同じ要素の兄弟が一つもない要素 :empty 子要素を一つも持たない要素 :contains() テキストの内容が与えられた部分文字列を含む要素 :not() 否定の要素 まとめ 一覧にしてみて面白かったことは、first-child は CSS2 で登場しているのに、last-child は CSS3 から採用されているということです。W3Cの標準策定も大変であることが伺えますね。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。