「HTML」カテゴリーアーカイブ

HTMLの空白文字(スペース)と改行について

HTMLの要素は、大きくブロック要素とインライン要素の2種類に分かれています。ブロック・インラインについて、詳しくは以下の説明をご覧ください。

例えば、段落を意味するp要素や一塊のセクションを表すsection要素はブロック要素、外部リンクを表すa要素や画像の表示に用いられるimg要素、またタグに囲まれていない素のテキスト等はインライン要素です。

インライン要素は、コンテンツの流れを分断せずに、要素を定義するタグで囲まれた範囲だけを占有するものです。ですので、ブロック要素の高さ・幅が変化するとそれに応じてブロック要素の子孫要素となっているインライン要素の表示が変わります。この際、空白文字(スペース)や改行文字がインライン要素にあると空白・改行が思わぬ点に現れてしまうので、

空白文字や改行を用いた余白表現を行わない

というのがインライン要素の原則です。

※CSSでwhite-spaceの値を変えるとそのセレクター内での空白文字・改行文字の表示の仕方が変わります。詳しくはCodePenのソースを確認してみてください。

See the Pen white-space by mine333 (@kenic_ono) on CodePen.0

HTML5 の見出し要素の記述ルール、セクショニング

HTMLの見出し要素(h1〜h6)には、セクショニングと呼ばれる記述の際のルールがあります。見出し要素を用いる際は、以下の引用、もしくはリンク先の記事を参考にどのようなセクショニングが適切かを確認してみてください。

HTML5 では section 要素が導入され、これまでの見出し要素(h1〜h6)のみによる大雑把なドキュメントアウトラインの形成に伴う諸処の問題を、明示的に分かりやすく解決・表現できるようになりました。しかし一方で、見出し要素(h1〜h6)を使った暗黙的なセクショニングも併用することが可能であり、これが人間にとって理解しにくいドキュメントアウトラインを形成することもあります。

コードの現実的な書き方と理想的な書き方を満たすよう工夫されたGoogle HTML/CSS Style Guide

「Google HTML/CSS Style Guide」は、Googleが公開している様々なプログラミング言語、マークアップ言語等のスタイルガイド「google-styleguide」の中の一つです。コードの現実的な書き方と理想的な書き方、どちらもできる限り満たすよう工夫されています。
こちらの記事では、Google Style Guidesの全ソース(GitHub)、および有志のHTML/CSS Style Guideの和訳のリンクを紹介しておきます。

情報を日付付きで掲載したいときに便利なリストの作成

li要素、time要素、p要素を組み合わせることでサイトの更新履歴・その他閲覧者に重要な情報を日付付きで掲載したいときに便利なニュースリストを配置することができます。
詳しくは以下のリンクからニュースリストに用いられているコードを参照してみてください。

Bracketsのアレコレ

今回はHTML・CSSのテキストエディターとして便利な、Bracketsというソフトを紹介します。

Bracketsはメインで使用していきますので、まずは使い方に慣れましょう。
ショートカットを使いこなすのがコツですが、評判のものを2つほどご紹介します。

コメントアウト:Ctrl+/
コード挿入(emmet記法):Ctrl+Shift+A

また、こういった便利なショートカットはメニュー「ヘルプ」の一番下にある「Show Shortcuts」で一覧表示できますので、忘れてしまったらご確認を。
その他便利な拡張機能や、Emmetにも挑戦してみてください。下記のリンクから、拡張機能・Emmetの使い方を学ぶことができます。

W3C Markup Validator

Webの技術標準化を進める国際的な非営利団体「W3C(World Wide Web Consortium)」では、HTMLの文法チェッカー「W3C Markup Validator」を無償で提供しており、Webサイト上で利用できます。

紹介サイトは多数ありますが、さくらレンタルサーバーの記事を紹介しておきます。

Webサイト制作においては、正しい文法でタグを記述することがサイトの評価を高め、結果的に検索結果画面での表示順において上位にサイトを表示させることができるという利点にもなります。

こうしたSEO対策では文法が重要になりますが、視認性やメンテナンスを考慮すると厳密な文法を切り捨てるケースもありますので、そのあたりのバランスを養うと良いでしょう。

target属性について

HTMLタグにa 要素、area 要素、link 要素といったリンク要素を用いる際は、タグのtarget属性を変えることで新規のウィンドウ・タブに表示するか、現在のタブに上書きするかを指定することができます。詳しくは、下記のリンクからtarget属性の使い方を参照してください。

target属性が記述されていない場合は、ブラウザ側で値_selfがデフォルトで設定されます。スマートフォンでの挙動も考えて設定するとよいでしょう。CSSが存在していなかった時代では、フレームを用いてレイアウトするケースが多かったのです。