ヘッダー

HTML・CSS・JavaScriptで作った見出しタイトルのデザイン・コード集です。コピペで簡単にご利用頂けます。

  • 「メニューを交互カラーで区切り」

    メニューの背景色を交互に変えて区切りにする

  • 「下部ボーダー付き」

    ヘッダー全体の下部に線を表示する

  • 「角丸ボックス」

    ヘッダーの両端に丸みを持たせたデザイン

  • 「ロゴ中央+メニューアイコン配置」

    サイトタイトルを中央に配置、メニューの各項目の上部にアイコンを表

  • 「ロゴ中央+メニュー下線」

    サイトタイトルを中央に配置、メニューはホバーで下線を表示する

  • 「中央寄せ縦書きメニュー」

    サイトタイトルとメニューを中央に配置し、メニューは縦書き

  • 「中央ロゴ・左右メニュー」

    サイトタイトルを中央に、メニューは両サイドに配置する

  • 「中央ロゴ・左右メニュー+中央下部に半円を配置」

    ロゴを中央、両サイドにメニュー項目を配置し、中央には半円加えてアクセントを付ける

  • 「下部に三角クリップパスを配置」

    ヘッダーの形を変えてアクセントを付ける

  • 「下部にカーブをつける」

    ヘッダーの形を変えてアクセントを付ける

  • 「メニュー間に縦線仕切り」

    メニューの項目同士の間に縦線を入れて仕切る

  • 「ドットで区切り(中央寄せ)」

    サイトタイトルとメニューを中央に配置し、項目はドットで区切る

  • 「背景グラデーション」

    ヘッダーの背景にグラデーションをつける

  • 「メニューにアイコンを配置」

    メニューの各項目の左側にアイコンを表示する。

  • 「メニューにアイコンを配置」

    メニューの各項目の上部にアイコンを表示する。

  • 「ヘッダーを右側に配置し縦書き」

    ヘッダーを右側に配置し、サイトタイトルとメニュー項目を縦書きにする

  • 「ヘッダーを横に配置」

    ヘッダーを縦並びにして画面左側に配置

  • 「シンプル横並び」

    サイトタイトルとメニューを一列に並べる

このページのトップへ戻る