プログラミング

【プログラミング独学】HTML&CSS 5日目、リスト、インデント

プログラミング学習(HTML&CSS)をProgateで学習した内容を記録したものです

 

Progateでの学習と自分でリサーチしてわかったことをメモしています

 

今回はProgate演習5をやりました

 

 

リスト

<li> </li> タグで囲むことで箇条書きのようなリストを作れる

 

【例】

<ul>

<li>HTML</li>

<li>PHP</li>

<li>Ruby</li> 

</UL>

と入力すると

 

・HTML

・PHP

・Ruby

と表示される

 

それと

<ul>要素で囲むとリストの先頭に黒点が表示される

<ol>要素で囲むとリストの先頭に数字が連番で表示される

 

要素を要素で囲むことを入れ子という

 

囲む方の要素を親要素

囲まれる方の要素を子要素という

 

 

インデント

入れ子構造の要素は、インデント(字下げ)をする

 

これをやることで、見やすくなる

 

行の先頭でTabキーを押すだけ

 

 

悪い例

<ul> <li>HTML</li>

<li>PHP</li>

<li>Ruby</li> 

</UL>

インデントされていなくて見にくい

 

 

良い例

<ul>

<li>HTML</li>

<li>PHP</li>

<li>Ruby</li> 

</UL>

インデントされている、見やすい

  

 

まとめ:今日分かったこと

 

リストタグ<li> </li>で箇条書きのようなリストが作れる

 

<ul>で先頭に・がつく

<ol>で先頭に1~連番がつく

 

入れ子構造の時は親子関係を見やすくするためにインデントする

 

 

少しずつプログラミングっぽくなってきました

 

入れ子?要素?なんのこっちゃって感じですが笑

 

「習うより慣れろ!の精神でぶつかっていきます

 

 

学習おわり

ブログランキングに参加中です。

応援よろしくお願いします。

ブログランキング・にほんブログ村へにほんブログ村

人気ブログランキング

書いた人
 
33歳2児のパパ
長野の会社員です

趣味はテニス、ゲーム、漫画
アニメ、カラオケ、ネットなど

ブログ内容は育児、趣味、雑学、雑記

ブログネタなどを発信中


詳しいプロフィールはこちら


話が合いそうと思ったら
気軽にフォローお願いします



COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA