人気ブログランキング | 話題のタグを見る
Studio TA Subsite の案内とお知らせ

スキンコードの世代交代

2018年 03月 25日
先日、この私のブログページのスキンを触って、コードの一部を書換えました。 ちまちまやっている事で、外から見て代り映えしないのですが、今回はちょっとした節目の意味があり、覚書き程度にまとめました。



レイアウトにかかわるコードの変遷



〔第1世代〕


当初のスキンは「table」タグを使用したものが多く、これはいかにも旧いスタイルです。 本来「table」は表を構成するためのタグです。 しかし、2次元の画面を要領良く構成するには「table」を利用すると都合が良く、エキサイトの旧時代のブログのスキンにも多用されていました。

私が最初にアレンジ元にしたスキンは「ワイド」ですが、ブログタイトル部(ブログヘッダー)、本文とサイドメニューの配置、本文のタイトル部、ページャー部など、ページのレイアウトは全て「tableタグ」で行っているとさえ言えるものでした。

スキンコードの世代交代_a0349576_10425898.png

このスキンの「HTML全体」は以下で、「tableタグ」による構成が良く判ります。


<TABLE>
<TR>
<TD><DIV>
<DIV><$header$></DIV>
<DIV><$blogurl$></DIV>
</DIV>
</TD>
</TR>
</TABLE>
<TABLE>
<TR>
<TD></TD>
<TD><DIV>
<$post$>
<HR>
<TABLE>
<TR>
<TD><$prepage type=1$></TD>
<TD></TD>
<TD><$nextpage type=1$></TD>
</TR>
</TABLE>
<BR><BR>
</DIV>
</TD>
<TD>
<DIV>
<DIV><$adminmenu type=1$></DIV>
<DIV></DIV>
<DIV>
<DIV>
<CENTER><$logoimage type=1$></CENTER>
<$description$><$nick$>
</DIV>
<$calendar type=1$>
<DIV><$menuright$></DIV>
</DIV>
<DIV></DIV>
<CENTER><$banner type=1$></CENTER>
<$xml$>
</DIV>
</TD>
<TD></TD>
</TR>
</TABLE>


私のアレンジも、これを見よう見まねで変形させたに過ぎず、当然「tableタグ」をそのまま使っていました。


〔第2世代〕


HTMLやCSSの知識が増えて来るに従い、デザイン(配置構成)の目的で「table」を使用するのは望ましくないという事を知りました。 これは、自動読み上げアプリは「table」を実際の「表」と受け取って読み上げる事を想像すれば、その意味が判ります。 並んだcellは関連した内容のはずが、デザイン目的の「table」はそんな関連性がありません。 検索ロボットは意味の判り難いページと判断するでしょう。 現在では、ページ内容の本質はHTML、デザインはCSSに分化させる事で、それぞれの高度化がはかられているのです。

私はその条件に準拠が必要と考え、スキンのHTMLコードから「table」を無くす事にしました。 そもそも「table」が用いられたのは、「div」などの要素が、ページ上で上から下方向に縦に並び、普通は横方向に並ばないからです。 2次元平面上のレイアウトをさせたい場合には、何らかの工夫が必要で、そのひとつが「table」利用だったわけです。

調べると、横並びレイアウトのために良く用いられるのが「float」プロパティでした。 しかし、常にその後処理「clear:both;」が問題となる様で、私は利用を避けました。 そして行き着いたのが、「display: table;」「display: table-cell;」というCSSプロパティです。 これを「div」要素に指定すると、そのまま「table」「cell」としてのレイアウトが可能で、「tableタグ」の書き換えには有難いプロパティです。 この導入で、HTML上の「tableタグ」を全て「div」タグに置き換えることが出来ました。

この段階で、もはやアレンジ元スキンのHTML構成に頼る必要が無いことが判って来ました。 何かアレンジ元のスキンを用意して、それを叩き台に一からスキンを作る目的で探したのが「ハルハル」というスキンでした。 構成がシンプルで、私のそれまでのデザインの移植先に良さそうで選んだのですが、現在Chromeからではアクセス出来ず、提供スキンの一覧にはありません。

スキンコードの世代交代_a0349576_12302260.png

この公式スキンをベースに、メインサイトは基本フォントサイズを16px、サブサイトは13pxとして、スキンを組んでいます。


〔第3世代〕


「div」要素の2次元レイアウトを可能にする手法として、「display: table;」は初期のCSSには無かったプロパティでした。 しかし、スマートフォンの利用拡大に応じて、更に便利な「display: flex;」や「display: grid;」というプロパティが登場して来ました。 これらのプロパティは要素の2次元的配置そのものを目的に開発され、とても柔軟に扱えます。

今回は、いままで「display: table;」を使っていた場所を、全て「display: flex;」に置き換えました。 それは、本文とサイドメニューの配置で「display: flex;」が明らかに適していたからです。

「display: table;」「display: table-cell;」の指定では、「div」はあたかも「table」の様な振る舞いをします。 本文とサイドメニューを横並びにするため、これを使用していたわけです。 ところが、サイドメニューが無い場合は、本文の幅は「table」全体の幅になろうとします。 これも「table-cell」指定による特徴です。 これが原因して、ページの読み込み時に、本文幅が一旦横に広がり、メニューが読み込まれて縮まる表示になっていました。

スキンコードの世代交代_a0349576_13181838.png

この落ち着きなさを改善するため、本文の幅指定を試みました。 ところが、どうしても「table-cell」としての振る舞いが邪魔をして、上手く行きません。 これが「display: flex;」に置き換えた理由です。 そして「display: flex;」に換えると、こちらの方が目的にかなった指定だと確信しました。

「display: table;」を「display: flex;」に換えるだけで、直下の内部要素は自動的にFlex配置になります。 更に配置の様式を直下の要素に細かく指定出来ますが、実際上は余り知らなくてもOKです。



Flexレイアウトとした結果


今回の「display: flex;」の導入で、サイドメニューの有無に影響を受けず、本文幅を指定する事が出来る様になりました。 以下のCSSコードは置き換えの中心で、「/* */」の部分は実際は置き換えて削除しています。 本文幅はウインドウ幅から「calc」によって指定しています。 また、ウインドウ幅が一定以上に狭まっても、従来と同様に本文幅が狭くならない様に「min-width」の指定をしています。

#W_CONTENTS {
/* display: table; */
display: flex;
width: 100%; }

#CONTENTS {
/* display: table-cell; */
/* vertical-align: top; */
width: calc(100vw - 288px);
min-width: 720px; }

#NAVIGATION {
/* display: table-cell; */ }

この書き換えで、ページ読込み時に本文幅の変化する事がなく、遅れて読み込まれたサイドメニューは空いた場所にすっと表示される様になりました。 特に前後のページへ移動した際に、以前より落ち着いた読込み表示になっています。



by Ataron2 | 2018-03-25 13:46 | ブログスキンのアレンジ