【第７回】知識ゼロの大学生2人が擬似ウェブサイト作ってみた。

2023年11月25日 17:32

前回までに、ホームページに文字・画像・リンクを表示させた。

今回は箇条書きでリストを作っていこうと思う。

箇条書き

箇条書きの基本形式は、ulタグまたはolタグと、liタグを組み合わせて作る。
ul or olタグの中にいくつかの項目をひとつずつliタグで書いていく。

うーーん言葉での説明が難しいので実際にコードを書くことにする。

ulは「unordered list」の略である。つまりは「順番のないリスト」。とりあえず並べるときなんかはこれを使う。
なにか箇条書きにすることないかなと思ったけど思いつかないのでお茶の名前でも5個くらい書いておく。unorderedで書いたけどAriは玄米茶しか勝たん勢。

<ul>
    <li>玄米茶</li>
    <li>緑茶</li>
    <li>烏龍茶</li>
    <li>ジャスミン茶</li>
   　　<li>お〜いお茶</li>
</ul>

これを表示させてみる。

こんな感じで、項目の中身だけ書けば勝手に黒ポチをつけてくれる。

ちなみに基本的にデザイン変更はCSSで行うが、ulタグの場合は開始タグ内に「type属性」を使うことでポチを黒丸、白丸、黒四角に変更できる。
あまり使わないかなあという勝手な想像でサラッと触れるくらいにしておく。

<ul type="circle">
    <li>玄米茶</li>
    <li>緑茶</li>
    <li>烏龍茶</li>
    <li>ジャスミン茶</li>
   　　<li>お〜いお茶</li>
</ul>

この方がシンプルというか軽い感じで可愛いホームページができそうな気はする。

<ul type="square">
    <li>玄米茶</li>
    <li>緑茶</li>
    <li>烏龍茶</li>
    <li>ジャスミン茶</li>
   　　<li>お〜いお茶</li>
</ul>

ちなみに黒丸は「disk」を指定してもいいが、何も書かなかった時と変わらなかったので割愛。

基本的にHTMLは簡潔にして、CSSでもできることはそっちを使え、というスタンスっぽいので参考までに。

olは「ordered list」の略で、ulタグと異なり順番がある項目の箇条書きに使う。
今度は料理の作り方でも書いてみる。ただAriは壊滅的に料理ができないので想像でざっくり書くのを許してほしい。

今回は先に表示させた画面を載せてみる。

コードは以下の通りである。

<p>カレーの作り方</p>
<ol>
  　　 <li>材料を切る</li>
    <li>材料を炒める</li>
    <li>水を入れる</li>
    <li>ルーを入れる</li>
    <li>煮込む</li>
</ol>

「カレーの作り方」は箇条書きの項目ではないので、外にpタグで書いてみた。
olタグでは勝手に数字を振ってくれているのがわかる。

noteにも箇条書き機能がついているが、それと同じで、箇条書きの中に別の箇条書きを入れることも可能。

正確に言ったら箇条書きではないが、同じ”リスト”ではあるということで取り上げるのが「dlタグ」である。
これは「definition list」の略で、定義リストを表す。定義する言葉とその説明を両方記述するので、liタグに相当するものが2つある。

例えば「MAKE MORE :AriとSivの愉快な日常」のように、なにか言葉の説明をする時に使う。
定義する用語（MAKE MORE）を「dtタグ」（Definition Termの略）で、用語の説明（:以下）を「ddタグ」（Definition Descriptionの略）で表す。

実際にコードを書いてみると次のようになる。

<dl>
    <dt>MAKE MORE</dt>
    <dd>AriとSivの愉快な日常</dd>
    <dt>Ari</dt>
    <dd>アホ</dd>
</dl>

そしてこれを表示してみる。

このようにddタグの中身は少し段落が下がる。ノートを取るときのように、どこが言葉の説明なのかが分かりやすくなったのではないだろうか。

今回は箇条書きについて1700字も書いたわけだが、一体ホームページのどこに使ったらいいのかがわからない。
今後「navタグ」という〇〇なお客様はこちら、的な案内を作る時には使えそうなので、その時にまた思い出していただけたら幸いです。

この記事が気に入ったらサポートをしてみませんか？