前HTMLのheadとbodyの考えは前回の記事でわかった!
『【超初心者のHTMLのコツ】HTMLは人間を宇宙人に説明することと同じ』
はやく文字とか表示したい!
【前回の授業】
[blogcard url=”https://kotsukalab.com/web/516”]そうだね、bodyの中の基本タグで文字を表示してみよう!
まずは表示する練習してみよう。
はやくはやく!
bodyタグの中がブラウザに表示する部分
コッツ!
IT コツカラボです。
bodyというところにHTML言語を書くとブラウザに表示するんです。
まず文章の基本をやってみましょう!
【悩み】 bodyの中はただ文字を打てばいいのかルールがあるのか?
いえいえ。
ルールあります。
ブログをはじめる時はなんでもいいから書くといい日記のようになんでも書けばいい・・・
よく聞きますが
自己満足の中ではいいんですけど
googleの検索エンジンはなんか文字が並んでいるなと
【解決のコツ】小説の章のように記述してみよう。
ではこの記事のCodePenを使って作ってみよう
これから自分のサイトを作るぞって想定でやっていこうか
じゃあ、Webサイトの作り方を教える「コツカラボ」というホームページを作る前提でやってみる
See the Pen 文字だけ by ITコツから研究所 コツカラボ (@kotsukalab) on CodePen.
おお初めてのHTMLを打ったぞ!
あれ? 改行しているのにそのまま続いているし
メリハリないな
それをタグで意味づけするんだ英語でマークアップというんだ。ではやってみよう!
h1タグ <h1>〜</h1>
小説の目次をみると大見出し(一番大きい見出し)があって
その下の階層に中見出し(二番大きい見出し)があって、更に小見出し(三番大きい見出し)がありますね。
これが見出しタグです。
それがh1,h2,h3,h4・・・とマークアップします。
では実際にやってみましょう。
See the Pen h1,h2などの見出し by ITコツから研究所 コツカラボ (@kotsukalab) on CodePen.
おっ!見出しは太くなって改行してデザインよくなった!
マークアップはあくまで意味づけ。デザインは後ほど出てくるcssという指定でものすごくかっこよくなるから、今はどこが見出し1とか見出し2とかを考えよう。
h1が大見出しでその下の階層がh2で指定しました。
あくまで意味づけマークアップです。
デザイン性多少ありますが、cssというスタイリストさんがいますのでお楽しみに。ではもうちょうっとHTMLタグをやってみましょう。
pタグ <p>〜</p>
小説などで文章のひとかたまりを第1章とか第2章とかありますね。
それを英語でParagraphと言います。そのPです。
brタグ <br>
文章を打ち込んだ時改行したのに結果に反映しませんでしたね。
ここで改行しますっていう改行タグ<br>を指定して初めて改行します。
今まで開始タグと終了タグというものがありました。
<なんとか>〜</なんとか>
今回の改行タグは終了タグがなく
<br>だけです。
何個か終了タグがないものもあります。
ではこの部分を設定しましょう。
See the Pen pタグとbrタグ by ITコツから研究所 コツカラボ (@kotsukalab) on CodePen.
ulタグ <ul>〜</ul>
liタグ <li>〜</li>
ulタグとliタグで箇条書きのリストを作ります。
ulタグを使ってリストで表示したい範囲を指定して、
liタグを使ってリストを作ります。
ではこの部分を
|
1 |
アイ吉の紹介 テイ吉の紹介 ぼくたちの夢 |
指定しましょう。
See the Pen ulタグ liタグ by ITコツから研究所 コツカラボ (@kotsukalab) on CodePen.
中丸がつきましたがこれもcssでデザインできます。
まだまだタグはいっぱいあって
ひとつひとつ丁寧に覚えればサイトも作れるようになります。
一番最初は自転車初めて乗る時と同じように
慣れるのが大事です。
転びながらも少しずつがんばりましょう!
body内の基礎でした。
