HTMLやCSSの用語は何の略か知ることで使いどころがわかる(かもしれない)

記事内で使われそうな頻出html, CSSの非省略語を挙げてみたいと思います。テンプレートという大きな器でしか使われなさそうなものは省きます。

html頻出タグ

htmlはバージョン4から5へ移行するにあたり変更が加えられたものもあります。中には非常に怪しげになってしまったものも(笑)
その辺りの事情なども交えつつ進めて行きたいと思います。

万能タグ div

div (ディヴ) = division (ディヴィジョン)

意味は「分割」「区分」
存在するものをいくつかに分けることを指します。html要素としての div は分割する 目的を問いません。
htmlというのは見た目ではなく 定義・論理構造 ですから「目的」というのが大事なのですが、divについてはその目的は特に規定がない、つまり何だって良いんですね。ともかく「分割」をするためだけに用います。故に万能タグ。

通常のhtmlは意味や定義を持っていますので単純に分割するのではなく、ある特定の意味を持つまとまり、という感じになりますがdivは意味とかは関係ないんです。というか特に意味は持っていないんですね。html初心者で「タグの定義(definition)とか全然わからん…」という方はdivを使えば良いと思いますよ (o'ω')ﾉ

引用の q と blockquote

q (キュー), blockquote (ブロッククォート) = quote (クォート)

quote というのは「引用」のことです。q は quote の q (q is for quote)です。そのまんまですね。
みなさんが他者の文章を引用する際には qタグよりも blockquote (ブロッククォート)タグの方をよく使うのではないかと思います。何故ならFC2ブログエディターのツールがblockquoteになっているからです。「qタグなんて知らんなぁ…」という方もいらっしゃるかも。

block という英単語の意味は「(大きめの)かたまり」です。ドラマなんかで「現場は2ブロック先です。」なんてよく耳にするのではないでしょうか。十字路から十字路までを1ブロック、これもある一定の距離的なかたまりを意味します。

かたまり(block)の引用(quote)ですから、比較的長い文章 の場合にはblockquoteタグを利用します。短い文言の場合はqタグです。

リスティングの ul と ol

ul (ユーエル) = unordered list (アンオーダード リスト)
ol (オーエル) = ordered list (オーダード リスト)

ordered とは「順序づけられている」という意味です。olタグは順序に意味のあるリストに用います。un, um, in, im という接頭は反対語を意味しますので、unordered は「順序づけられていない」という意味になります。順序が重要でない場合には ulタグ を使うことになります。

ナビゲーションの nav

nav (ナヴ) = navigation (ナヴィゲーション)

日本語でも「目的地までナビしてね。」とか使いますよね。ナビゲーションとは「航海や航空またはその術」のことで、ひいては「走行などの指示」のことでもあります。つまりは「移動」に関係する単語です。

webで「移動」とくればもう ページ遷移あるいはページ内移動 のことですよね。ということでリンクの集合体は nav要素 としてマークアップするのが適しています。

具体的には TOC (トック, table of content) と呼ばれる 見出し目次 など。これは各見出しまでのページ内移動リンクの集合体ですからnav要素でマークアップすると良いですね。そしてnav要素の中身としてさらに ul要素 でリスティングするとGoogle botが良い塩梅に拾い上げてくれます。

<nav>
  <ul>
    <li><a href="#xxx">見出し1</a>
    <li><a href="#yyy">見出し2</a>
    <li><a href="#zzz">見出し3</a>
  </ul>
</nav>

検索結果に表示されるにはnav要素であることよりも寧ろ ul要素 であることの方が重要です。そしてページ内移動であることも条件となっています。そのためページ内移動の示し方も大事ですね。間違っても rel属性, name属性 などお使いになられませんよう。
(rel属性はhtml5からは値が決められており、独自拡張はできなくなっていますのでページ内移動目的にも利用できません)

ついでですが、TOCは大抵の方がJSでもって後付けしているのではないかと思います。見出しを書いたらページローディング時に自動抽出して書き出す、という意味です。
JSで何かをする時には SEO を気にする場面がよく巡ってきますが、TOCについてbotはJS実行後の内容を拾っていますので大丈夫です。というかraw htmlのみ有効、というのはもうheadぐらいではないかと思います。

改行の br

br (ビーアール) = line break (ライン ブレイク)

