HTML+CSSの備忘録①
TL;dr
・HTML+CSSの勉強をはじめた。
・Progateの初級相当の内容
はじめに
フロントエンドから逃げるな
フロントエンドと書くとHTMLはmarkup言語だよ、って言われますが正直黙っててください。 教えていただけるのはありがたいですが、まだ学び始めなのに否定されるとやる気失うので(そんなのでやる気失ったら〜とか言われても知らん)。 流石に仕事で使うとかなら違いがわからないといけませんが、少なくともこれから勉強するって人にとってはそこは重要ではないので黙っててわからないところを教えてあげてください。モヤモヤするのはわかるけど。
インライン要素とブロックレベル要素
ブロックライン要素
見出し・段落など、文書を構成する要素でブロックとして認識される。 ブロックライン要素はインライン要素を囲むことはできる。 大体のブラウザでは前後に改行が入る。
Ex. <div>,<h1>~<h6>,<p>など
インライン要素
ブロックライン要素の内容として扱われる。例えば<div>要素の中に<a>要素を入れたりする。この<a>要素がインライン要素になる。
インライン要素はブロックライン要素を囲むことはできない。
また、前後に改行が入らない。
Ex, <a>,<img>,<span>など
タグ
テキストに"タグ"と呼ばれるもので囲む。囲むことによってテキストに各要素が適用される。 例えば、
<b><h1> こんにちは </h1></b>
があったとしたら
<h1>は開始タグ、</h1>は終了タグと言う。
また、終了タグのときは/をつける。
各要素
<h1>~<h6>
セクションの見出しを指定するタグ。 h1が最上位でh6が最下位となる。
Ex.
<h1>h1です</h1> <h2>h2です</h2> <h3>h3です</h3> <h4>h4です</h4> <h5>h5です</h5> <h6>h6です</h6>
とすると
h1です
h2です
h3です
h4です
h5です
h6です
となる。(このブログにはテーマを適用しているので変に表示されているが、問題ない。)
<p>
段落を指定するタグ。pは"Paragraph"の略のこと。
pで囲まれた部分は１つの段落と表せる。
また、ブロックライン要素なので改行がはいる。もし、ただの改行をしたい場合は<br>を使う。
Ex.
<p>こんにちは。お元気ですか。</p> <p>最近、誕生日を迎えました。</p>
とすると
こんにちは。お元気ですか。
最近、誕生日を迎えました。
と表示される。
<a>
別のウェブサイトやファイル、同一ページ内に移動するタグ。 aの開始タグにhref(hypertext reference)を入れること。 インライン要素なので改行が入らない。
Ex.
＜a href = "https://twitter.com/PotyaExe">Twitter</a>
とすると
と表示される。
<img>
文書に画像を埋め込めるタグ。
開始タグのみとなっている。
imgタグの中にはsrcと<b><span style="color: #1464b3">altがある。
srcは画像のパスで記述は必須。
altは画像のテキストによる説明で必須ではないがあったほうが良い。
理由として、もしなんらかの理由で画像が表示されなかったときにaltの内容が表示されるから。
Ex.
<img src="/home/image"alt="potyamaの画像">
とすると
となります。
今回、srcは存在しない画像のパスを指定しているのでaltの内容が表示されています。
<li>
リストの項目を表すためのタグ
liタグを<ul>,<ol>で囲む必要がある。
ul.olの説明は次に行う。
Ex.
<ul>
<li>らあめん</li>
<li>うどん</li>
</ul>
とすると
- らあめん
- うどん
と表示される。(ulで囲んでいるので順序なしリストになっている。)
<<ul>,<ol>
<ul>は順序なしリストを表すタグ。
ulで囲むとliの説明で使用した表示になる。
<ol>は順序付きリストを表すタグ。
上から1,2と表示される。
Ex.
<ol>
<li>らあめん</li>
<li>うどん</li>
</ol>
とすると
- らあめん
- うどん
と表示される。
最後に
何か追加することがあったら追加していきます。 間違いがあったら連絡お願いします。 それでは。
