HTMLとCSSでツリー構造を作る方法を現役デザイナーが解説【初心者向け】
初心者向けにHTMLとCSSでツリー構造を作る方法について解説しています。ここではHTMLのul要素、li要素とCSSのborderプロパティを使った表現方法を紹介します。基本の書き方と画面上での見え方を確認しましょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
HTMLとCSSでツリー構造を作る方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。
なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。
今回は、HTMLに関する内容だね！
どういう内容でしょうか？
HTMLとCSSでツリー構造を作る方法について詳しく説明していくね！
お願いします！
HTMLで構造を作ろう
HTMLで階層構造となっているコードを記述する場合にはul要素とli要素を使って実現していきます。階層となる構造にする場合にはli要素を入れ子にして記述していくことで複雑な階層も可能となります。
ul要素は入れ子にする場合に直下にli要素しか入れることが出来ませんが、li要素はその直下にいろいろな要素を入れ子とすることが出来るので、li要素の中にul要素を記述した入れ子状態にすることも可能となります。
そしてHTMLを記述するときに必要なことはインデントを合わせることです。
所属している会社やプロジェクのトルールによってインデントの有無などが決まっている場合もありますが複雑な階層構造にする場合には、HTMLファイルのli要素はインデントを合わせて記述し、その階層ごとにコードを綺麗に書くことで間違いのない階層構造を記述できるようになります。
CSSで線を引いて装飾しよう
CSSで線を引くためにはborder要素を使います。値をsolidとすることで実戦で引くことでき、コンテンツに対する上下左右の位置に直線を引いていきます。
これらをコンテンツの擬似要素として配置しCSSで調整することでコンテンツの文字の長さなどにも対応した線を引くことができるようになります。
テキストなどのコンテンツの左側に縦線を引く場合はborder-leftとして記述します。テキストなどのコンテンツの左側に横線を引く場合にはborder-topとして、まず上側に横線を配置します。
この線をコンテンツの中心の高さまで下げた位置にし、paddingで線の幅の分だけスペースを空けることでコンテンツが右側に移動し、コンテンツの左側に線を引いたようになります。
そして擬似要素の最後の要素に背景色と同じ色で重ねることで中途半端にしたに伸びる縦線を消すことができます。
サイトマップや組織図への応用を試そう
（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-top: 1rem; */
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;
/* padding: 0; */
}
.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;
}
分かりやすいように縦線を赤色、横線を青色にしています。
監修してくれたメンター
| 木村勇土
TechAcademyの現役メンター。 現在は行政書士事務所を運営しており、お客様にはプログラマーやフリーランサーも多い。WordPressを中心とした自社のWebサイトの修正などを行なっている。 |
内容分かりやすくて良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。
また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