日本人、改行好きですよね (´・ω・｀)
line breakが必要なのってペンで書面に書く時ではないかと思います。パラグラフ間に空白行を入れなさい (Make a line break between paragraphs.) という指示がテストの時に書いてあったりします。ですがweb上でパラグラフを作成する時には正しくやれば p要素 を用いるわけですよね。p要素のデフォルトは上下に1文字分の高さの空白行ができますのでbrを使う必要が無いんです。本来は。そして英語圏ならば。

記事の横幅が広すぎて文章の見た目が悪い… と感じたときの対処法

昔は狭いレイアウトが流行ったこともありましたね。3カラムでメインコンテンツも400〜500pxと狭い領域で、文字は極小11〜12px程度、みたいな。「スマートフォン」というデバイスが存在しなかった太古の昔の話です。 2018年現在だとパソコンも大型化していますし、画面(領域)を広く使う 、小ぢんまり使うのではなくダイナミックに使う、というデザインの方が寧ろ主流になってきました。...

vanillaice000.blog.fc2.com

改行を多用している文章というのはパソコンで見ても上記リンク先記事内容にある通り、ひどく左に寄っている印象で読みづらいですし、スマートフォンでもやはり読みづらいですね。FC2ブログを更新する時に改行の扱いを「htmlタグのみ」にして書いたらどうだろう。そしたら改行したい文末でいちいち <br> って書かなきゃいけませんのでかなりめんどくさい。めんどくさくなると改行やめちゃおっかなー、みたいな。逆に良い効果かもしれません(笑)

定義の変更で怪しげになってしまったhtmlタグ

ここからはhtml5策定時に廃止されず生き残ったものの、そのせいで「略語」ですらなくなってしまったタグ達をご紹介。

他テキストと区別するための u

u (ユー) = ？？？

html4時代のu要素は underlined text (アンダーラインド テキスト)でした。現在では「他のテキストと区別したいテキスト」を囲うためにuタグが用いられます。してから、何の略語やねん(笑)

廃止タグが廃止された理由というのは 見た目を操作するため用いられる ものであったためです。html5では htmlはセマンティクスに徹し、スタイリングはCSSに全て任せる というのが理念ですから、テキストに下線を引くためのuというのは廃止されるべきタグでした。

がしかし、uタグなんてみんなめっちゃ使っとるからね (´・ω・｀)
属性などが廃止されるのはまだマシだとしても、タグ(要素)そのものが廃止され、その廃止されたタグ(要素)がページ内に点在しているとなるとこれはかなり問題ですよね。

<div align="center">あいうえお</div>

念の為ですが「あいうえお」の前にある <div align="center"> が開始タグ、開始タグの中にある align="center" が 属性名 (align)とその 属性値 (center)、2つを合わせて 属性、「あいうえお」の後ろにある </div> が 終了タグ、全体が 要素 です。
全体を指して「divタグ」という言い方をする方が非常に多いのですが、全体を言うならばdivタグではなくdiv要素です。ちなみにalign属性は廃止されていますので使わないようにしましょう。

話を戻しまして、定義を変更することで生き残ったタグというのは略語ではなくなってしまったんですね。無理やり単語を探すことができれば良いのだけれど(笑)
html5の理念上スタイリング目的だけのhtmlを残すのは看過できない、がしかし廃止するわけにもいかない。というわけで定義をそれらしく変更した上でデフォルトCSSで見た目を旧来のままにしておく、という大人の事情感漂うアレでソレな感じになっています。

下線を付けることが目的(見た目だけの問題)ならばCSSの text-decoration: underline を使うようにしましょう。

専門用語や脳内思考を示す i

i (アイ) = ？？？

これも無理矢理感がすげぇ (´・ω・｀)
旧来は italic つまりテキストを傾けるために用いられていました。欧文でイタリック体にする時はどんな時かというと、やなり専門用語や固有名詞などですから、ものすごい違和感があるというわけではありません。しかし略語になってない(笑)

アイコンフォントなどがi要素を採用していますね。そういった使い方も認められるようになっています。定義的にはどうかなぁ、という気もしなくはないが。アイコンフォントのサービスというのはhtmlが単純であればあるほど歓迎されます。すごく長いhtmlソースコードだとそれだけで難しそうな印象を与えてしまいます。i要素ならたった一語。簡単ですね(笑)
Font awesomeがaria属性を無くしたのもそういう経緯かしら。や、知らんけどさ (´・ｪ・｀)

フォントを傾けることが目的(見た目だけの問題)ならばCSSの font-style: italic を使うようにしましょう。

