HTML & CSS の基礎を解説。見出し、段落、リンク、画像、リスト作成まで。

CSS HTML プログラミング

daiki

こんにちは、daikiです。

今回は、HTML & CSS の基礎を解説します。
見出し、段落、リンク、画像、リスト作成などです。

学んだことを忘れないようにアウトプット。
ついでにこれを見てもらった人の役に立てればと思います。

では、さっそく進めましょう。

HTML & CSS の基礎中の基礎。
5つを解説します。

見出し、段落、リンク、画像、リスト

この記事のタイトルにも書いていましたね。
こちらを深堀です😌

HTML & CSS の基礎を解説します


こちらですね↓

  • 見出し
  • 段落
  • リンク
  • 画像
  • リスト

上から順に解説します。

見出し

HTML & CSS で一番始めに学ぶものです。

<h1></h1>

これですね↑
※h はheading(見出し)の略。

見たことがある方もいるかもしれません。

サイトのタイトルや見出し部分に使われているものですね。
あの数字部分を変えると、見出しの大きさを変化させることができます。

実際にやってみます。

<h1>daikiblog</h1>

こちらを表示させると、

※この画像は Progate から引用しています。以下略。

文字が大きいのがわかりますかね?
少し分かりづらそうなので、もう一つ書いてみます。

<h1>daikiblog</h1>
<h2>daikiblog</h2>
<h3>daikiblog</h3>
<h4>daikiblog</h4>
<h5>daikiblog</h5>
<h6>daikiblog</h6>

こちらを表示させます。

こんな感じで文字の大きさが変化します。
これが h1 の仕様ですね。

段落

次は段落です。

段落は p を用います。
※ p はparagraph(段落)の略。

<p></p>

先ほどの h1 と書き方は同じですね。
では実際に書いてみます。

<h1>daikiblog</h1>
<p>こんにちはdaikiです</p>

こちらを表示。

h1 の「daikiblog」の下に文章が追加されました。
これが p の仕様です。

少し分かりづらいので補足します。

p は上に指定してあるタグに対して、接続(指定してあるタグの下に)表示される。

こういう風なイメージを持ってもらえたら、分かりやすいかと。
今回の場合だと h1 の下に表示させています。

p については、ここで詳しく書いても分かりづらいので、頭の隅にでも置いといてください。

いずれ分かります。

あ、因みに「タグ」は、<h1>とか<p>のコード自体が「タグ」と言います。
「タグ付け」とか呼ばれますね。

リンク

次はリンクについて解説です。
リンクって分かりますよね?

daikiblog

↑これですね。
このリンクをクリックすると、指定のサイトに飛ぶという仕様。

リンクは「a」と「href」を使います。

<a href = "url"></a>

公式はこんな感じですね。
a の後に href を書き = と “”(ダブルクォーテーション)を書きます。

この “” の中にサイトの url を貼り付けて使用します。
少し難しいですかね?

やってみると簡単ですよ。
実際に書いていきます。

<a href = "https://daikiblog.site/">daikiblog</a>

こちらを表示させる。

こういう感じでリンクが貼られています。

画像

どんどん進めましょう。
次は画像についてです。

画像の貼り付けは「img」と「src」を使います。

<img src = "url">

やり方は、先ほどのリンクとほぼ同じです。
単語が変わったぐらいですね。

実際に書いてみます。

<img src = "https://prog-8.com/images/html/beginner/wanko.jpg">

こちらを表示。

※Progate から引用しています。以下略

という感じですね。

どうでしょう。
簡単ですか?

リスト

多く学んでも大変なので、最後にしましょう😌
最後はリストについて。

リストってわかりますかね?

・a
・b
・c

ちょっと地味ですね。
装飾を加えてみます。

  • a
  • b
  • c

これの方が分かりやすいですね。
でも、今回は簡単な方にしましょう。

少しややこしいので(^^;

リストは「ul」と「li」を用います。

<ul>
	<li></li>
	<li></li>
	<li></li>
</ul>

公式はこちら↑
では実際に書いてみます。

<ul>
	<li>名前 daiki;</li>
	<li>性別 男性</li>
	<li>年齢 26歳</li>
</ul>

※補足: li は改行して上のように空白をあけること。

こちらを表示させます。

リスト化されていますね。

まとめ


以上が HTML & CSS の基礎でした。
簡単だったと思います。

一様復習しましょう。

  • 見出し➔ h1,h2 など
  • 段落➔ p を用いる
  • リンク➔ a href = “url”
  • 画像➔ img src = “url”
  • リスト➔ ul と li

簡単にまとめるとこんな感じですね。

詰め込みすぎると大変なので、今日はここまで。
お疲れさまでした😌