タグ

ブックマーク / oshin.tokyo (1)

  • よくあるグローバルナビのCSSをじっくりコーディング

    WEBサイト制作でよくある見た目のグローバルナビのHTMLCSSをコーディングした際、考えることが予想よりも多くありました。コーディングの流れをじっくり解説します。 はじめに グローバルナビに以下のようなデザインが指定されているウェブサイトのHTMLCSSのコーディングを行なっていました。(デザインは仮のものです) よく見る形だし、さくっと組めるかなと着手前は考えたのですが、やってみたら予想よりも考えなきゃいけないことが多くありました。CSSの良い復習にもなったので、自分へのメモも兼ねて、コーディングの流れをじっくり解説します。 なお、フレックスボックス(display: flex)を多用したコーディングを解説しますので、対応ブラウザにはご注意ください。 デザイン仕様の確認 コーディングを始める前に、デザインカンプからコーディングに必要な情報を抜き出して整理します。 項目の横幅 まず、

    k75mix
    k75mix 2021/04/16
  • 1