検索

キーワード


目次

【HTML/CSS】他階層メニューについて

  • 公開日:2020-10-13 17:41:03
  • 最終更新日:2020-11-20 00:08:02
【HTML/CSS】他階層メニューについて

Workteria(ワークテリア)では難易度の高いものから低いものまで、スキルや経験に合わせた案件を多数揃えています。会員登録は無料ですので、ぜひ会員登録してご希望の案件を探してみてください!

フリーランス/正社員のエンジニアとして活躍するには、ご自身のスキルや経験に合わせた仕事を選ぶことが大切です。ご希望の案件がみつからない場合はお気軽にお問い合わせください!ユーザ満足度の高いキャリアコンサルタントが在籍していますので、希望条件や悩み事などなんでもご相談ください。ご希望にピッタリの案件をご紹介させていただきます。

こんにちは。駆け出しプログラマーの石井です。

こちらではに階層メニューついて説明します。

勉強するうえでの参考になれば幸いです。

他階層メニューとは

階層メニューとは、各メニューからさらに細かいメニューを表示させることを言います。

またドロップダウンメニューとも呼ばれています。

他階層メニューはカテゴリメニューを実装するのに最適なので、 グローバルナビやサイドナビなどのナビゲーションで活用されています。


他階層メニューの書き方


HTML


<ul class="construction">

<li>親階層

 <ul>

   <li>>子階層(部門)

   <ul>

    <li>>孫階層</li>

    <li>>孫階層</li>

    <li>>孫階層</li>

   </ul>

  </li>

  <li>>子階層(部門)

   <ul>

    <li>>孫階層</li>

    <li>>孫階層</li>

    <li>>孫階層</li>

   </ul>

  </li>

  <li>>子階層(部門)

   <ul>

    <li>>孫階層</li>

    <li>>孫階層</li>

    <li>>孫階層</li>
   </ul>

  </li>

 </ul>

</li>

</ul>



CSS


.construction{

list-style-type: none;

}

.construction ul {

margin: 0;

padding: 0;

list-style-type: none;

}

.construction ul {

position: relative;

margin-left: 15px;
}

.construction ul:before {

content: "";

display: block;

position: absolute;

top: 0;

bottom: 0;

left: 0;

width: 0;

border-left: 1px solid red;

}

.construction ul li {

position: relative;

margin: 0;

padding: 7px15px;

}

.construction ul li:before {

content: "";

display: block;

position: absolute;

top: 15px;

left: 0;

width: 15px;

height: 0;

border-top: 1px solid blue;

}

.construction ul li:last-child:before {

top: 15px;

bottom: 0;

height: auto;

background-color: #fff;

}


となります。


これらを実行すると、


親階層


というのが作られ、親階層の下に子階層が表示され、階層の下に階層が3つ階層別に表示されるようになっています。


以上が他階層メニューのコードの書き方です。


【著者】

石井雅人

こんにちは、駆け出しのプログラマーの石井雅人です。 まだまだ未熟者ですが一緒に頑張っていきましょう! 趣味はアニメや声優・それらのライブに行くことです。

編集した記事一覧

正社員/フリーランスの方でこのようなお悩みありませんか?

  • 自分に合う案件を定期的に紹介してもらいたい
  • 週2、リモートワークなど自由な働き方をしてみたい
  • 面倒な案件探し・契約周りは任せて仕事に集中したい

そのような方はぜひ、Workteriaサイトをご利用ください!

  • 定期的にご本人に合う高額案件を紹介

  • リモートワークなど自由な働き方ができる案件多数

  • 専属エージェントが契約や請求をトータルサポート

よく読まれている記事
【HTML/CSS】divタグの使い方

【HTML/CSS】divタグの使い方

こんにちは。駆け出しプログラマーの松下です!HTMLで頻繁に見かけるdivタグとはどんなものかを紹介します。HTMLを学び始めたばかりという方の参考になれば幸いです!divとはdivタグはそれ自身は特に意味を持っていませんが、構造上必要なひとかたまりを示します。例えば、下記のように文字の色を赤にしたいときに、CSSでとを別々に赤色と指定するのは面倒です。HTMLファイル赤い果物 りんご CSS

【HTML】リンクタグについて

【HTML】リンクタグについて

こんにちは。駆け出しエンジニアの竹前です。ここでは、HTMLのリンクタグについて説明します。HTMLについて勉強している方の参考になれば幸いです。リンクタグとはリンクタグとは、HTMLの閲覧中のページから、別のページに遷移させるときに使うタグ(~タグ)のことをいいます。このタグを使うことによって、文字列や画像にリンクを設定することができます。タグとタグの違いHTMLにはタグというものがあります。タ

【HTML/CSS】リストについて

【HTML/CSS】リストについて

こんにちは。駆け出しプログラマーの松下です!リストを作成するol、ulタグを紹介します。HTMLを学び始めたばかりという方の参考になれば幸いです!リストをつくるHTMLで箇条書きを行うには ol、ul、liタグを使用します。このタグによりただの言葉のあつまりでなく、ひとつのまとまりをもったリストであるということをコンピューターに伝えることができます。ol、ulタグでリストを作成し、その項目にliタ