【プログラミング独学2日目】header/footerタグ・sectionタグ・ul/liタグ・aタグ・divタグ・CSS・margin
こんにちは、歯科衛生士・ママライターのミホです。以前から独学でWordPressを使ったサイト制作は行なってきたのですが、改めてプログラミングをしっかり学ぼうと思い昨日から学習を始めました。その記録や学習してわからなかったことなどをアウトプットしていきます。
なお私の今までの経歴は、以下で簡単に説明しています。元々医療従事者なのでわりと特殊な経歴かと思います。
https://chanmk.tokyo/programming_1/そして今後の目標は以下の通り。忘れないためにも毎日書き留めておこうと思います。
- プログラミング案件も受注できるようになりたい
- 歯科衛生士エンジニアを目指したい
- コーディングもライティングもできる歯科衛生士
【プログラミング独学1日目】学んだこと
今日はHTMLの続きからCSSの途中まで学びました。他の仕事や育児の隙間時間を見て学んだので、時間は2時間ほどしか取れませんでしたが、昨日よりは学んだ量が多かったように思います。そして継続するためにも、コンパクトなA5サイズの専用ノートを購入しました。形から入るタイプです。
HTML内コメント（メモ書き）
HTMLが長くなってくると、見返したときに見づらかったり他人にデータを渡すときにわかりにくかったりします。そのようなときに使えるのが「コメント」です。いわゆるメモ書きですね。HTML内でコメントを書きたいときは以下のように記述します。
<!--（コメント）->「（コメント）」の部分にコメントを書きます。上記のように囲えばコメント部分はサイトに表示されません。ただソース表示などブラウザの機能を使用すると見えてしまうため、機密情報や知られたくない情報などは記載しないようにしましょう。
<header>・<footer>タグ
<header>タグには、サイト上部に表示する要素を入れます。例えばサイトタイトルやサイトのトップ画像など。逆に<footer>タグには、サイト下部に表示する要素を入れます。例えばコピーライト表示などです。<header>タグや<footer>タグは、1つのサイトの中に複数書くこともあります。
<header>タグと<head>タグは混同されやすいですが、以下のように明確な違いがあります。<head>タグは昨日習った内容です。
- <header>タグ：<body>タグ内に記述するもので、サイト上部に表示する要素を示すもの。
- <head>タグ：サイト（文書）全体に対する情報を示すもの。
<section>タグ
<section>タグはさまざまな場面で使える便利なもの。例えば以下のように書かれたHTMLがあるとします。
<h1>太郎のポートフォリオサイト</h1>
<p>太郎のポートフォリオサイトです。</p>
<h2>ポートフォリオ①</h2>
<p>ポートフォリオ①の説明文です。</p>
<h2>ポートフォリオ②</h2>
<p>ポートフォリオ②の説明文です。</p>もちろんこのままでも問題ありませんが、<section>タグを使うと以下のように書き換えることができます（太字部分が追加・変化した部分です）。
<h1>太郎のポートフォリオサイト</h1>
<p>太郎のポートフォリオサイトです。</p>
<section>
<h1>ポートフォリオ①</h1>
<p>ポートフォリオ①の説明文です。</p>
<h1>ポートフォリオ②</h1>
<p>ポートフォリオ②の説明文です。</p>
</section><section>タグを追加することで、同じ枠内にいたHTMLたちを区分けできるようなイメージです。そのため元々<h2>として存在していたものたちも、新しくできた枠の中で<h1>へと変化させることができます。
<ul>・<li>タグ
<ul>タグの「ul」はunordered-listの頭文字を取ったもので、テキストを箇条書きしたいときに使うタグです。<li>タグと併せて使用し、箇条書きに記載したいテキストを<li>へ書いていきます。例えば以下のようなHTMLになります。
<ul>
<li>ポートフォリオ①</li>
<li>ポートフォリオ②</li>
<li>ポートフォリオ③</li>
</ul><a>タグ
<a>タグはリンクを表示させるためのHTMLです。href属性を併せて使うことでリンク先の指定をします。例えば以下のようなHTMLになります。
<a href="（リンク先のURL）">上記のままだとそのタブ内でリンク先へ遷移し、リンク先のサイトが表示されます。もしリンク先を別タブで開きたい場合は、以下のようなHTMLになります。
<a href="（リンク先のURL）" target="_blank">また画像にリンクを貼りたいときは、すでに記述している画像のHTML（「<img src="taro.png">」など）全体を<a></a>で囲めばOKです。
<div>タグ
サイト全体のデザインやレイアウトを整えるためには、<div>タグを使用します。レイアウトを整えたいHTML部分を全体的に<div>タグで囲います。例えば以下のようなHTMLになります。
<div>
<ul>
<li>ポートフォリオ①</li>
<li>ポートフォリオ②</li>
<li>ポートフォリオ③</li>
</ul>
</div>サイトを作っていく上で、デザインやレイアウトを整えたい部分は多く出てきますよね。今は1カ所しか思い浮かばなくても、後々いくつか出てくる可能性が高いです。しかし<div>タグが1種類しかないと、<div>タグで囲まれた部分はすべて同じデザインが適用されてしまいます。
そこで以下のようなHTMLにし、<div>タグの種類によってさまざまなレイアウトを指定できるようにしておきます。
<div class="container">「container」の部分（＝クラス名）は自分で好きな名前にしてOKです。このクラス名の部分を何種類か作り使い分けることで、同じ<div>でもさまざまなデザイン・レイアウトを指定することができます。
なお詳細なデザインはCSSで調整していきますが、上記のようなHTMLを記載しておけば、CSS側では先頭に「.」を書き以下のように記述するだけで中身の指定ができます。
.container {
}MDN
MDNとは、HTMLやCSSなどプログラミング言語に関する知識や情報をまとめた開発者のためのサイトです。昨日私が疑問に感じていた、「どのタグにどの属性を付けられるか」といったこともこのサイトを見れば解決します（昨日時点ではこのサイトの存在を知りませんでした）。
プログラミング言語に関する情報を調べるときにはもっとも信頼できるサイトなので、わからないことがあったらMDNを見るようにしましょう。
CSS
HTMLの学習が終了したので、次にCSSの学習に入っていきます。まずサイト全体の情報を示す<head>タグの中に、<style>タグを入れてCSSの記述をしていきます。
例えばCSSを使って以下のように記述し、フォントの色を赤色にしてみます。
<head>
<style>
h1 {
color : red ;
}
</style>
<head>上記の太字の部分がCSSと呼ばれる部分です。なおCSSの記述のうち、大枠を「セレクタ」、中に書かれた部分を「プロパティ」と呼びます。上記の場合「h1 { }」がセレクタ、「color : red ;」がプロパティです。
なおCSSは上記のように1つ1つ記載する方法もありますが、デザインやレイアウトを調整していくうちにCSSの記述が増えわかりにくくなっていきます。そのためCSS専用の別ページを作り管理する方法もあります。例えば「stylesheet」というCSS専用のページを作り、それが「css」というフォルダ内の「styles」というファイルなのであれば、以下のように記述します。
<link rel="stylesheet" href="css/styles">こうすることでstylesheetに書いたCSSが随時読み込まれ、デザインやレイアウトに反映してくれます。
デベロッパーツール
Google Chromeにはデベロッパーツール（＝開発者用ツール）があります。デベロッパーツールを開くことでサイトのHTMLやCSSを確認することができデザインやレイアウトの調整をしたいときに便利です。Google Chromeでデベロッパーツールを開くには、ブラウザ右上のメニューか、HTMLなどを知りたい部分にマウスポインタを置き右クリック→「検証」で開くことができます。
デベロッパーツールで知れることは数多くあるのでここでは省略します。
colorプロパティ
colorプロパティを使って、文字や背景などの色を指定することができます。赤か青、緑などといった主要な色であれば、単純に以下のように記述することで反映させることができます。例えばh1のテキストを赤色にしたい場合です。
h1 {
color : red;
}主要な色以外の場合も、「rgb」というプロパティで色指定することもできます。「rgb」とはred・green・blueの頭文字を取ったもので、それぞれ0〜255の数字で表現します。例えば先ほどと同じようにh1を赤色にしたいときは以下のようなCSSになります。
h1を緑色にしたいときはgの数値（真ん中）を255にし、他を0にします。また青色にしたいときはbの数値（右端）を255にし、他を0にします。すべてを255にすると黒色、全てを0にすると白色になります。
この他にも、16進数で色を指定する方法もあります。16進数では255＝#ff、0＝#00と表現します。つまり赤色であるrgb(255 , 0 , 0)は、3つの値を16進数化してつなげて「#ff0000」となります。なおffや00など、同じ数値が続く場合は省略することができ、#ff0000は「#f00」と記述することもできます。
CSS内コメント（メモ書き）
HTML内でサイトには表示されないコメント（メモ書き）ができますが、CSSでも同様のことができます。CSSでのコメントは以下のように記載します。
/*（コメント）*/font-family
font-familyとは、サイトに表示するフォントを指定するためのCSSです。例えば「Verdana」というフォントで表示したい、もしVerdanaで表示できないブラウザの場合はゴシック体で表示してほしいという場合は、以下のようなCSSになります。
body {
font-family : Verdana , san-serif
}headerセレクタ
headerセレクタは、ヘッダー部分（サイトの上部）のデザインやレイアウトを調整したいときに使用するものです。
marginプロパティ
ボックスで構成されるデザインやレイアウトは、「padding」「border」「margin」などといった要素を使って余白や色の調整などを行います。
例えば周囲の余白を無くしたい場合は以下のようなCSSになります（現在の余白の原因がmarginにある場合）。
body {
margin-top : 0px ;
margin-bottom : 0px ;
margin-left : 0px ;
margin-right : 0px ;
}なお上記のように全て0pxなど同じ値であるときは、以下のように省略して書くこともできます。
body {
margin : 0px ;
}また「0px」の場合は「px」を記載しないことも多く、以下のように書いてもOKです。
body {
margin : 0 ;
}
【プログラミング独学2日目】わからなかったこと・調べてわかったこと
今日の学習時間は2時間ほどでしたが、昨日に比べて学びが多かったです。プログラミングを学ぶ時間よりも、このブログにまとめる方が時間がかかっています・・・。本末転倒のようにも感じますが、アウトプットすることで身に付く部分も多いと思うので可能な限り続けます。後から見直しもしやすいし、誰かの参考になるかもしれないし。
なお今日心に刺さったのは「慣れるまでは細かい部分は気にしすぎず、どんどん実践してサイト作って経験積んでいくことが大切」という言葉です。私は細かい部分を気にしすぎて前に進めない性格なので、肝に命じようと思いました。
ひとまず今日学んで疑問が残った部分は以下です。
- <section>タグの使い方
- <ul>は単体で使えないのか
- HTMLとCSSの使い分け
<section>タグの使い方
いまいちどのような場面で用いるのか・・・。ただ以下のような記述を見つけたので少しすっきりしました。
セクションは意味的なひとまとまりなので、その部分の意味を表す見出しを付けることができるはずです。 見出しを付けることができない場合には、その部分を<section>～</section>で囲むのは適切ではないかもしれません。 もし、<section>タグを使用するべきかどうか迷った際には、その部分に見出しを付けることができるかを考えてみると、 セクションとしてふさわしいかどうか判断しやすくなるでしょう。
また、セクションは意味や機能のまとまりであるため、<section>をレイアウト目的の単なるコンテナとして用いるべきではありません。 そうした目的には<div>の使用が推奨されています。
<ul>は単体で使えないのか
今までタグの中には属性しか入ってこなかったので、<ul>とセットになるのが<li>という、属性というよりタグの形をしているので疑問に感じました。2つのタグが並ぶように見えて、しかも別々ではなく内包している・・・。<ul>は単体で使えないのか？必ず<li>とセットになるのか？<ul>あるいは<li>を単体で使うとどうなるのか？と思いました。
おそらく単体では使えないのでしょうが、時間のあるときにでも単体で記述するとどうなるのか試してみたいと思います。
HTMLとCSSの使い分け
HTMLでも文字色の指定はできるけど、CSSでもできる・・・、HTMLとCSSの使い分けはどこから？むしろHTMLだけじゃサイトデザインはできないの？と疑問に感じました。調べると以下のような記載がありすっきりしました。
HTMLは文章の構造を作り、CSSは「どんな装飾をするのか」「その装飾の色やサイズは何か」を指定します。CSSが存在しなかった頃はHTMLで文字色や大きさなどを変えていました。しかしそれではコードが長くなってしまって編集や修正もしにくくなってしまいます。そこで構造とデザインを分けるために生まれたのがCSSです。