ドーモ
フツーの理容師
オーパス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のこの部分です↓
これで、想定通した機能があったので
そのままでも良かったのですが、
どうやら「display:inline-flex」のほうが
新しいということが分かったのです。
その疑問を解いてくれたのが
この二つのページでした
先に書いたように、古い言語は
使えなくなる運命にあるので、
可能なら新しい言語を使う方がイイ。
と思って、出来上がっていたメニューを
「display:inline-flex」を使って
作り直したのです。
作り直した理由は以下のようなことがあるから。
HPに限らず、コンピューターで使用される言語は
日々進化しているのだと思います。
この進化はこれからも続くはずです。
人が話す言葉が進化していくと、
古い言葉は使わなくなっていきますよね。
コンピューターの言語の世界では、
古い言語は使えなくなっていくのです。
だから、自分が知る限り新しい言語を使って
作る方がイイと考えるからです。
てなことで覚書は終わり。
これね、今は覚えてるんですが、
半年もするとだんだん忘れて行くので
ここで自分の言葉で書いておくと、
後に便利なんです。
これもブログの使い方の一つかと思います^^
ではまた♪
=== / / / === / / / ===
大阪府東大阪市の近鉄奈良線と
JRおおさか東線の河内永和駅から
徒歩8分のヘアーサロン
DO-S シャンプー バーデンス スキャルプシャンプー
販売・取扱店
大阪府東大阪市長栄寺21-25
お店の地図はコチラ
ご予約のお電話はコチラ
06-6781-6459
スマホや携帯で迷惑メール設定をしている方は
このアドレスを受信できるように設定をお願いします
営業時間
AM9:00～PM7:00
『2月の定休日のお知らせ』
29(月)
『3月の定休日のお知らせ』
7(月)
14(月)・15(火)・16(水)
21(月)・22(火)
28(月)
コメント