cssで要素を横並びにするなら「display:flex」が使いやすい

シェアする

ドーモ
フツーの理容師
オーパス21の前田です

少し前にオーパス21のHPをスマホ対応

レスポンシブに変更したと書きました。

この過程で知ったことの一つ、

HTMLの要素を横並びにする時、

「flexbox」が使いやすいと知ったので

その覚書をしておきます^^

これまで<li>などの要素を横並びにするときは

cssで「float」という指示をして

要素を回り込ませていました。

この「float」の厄介な所は、

「float」解除をしないと、

サイトデザインがバラバラになってしまうこと。

ワタシはこの手のことに遅れているので、

HTMLで「float」解除をしていたのですが、

これが古い設定だと知り、

cssでの解除をするも、これがヤヤコシイ…

といっても、横並びにするケースは

必ずあるので、とっても苦労していたのです。

ワタシにとってどれだけ大変だったかと

説明するのも大変なのでやめておきます^^

で、話は元の「flex」に。

このcssが楽なのは、親要素のcssに

『display: flex』を一行書くだけで

横並びになってくれるのである。

HP作りの決まり事とcss

HPを作るうえで、決まり事があります。

HPは作ったことのなくても、

ブログを書いたことのある人なら

感覚的に分かることがあるので例えてみます。

ブログで文字を書くと一文字ごとに横に並びます。

通常縦書きのものはありません。

でも、ブログに写真を貼っていくと

縦に連なっていきますよね。

HP作りでは、各要素によって横に並ぶものと

縦に並ぶものが決まっているのです。

でも、写真を横に並べたいと思った時、

どうすればいいのか?

HP作りにおいてこれを解決するのが、

「float」などの方法だったのです。

でも先に書いたように、この「float」は難しい。

なので、新しい言語が生まれて行ったようです。

このflexの場合以下の進化を遂げたのだとか…

display:inline-box


display:inline-flexbox


display:inline-flex

言語の進化は分かったのですが、

オーパス21のHPを作っている過程で、

上記の『display: flex』と同じ働きをするものがあり、

何が違っているのか?

どれが新しいのか?

ということが気になっていたのです。

それが以下の言語

display: table-cell
display:inline-block

これらも、flexと同じような動きをします。

ワタシにとって、同じような働きをする

似たような言語というのは、

いずれ使えなくなるのではないか?

と、どうも気持ちが悪かったのです。

気持ち悪いながらも

色々試している過程で、

display:inline-block

を使ってメニューを作りました(^_^;)

それが、HPのこの部分です↓

HPのメニュー

これで、想定通した機能があったので

そのままでも良かったのですが、

どうやら「display:inline-flex」のほうが

新しいということが分かったのです。

その疑問を解いてくれたのが

この二つのページでした

CSSで要素を横並びにする方法まとめ
cssリファレンス


先に書いたように、古い言語は

使えなくなる運命にあるので、

可能なら新しい言語を使う方がイイ。

と思って、出来上がっていたメニューを

「display:inline-flex」を使って

作り直したのです。

作り直した理由は以下のようなことがあるから。

HPに限らず、コンピューターで使用される言語は

日々進化しているのだと思います。

この進化はこれからも続くはずです。

人が話す言葉が進化していくと、

古い言葉は使わなくなっていきますよね。

コンピューターの言語の世界では、

古い言語は使えなくなっていくのです。

だから、自分が知る限り新しい言語を使って

作る方がイイと考えるからです。

てなことで覚書は終わり。

これね、今は覚えてるんですが、

半年もするとだんだん忘れて行くので

ここで自分の言葉で書いておくと、

後に便利なんです。

これもブログの使い方の一つかと思います^^

ではまた♪

=== / / / === / / / ===

大阪府東大阪市の近鉄奈良線と
JRおおさか東線の河内永和駅から
徒歩8分のヘアーサロン

Hair Stage オーパス21のHP

DO-S シャンプー バーデンス スキャルプシャンプー
販売・取扱店

大阪府東大阪市長栄寺21-25
お店の地図はコチラ

ご予約のお電話はコチラ
06-6781-6459

お問い合わせ ご質問はコチラからどうぞ

スマホや携帯で迷惑メール設定をしている方は

このアドレスを受信できるように設定をお願いします

営業時間
AM9:00~PM7:00

『2月の定休日のお知らせ』
29(月)

『3月の定休日のお知らせ』
7(月)
14(月)・15(火)・16(水)
21(月)・22(火)
28(月)

スポンサーリンク

フォローする