アマグラミング

プログラミング初心者が勉強したことを復習とメモがてら書いているだけです。

(04) コメント <h>,<br>,<li>,<ul>,<ol>

前回は、<head><body><title><p>、インデント、保存の形式を学び、表示をしてみました。

 

さて、

コメントと、言うものがあるのですが、紹介し忘れていたので、

ここらで説明しておきます。コメントというのは書いても影響を及ばさない

実行されないコードです。

例えばHTMLソース上(要は今まで書いてきたところ)に

メモのような注意書きをしたい場合などがあります。

そういった場合に

<!--  このようなタグで文章を囲うことによってコメントとなります -->

まあ、私も使っていくこともあるでしょう。

 

では

<h>要素を学んでいきましょう。

<h>要素は<h1>~<h6>まであり、1から順に大きい見出しの要素だと思えばいいでしょう。

では書いてみましょう。

 

f:id:tiroru17:20170529062712p:plain

 

というわけで、こんな風に書いてみました。

これを実行してみます

f:id:tiroru17:20170529063105p:plain

 

と、こんなふうになります。

あまり<h5>とか<h6>などは使う機会がないと思いますが。

まあ、ここが見出し!ってところは<h>要素を使っていきましょう。

 

<br>要素もやっていきましょう。

<br>はですね。改行をさせる要素なんですが、HTML5では

終了タグが省略できます。</br>こういうやつね

なので<br>だけでいいんですが、これはHTML5の仕様でして、

XHTMLではできません。

XHTMLについては私は初心者なのでなんともいえませんが、

HTML系統より、厳密で拡張性の高いものらしいです。

ただ、主流なのはHTML5ということのようですね。

というのもXHTMLのバージョンアップ版を主流にしようという動きがあったそうです

が、結局はアップル社など反対があり、HTML5を主流という流れになったようです。

大雑把に言うとそんなことがネット上に書いてはありました。)

 

さて、とりあえずやってみましょう。

<p>
株式会社あああ<br>
東京都千代田区1-2-3<br>
どすこいマンション101号室
</p>

まあこんな感じで書いて表示してみましょう。

 

f:id:tiroru17:20170529071153p:plain

<p>表示できているかな</p>

のあとに上記のコードを書きました。

出来てますね。

 

ただ、こうした文中の改行に使うにはいいですが、

単なる、改行代わりに使うのはおすすめされていません

そういうのは<p>を用いましょう。

 

さて、では次のリストを作る

<li>要素について説明して今回は終わりにしましょう。

 

<li>HTML</li>

<li>CSS</li>

<li>Ruby</li>

とこんな感じですね。

これを表示してみます。

f:id:tiroru17:20170529074504p:plain

ちょっと余分なところを消しましたが、

<li>のところは表現出来ています。

こんな感じになるわけです。

 

<li>要素を囲む<ul>、<ol>要素について

では試しにこの<ul>,<ol>要素を使って<li>要素を囲んで表示させてみましょう。

 

f:id:tiroru17:20170529075624p:plain

これを表示させると

f:id:tiroru17:20170529075710p:plain

こうなるわけです。

 

なんとなくわかりましたか?

 

では今回はこれで。

 

tiroru17proguram.hatenablog.com