大人の発達障害者の挑戦日記

30代後半で成人発達障害者となった私の日記

flexboxを使って折り返しが中央揃えになったけど解決できた

こんにちは。エイキチです。

はてなブログのトップページをCSSのflexboxを使ってみたという話を書きます。

HTMLとCSS

WebサイトやブログはHTMLという言語を使って記述されています。ブログもHTMLで記述されています。HTMLには文字を入力して送信するという機能があるようで、そのおかげて、ブログの記事を投稿するという仕組みができているようです。ブログの見出しに線を引いたり、背景色を付けるということもできますが、これはCSSと呼ばれるものを記述します。

CSSというものを私が知ったのは今から20年近く前だと思います。当時はホームーページを作るのにWindowsのソフト「メモ帳」でHTMLを記述して、CSSでちょっと色付けたり、線を引いたりしていたと思います。見栄えはCSSで整えるということを参考書で見た気がします。HTMLは大学の授業でならったのですが、当時はCSSは登場したばかりらしく、授業では扱われませんでした。最近ではCSSを使うのは普通のようです。

私のこのブログは「はてなブログ」というサービスを使っています。HTMLやCSSの知識がなくても記事は作れますが、知識があると見栄えを変えてみたいと考えることがあります。そういうときは、「はてなブログ」の「テーマ」設定と「デザインCSS」設定を使います。

テーマというのは、ブログ全体の見栄えを定義したCSSと解釈して良いでしょう。「はてなブログ」のテーマストアを見ると公式で用意されたものや、個人が用意したものが投稿されています。テーマをブログにインストールすることで、ブログの見栄えを変えることが出来ます。

そのあと、ちょっとこの見出しの背景色を変えたいっておもったら、「デザインCSS」という設定を使います。ここにCSSを書くと色を変えたりできます。簡単にいうと、CSSは後で書いたものが有効になるので、テーマを上書きする感じで使えます。

一覧表示とカードデザイン

「はてなブログ」では「はてなPro」という有料プランがあります。このプランを使うと、トップページを一覧表示にする設定が出来ます。

私はこのブログ開設してすぐに「はてなPro」に加入して一覧表示の設定をしました。この前まで、一覧表示で満足していたのですが、つい最近になって、世の中で流行っているカードデザインというものしてみたいと考えるようになりました。そのデザインにするテーマが既にあるのですが、何故か自作してみたいと思いました。

トップページのPC表示を以下のような感じにしたいと思ったのです。

f:id:otona-hattatsushougai-challenge:20181230203942j:plain

自作の地味なテーマに設定している状態で、デザインCSSでカードデザインをやってみることにしました。

flexbox

ネットで調べた結果、flexboxという設定があることが分かりました。

例えば、以下のようなhtmlがあったとします。

<div class="main">
    <div class="box">■1</div>
    <div class="box">■2</div>
    <div class="box">■3</div>
    <div class="box">■4</div>
    <div class="box">■5</div>
</div>

この場合、縦に文字が並びます。div要素はブロック要素なので、横幅いっぱいに領域を確保するようです。これに次のようなCSSを適用すると、カードデザインの並びが出来ます。

.main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;

     -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
     -ms-flex-direction: row;
         flex-direction: row;

  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.main {
  width: 100px;
}

ネットを見れば情報はたくさんあるので、詳細は省略します。とにかく、上のCSSによって次の図のような配置になります。

f:id:otona-hattatsushougai-challenge:20181230203940j:plain

さっそく自分のブログのデザインCSSに適用したのですが、以下のようになってしまいました。

f:id:otona-hattatsushougai-challenge:20181230203937j:plain

最後のボックスだけ中央揃えになってしまいました。先ほどの■を使った例だと以下のようになっているということです。

f:id:otona-hattatsushougai-challenge:20181230203935j:plain

なぜこのようなことになったのか、最初は分かりませんでした。調べていくうちに、使っているテーマの設定が影響していることが分かりました。私の自作テーマは「はてなブログ」が自作用に提供しているboilerplate.cssを基にしています。そのCSSに以下の記述があります。

.page-archive .archive-entry {
    margin-bottom: 3em;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.3;
}

左マージンと右マージンの値をautoに設定しています。これが影響して、レイアウトの最後が中央揃えになっていたようです。この記述の影響をなくすために、デザインCSSの方で「margin: 2px;」という記述をしました。これで目的通りの配置にすることが出来ました。

似たような現象に困っている人がいたら、marginの値がautoになっているかも知れません。

最後に参考までにCSSのプレビューを貼っておきます。

上の結果をみると、marginにautoを設定したときの折り返し表示の違いがわかると思います。

最後に一言

原因を見つけるというのは結構楽しいです。