複数の段組みで構成されるマルチカラムレイアウトで読みやすくて、分かり易いウェブサイトを目指そう。
ウェブサイトの黎明期には本文が入るメイン領域の両サイドにメニューや関連情報を配置した。
モバイルサイトは少しの間、単独で存在した。これがレスポンシブで PC と併合された。時代がモバイルファーストになるとモバイルの表示幅のない理由から両サイドの内容が非表示になりボタンでモーダルで開かせる方式に変化した。
さて、PC の場合、 1column にレイアウトすると、一行の文字数が長くなり過ぎないように読みやすい文字数で設定する。それを追及すると本文の幅を調節して幅を狭くすることになる。ただ、これでは広い領域を無駄にしてしまう。このあたりからから様々なアプローチが開始されてくるようになった。
或る著名なサイトで見つけた悪い例だが、PC に於いては、幅の異なる 3column で組んで全体画面を満たしていても、モバイルで見ると全て 1column で均して表示されている。これでは論理性が無い。html は論理的構造であり、CSS による装飾は htmlの論理的構造を継承しなくてはならない。ウェブサイトはもっとスマート・シンプルであるべきだ。
本ページではレスポンシブに於いて PC は column-count を使って 2column に設定、モバイルでは 1column にしている。付随した情報を必要とするのであれば次のセクションで挙げているように、この 1column の中にさらにマルチカラムを組んでいくのも方法だ。
ここでの重要な着眼点は、 モバイルのポートレートの全幅を PC のマルチカラムの単一カラムの幅に割り当てる、ということだった。この方法論で PC とモバイルのレイアウトの兼ね合いが俄然簡単に運ぶようになった。
現状のレスポンシブでは、PCのランドスケープとモバイルのポートレートの 2 点を押さえておけば他の場面においても手を煩わさないで進行できるようだ。
このページは column-count を使って 2column に設定されている。この中に次の方法を使って 3column を入れてみる。
指定された段数へ要素の内容物(テキスト)を分割するという方式が column-count: である。分割された段組みへテキストが回り込む。段数は例えば 「column-count: 2;」、「column-width: 8rem;」 などのように、他の CSS プロパティによって決定される。
3column を画像にして張り付けてあるサイトが存在するが、これはフラッシュが持てはやされた前時代のことだ。
3column にすると幅が狭くなる。そこへ 3 分割でテキストを入れると、当然ふさわしいのは小さいファントサイズになる。ピンチアウト(pinch out)すれば大きくして見ることができる。
綺麗に整理された段落の流れの中に「カード型レイアウト」を差し込む。特化した内容を強調したいときなどに有効と思われる。
カード型レイアウトの html と CSS を示す。
<div style="display: flex; flex-direction: column; align-items: flex-start; background-color: aliceblue; width: 100%; padding: 10px; border: 1px dashed #333; margin-bottom: 16px;">
<div>
<h2 style="font-size: 16px; padding: 2px 6px; background-color: lightsteelblue; color: #333;">メソッド(method)</h2>
</div>
<div>いつの時代も、変わらないものは、青春だけ。いつも愚かで、一途であればいいという。馬鹿で、純粋でいいんだよ。どれだけ一途で、愚かで、危うい期間を過ごしてきたかで、そいつの人生が決まっていくんじゃないか。
</div>
<div style="align-self: flex-end; background-color: lightsteelblue; color: #fff; padding: 0 6px; border-radius: 24px; font-size: 14px;">北方謙三
</div>
</div>
このタイトルは普通のヘッダータグに挟んだだけのもの。
すべての知識の拡大は、無意識を意識化することから生じる
─ フリードリヒ・ニーチェ
収まりきらない幅になるとカラム落ちを発生させるタイトル。
確認用ページ: 別ページで確認する(タイトルの折り返しを制御する)
区切りたい文字列を「display: inline-block;」で囲む。納まる幅のサイズに因って、溢れる文字列は改行される。
html と CSS は以下の通り。
<div style="width: 100%; display: flex; justify-content: center; margin: 16px 0 0 0; padding: 0; font-size: 0;">
<div id="block_of_text">
<div class="line_breaks">すべての知識の拡大は、</div>
<div class="line_breaks">無意識を意識化する</div>
<div class="line_breaks">ことから生じる。</div>
<div class="line_breaks" style="font-weight: 100; font-size: 20px;"> ─ フリードリヒ・ニーチェ</div>
</div>
</div>
.line_breaks {
display:inline-block;
/*width:auto;*/
height:30px;
line-height:30px;
font-size: 1.875rem;
font-weight: 900;
line-height: 1;
color: #3498db;
margin: 0;
text-align: center;
text-shadow: 3px 3px 1px #d3d3d3;
padding-top: 6px;
}
「float: left」を画像に使用した例。テキストを回り込ませるこの手法は「float」のみが成せる技であり、この古典的手法は不滅である。
この「float」を使って次のように複数のカラムを作成することもできる。
CSS の justify-content プロパティは、フレックスコンテナーの主軸およびグリッドコンテナーのインライン軸に沿って、中身のアイテムの間や周囲に間隔を配置する方法を定義する。
『勝手にしやがれ』は、1960年のフランスの犯罪ドラマ映画。監督・脚本はジャン=リュック・ゴダール、出演はジャン=ポール・ベルモンドとジーン・セバーグ。
『気狂いピエロ』(きちがいぴえろ)は、1965年のフランス・イタリア合作映画。ジャン=ポール・ベルモンド主演、ジャン=リュック・ゴダール監督。
『ボルサリーノ』は、1970年公開のフランス=イタリア合作の犯罪映画。ジャック・ドレーが監督し、出演はジャン=ポール・ベルモンドとアラン・ドロン。
縦書きの段落は殆どのウェブサイトでは使われていないのが現状である。もし存在しても画像で代替されていることも多い。だから、ここで差がつく。
いつの時代も、変わらないものは、青春だけ。いつも愚かで、一途であればいいという。馬鹿で、純粋でいいんだよ。どれだけ一途で、愚かで、危うい期間を過ごしてきたかで、そいつの人生が決まっていくんじゃないか。
縦書きについては以前書いたものがあるので、以下「関連」リンクが参考にできる。縦書きについては練習が必要だ。本サイトで見ると、以前の作り込みは恥ずかしくなるほどあまい。もっと十分熟す必要がある。
少しだけ触れると、縦書きを覆う div には以下 CSS を充てる。
div#flex-wrapper {
display: flex;
flex-direction: row-reverse;
padding: 20px;
background-image: url("images/eclipse.jpg");
background-size: cover;
background-repeat: no-repeat;
}
本文の CSS には、以下を充てる。
p.body_of_text {
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;
margin: 20px;
padding: 0;
font-size: 5vw;
width: 45%;
height: 350px;
color: #fff;
line-height: 1.6;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 900;
}