中央寄せで表現
ブログやホームページで記事を表現するとき、縦、横の表示幅はデバイスごとにまちまちです。そこで「レスポンシブWebデザイン」の考え方が尊重されています。
レスポンシブとはパソコン、スマートフォン、タブレットなど画面サイズが異なってもWebサイト表示を柔軟に調整して同じ記事ですべてに対応する方式を指します。
レスポンシブ方式がすべてのケースで最善と決めつけることはできませんが、共通情報で扱えるので後々の改訂には極めて有利で管理する上で好ましいと言えます。
レスポンシブ表現は画面サイズが異なっても同一機種ならば割と簡単に実現可能ですが、パソコンとスマートフォンに共通対応となると少し気を配ることになります。
中央寄せのサンプル
パソコンなど表示幅の大きいデバイスではwidthを使ってpxでサイト幅を固定しtext-alignを指定すれば、中央に表示させることができますが、スマートフォンなどスクリーンサイズが小さいデバイスではwidthを使ってサイト幅を固定することは避け、widthを100%にして目いっぱい表示させたいものです。その場合、PC、スマートフォンのどちらにも有効な「max-width」を利用すると便利です。
サンプル
コロナウィルスの画像を中央寄せに表示したサンプルコードを以下に示します。
<head>
<meta charset="utf-8">
<style>
#container {
max-width: 480px;
margin: 0 auto;
}
#main {
width: 100%;
text-align:center;
border:1px solid pink;
}
p, h1{
text-align:left;
}
</style>
</head>
<div id="container">
<div id="main">
<h3>中央寄せのサンプル</h3>
<img src="https://aidesign.lolipop.jp/wp-content/uploads/2020/05/corona-18.png" width="200" height="200"/>
</div>
</div>