2000年代初頭、CSSコーディングの時代へ
私がコーディングを教わった2000年初頭は、エクセルのような感覚で表組を使用してサイト全体を整える「tableコーディング」や、阿部寛さんのホームページのような左右が分割された「frameコーディング」といった手法から、外部ファイル「CSS」を使用したコーディングへと一気に変化する過渡期でした。
少し前の技術者の方からは、CSSコーディングが今までの考え方とあまりに違うので戸惑った、脱落してしまった人もいた、との話を聞きました。
幸い、CSSを使用したコーディングは2021年現在まで主流となっており、最初にCSSコーディングから学べた私はとってもラッキーでした。
html4時代の回り込みはfloatプロパティで！
その当時の最先端はhtml4で、必須コードといえば「float」でした。
htmlはCSSで装飾コードを振らなければ、ブロック要素と呼ばれるかたまりごとにジェンガのように縦に並んでいきます。
画像や文章、ひいてはサイト全体の要素を横に並べる場面は多く存在し、そのために要素の回り込みを指定する「float」が大活躍します。
しかし、floatは一度指定したら解除するまで以降の要素に「回り込み」として影響すること、幅を指定しないときれいに行かないのが特徴で、デバイスの幅によってサイトの幅が決まるレスポンシブレイアウトにはとても使いにくい記述でした。
スマホ時代！とても便利な「display:flex」
技術は常に進歩していますので、定期的に初心者向けの本を読んでコーディング技術をリフレッシュすることにしています。
今はhtml5の時代です。初心者向けの本を購入して勉強しなおしました。
今回一番驚いたのが、「display:flex」という記述です。
これを書くだけで要素が等分されるのです！サイズも％で指定れき、並び順も思いのまま。
回り込みよりもスマートでレスポンシブレイアウトに最高の記述です。
早速、当事務所の下部のお問い合わせボタンに応用してみました。
.conteiner_btｍ{
display:flex; /*等分表示*/
width:100%; /*全体の幅指定*/
position:fixed; /*下部固定*/
left: 0;
bottom: 0;
text-align:center; /*文字位置中央*/
z-index:999;
}/*以下、ボタンのサイズと色調整*/
.item-1 { background-color:#5475d5; width:50%; line-height:1.2em; padding:2px 0 ;}
.item-2 { background-color:#97c451; width:50%; line-height:1.2em; padding:2px 0 ;}.item-1 a { display:block; color:#FFFFFF; text-decoration:none;}
.item-2 a { display:block; color:#FFFFFF; text-decoration:none;}
「display:flex」は、文字がはみ出すので注意
floatプロパティではデフォルトでエリア内で文字が折り返す設定になっています。
しかし「display:flex」では文字が折り返さず突き抜けてエリアが広がってしまいます。
折り返したい文字要素に「word-break: break-all;」を指定することで制御できました。
p{
word-break: break-all;
}
まとめ
慣れた技術ばかり使っていると、どんどん時代遅れになってしまいますね。
便利で最新の技術はどんどん取り入れて、使いやすく、効率的に、長く使用できるホームページ制作を目指し続けていきます。
