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;
}
まとめ
慣れた技術ばかり使っていると、どんどん時代遅れになってしまいますね。
便利で最新の技術はどんどん取り入れて、使いやすく、効率的に、長く使用できるホームページ制作を目指し続けていきます。
飯田市でホームページ制作・広告運用をサポート｜デザインスタジオiR
牧内理恵
まきうちりえ
飯田市在住、広告制作歴20年以上。これまで200名以上のクライアント様と向き合い、100件以上のサイト制作を手掛けてきたデザイナー兼エンジニアの牧内理恵です。御社の強みを引き出し、業績アップに繋がるWebサイト・ネットショップ・販促ツールをご提案します。拠点とする長野県内はもちろん、全国各地からのご依頼にも柔軟に対応しております。
「相談してよかった」と言っていただける、飯田下伊那地域のパートナーとして。
長野県飯田市を拠点に、ホームページ制作やECサイト構築、Web運用のトラブル解決を承っています。20年以上のキャリアで培った「伝わるデザイン」と「確かな技術」で、御社の業績アップを支えます。飯田・下伊那エリアはもちろん、全国からのオンライン相談も大歓迎です。
「ホームページを作りたい」「ホームページをリニューアルしたい」といったご依頼もお気軽にお声がけください。
※強引な勧誘は一切ありませんので、安心してお悩みをお聞かせください。
