【CSS】【グローバルメニューデザイン】2行目に英語を追加/アイコン画像を追加

Coding

グローバルメニューに、簡単にワンポイントを加えたい場合に、おすすめの方法をご紹介します。

  1. 2行目に英語を追加する方法
  2. アイコン画像を追加する方法
  3. 【おまけ】英語とアイコン両方追加する方法

完成図(画像)

まずは、それぞれの完成図になります。

2行目に英語を追加する

2行目に英単語を表示

アイコン画像を追加する

アイコンを表示

【おまけ】英語とアイコン両方追加する

英単語とアイコン両方を表示

このようなグローバルナビを作成していきます。

参考コード

それぞれの詳しいコードと、少し解説をしていきます。

アイコンは、「Font Awesome」を使っているので、事前にFont AwesomeのCDNを<head>〜</head>の中に貼り付ける必要があります。

今回、Font Awesomeの導入方法は割愛させていただきます(><)

2行目に英語を追加する方法

See the Pen globalnavi-text by shimamisa (@shimamisa) on CodePen.

ポイントは、CSSの「/* ナビゲーション */」以降からになります。

<span>を使う方法もありますが、今回は擬似要素を使っています。htmlを変える必要がないので楽だと思います。

また、リストによって英単語が違うので、<li>タグにそれぞれクラス名を付与しています。
「ホーム」なら、「navItemHome」というクラス名を付与しています。

アイコン画像を追加する方法

See the Pen globalnavi-icon by shimamisa (@shimamisa) on CodePen.

こちらも同様に、ポイントはCSSの「/* ナビゲーション */」以降からになります。

<a>タグ(上記だと「.navItem a」です)に、「position: relative;」を指定し、擬似要素beforeに、「position: absolute;」を指定します。

また、リストによってアイコンが違うので、<li>タグにそれぞれクラス名を付与しています。
「ホーム」なら、「navItemHome」というクラス名を付与しています。

Font Awesomeのアイコンを擬似要素で使用する方法は、以下のようになります。

font-family: “Font Awesome 5 Free”;(Font Awesomeを使うため)
font-weight: 900;(表示するために必要)
content: “\f015”;(アイコンの種類。アイコンによって違います)

【おまけ】英語とアイコン両方追加する方法

最後に、おまけです!

See the Pen globalnavi-texticon by shimamisa (@shimamisa) on CodePen.

以上になります。
少しでもご参考になれば幸いです!

トップへ戻る
タイトルとURLをコピーしました