ついでに日本語フォントは基本的にはitalic指定は「できない」と思った方が良いですよ。日本語は文字を傾けるという文化ではないので傾けられるフォント種の方が寧ろ珍しいのです。Windowsでお馴染みの「メイリオ」も傾けられません。「游ゴシック」は傾きます。フォントのリリースメーカーが親切に斜体を用意してくれていれば傾きます。

印刷時に太くなる b

b (ビー) = ？？？

これもなぁ… （￣∀￣；）
旧仕様は bold text でした。W3Cによると「bタグは最終手段にして！他にどうしても適当なものが見当たらない場合だけにして！つか、もう使わないで！」と仰っております。思い切って廃止すりゃ良かったんじゃん(((笑)
ところがbタグというのはブログサービスの多くがエディターに「太字」と称してbタグかstrongを使っています。廃止できませんねこれでは。

文字を太くすることが目的(見た目だけの問題)ならばCSSの font-weight: bold を使うようにしましょう。

ちょっと気をつけたいCSS

CSSは「略語」という感じではないので英単語の意味を知りましょう、という主旨で進めます。

不透明度を示す opacity

opacity (オゥパァシティ) = 不透明度

勘違いしている方がとてもたくさんいらっしゃいます。opacityというのは 透明度ではなく不透明度 です。ここ間違えると目的に対して逆の結果を得ることになりますので注意。「透明度100%」というのは完全透明ですよね。なので opacity: 1 と書いたら完全透明ですか？逆ですよ。不透明度ですから「不透明度100%」で完全不透明つまり透けません。「透明度」を意味する英単語はopacityではなくtransparency(トランスペアレンシィ)で全く別の単語です。

あとどうも日本ではこのopacityプロパティが「背景透過」という対訳で紹介されていることが多いようです。背景とか関係ないですね。それどころかopacityは背景だけでなく前景も透過します。opacityの値を1以下(.4など)に指定した背景画像の上というか中にテキストを書いたらテキストも薄くなります。背景「色」を透かせたい場合はopacityではなくrgba値で指定します。rはred、gはgreen、bはblue、最後のaはalphaでこちらも透明度ではなく不透明度です。
背景「画像」の場合にはrgbaは効力がありませんのでopacityを使うことになりますが、前景を透かせないためにz-indexなどの操作テクニックが必要です。

Q&Aで「透かせたくない要素に position: relative を指定すると透過が解除されます」とか出てくるんですが、それは古いIEだけです。真っ当なブラウザではそういった都合の良い誤解釈はおこりません。

位置 align

align (アライン) = 位置

alignは「位置」という意味です。vertical-align というプロパティがありますね。vertical というのは「垂直」のことですから垂直方向の位置を指定するには vertical-align を使います。単に align と言った場合、webの基本は水平(horizontal, ホライゾンタル)ですから水平方向の位置揃えです。alignと言っても先に述べた通り align属性 ではないですよ。廃止されています。旧来のalign属性の代替CSSは text-align です。

古いテンプレートが最新ブラウザで閲覧すると左に寄っていることがあります。本来は中央にあるべき全体像が左に寄せられている。この場合はまず間違いなく <div align="center"></div> という指定がしてあるはずです。align属性に値をcenterに指定して全体像が中央に寄るのは古いIE(バージョン8まで)だけです。もともとがIEの誤解釈です。align属性というのは全体像(display: block)を操作することはできません。display: block を持つ要素の「中」にある display: inline あるいは display: inline-block の要素にしか効力はありません。今見てもalign属性値centerで中央に寄っている、という方は ブ ラ ウ ザ が 古 す ぎ ま す。変えましょうよ。いい加減。

行の高さ line-height

line-height (ライン ハイト) = 行の高さ

「行間」と訳す方が良いのかもしれませんが、直訳は「行の高さ」でありその方が的を得ています。文字はそれ自体が高さを持っています。それに加え高さに余幅が無いと上下のテキストがぴったりくっついてしまいますよね。そのためにline-heightを指定します。

たまに見かけるんですが、line-heightをpx単位で指定してはいけません。pxというのは絶対単位ですから文字自体の大きさによっては重なってしまいますよ。

例)line-heightに15pxを指定、font-sizeに25pxを指定

あいうえお
かきくけこ
さしすせそ

line-heightに15px指定ということは普段13px程度で文章を書いているんでしょうかね。がしかし途中で強調のためにフォントのサイズを大きくすることだってありますよね。するとこういった事態に陥ります。line-heightの指定は相対的な emか単位なしで。