どうも、怠惰プログラマーちゃんです。
Webシステムの学習を始めようと、まずVue.jsのテキストを買ってみたわけですよ。
一応私もプログラマーの端くれ、いきなりフレームワーク学習に行っても問題ないだろうと思っていたのですが。。。
（あれ、私てHTMLって書けたっけ。。。？）
仕事ではそれっぽいのをたまに書いていますが、（jspというHTMLの中にjavaを埋め込ましたやつをつかっています）正直コピペ多用が常習化していて、
いざ”一”から書けるかと問われると、、、
無理でしたね（笑）
多分私と同じようなコピラーで”一”からソースを書けないっていう人多いんじゃないですか！？！？（いてくれ。。。）
どうせ新しいこと勉強するなら、基本からやってやらぁ！ということでHTML学習はじめましたので備忘録を残します！
HTML/CSSの備忘録の箇条書き！
基本的な文章を書くときに使うタグ
- <h1>：見出し。文章の表題につかう（↑の「HTML/CSSの備忘録の箇条書き」はh2）h1～h6と数字があがるにつれて小さい見出しになる。
- <p>：段落。主に文章はこれで書くらしい！
- <!– *** –>：コメント。***の部分にすきな文章を書く。プログラムに影響はない。
- <a href=”https://itolifehack.family.blog/”>怠惰プログラマーちゃんの日常</a>：リンク。この例だと、「怠惰プログラマーちゃんの日常」という文字をクリックしたらこのブログのトップページに遷移する。
- <img src=”https://*****.jpg”>：画像。srcに画像のパスを書く。
- <ul>：「・」で始まるリスト。リストの要素は<li>。
- <ol>：連番で始まるリスト。リストの要素はやはり<li>
- <div>：要素をグループ化するのに使う。<p>より便利。とりあえずdivっとこうみたいな風潮がわが社にもあるくらい使う。
大きなレイアウトを作る時に使うタグ
- <!DOCTYPE html>：HTMLのバージョンを宣言する。一行目に書く。
- <html>：HTMLソース全体を囲う。
- <head>：Webページの設定などを書く部分。ここの内容は表示されない。
- <body>：上の「基本的な文章を書くときに使うタグ」の中のものを主に使ってWebページのコンテンツを書く部分。
HTMLとCSSの絡み
備忘録といいつつ、HTMLもCSSも知らない人のために、ここで軽く両者の説明をします。
まず、みなさんが普段見ているWebサイトありますよね？そこに表示されている文章や画像などはすべてHTMLによって書かれている内容です。
しかしHTMLだけだと、ただ上から順番に文章や画像が羅列されるだけのさみしい画面になってしまいます。
そこでCSSが働きます。
CSSはHTMLに対してデザインを設定します。例えば上の「HTMLとCSSの絡み」という部分の背景色が水色になってますよね？これはCSSで、”この部分の背景色を水色にする”と設定しているからなんですよね。
とまあ、簡単にHTMLとCSSの関係をお話ししたところで、備忘録！行ってみよう！！
■タグを指定してデザインを設定する
h1 {
color: #d4f2ff; /*文字色を水色に設定。#d4f2ffは色コードのこと。*/
background-color: red; /*背景色を赤色に設定。一部の色は色名を書けばいける*/
font-size: 20px; /*文字のサイズ*/
width: 500px; /*横幅*/
height: 80px; /*高さ*/
}
<h1>とか<p>とか<li>とかのタグに一括でデザインを設定する方法です。
タグの種類を書き、{ }で囲った中でデザインを指定していきます。
上記の例の場合、HTMLに複数の<h1>があった場合、そのすべてにこのデザインが適用されてしまいます。
「同じ種類のタグでも別々のデザインを設定したいんじゃい！」という方はつぎへ！
■要素ごとにデザインを指定する
【HTML】
<h1 class=”title-red”>ここは赤にしたい！</h1>
<h1 class= “title-green”>こっちは緑にする</h1>
【CSS】
.title-red {
color: red;
}
.title-green{
color: green;
}
HTMLのほうをよく見ると、<h1>の中に謎の一文が追加されてますね。
これは”クラス”といって、そのタグにつける名前です。
CSSではこの名前（クラス名）を指定してデザインを設定すれば、同じ種類のタグでもデザインを分けることができるというわけです！
タグを指定してデザインを設定するときは、「h1{ ***}」でしたが、クラス名を指定してデザインを設定するときは「.title-red {***}」のように最初に「.」ドットがいるんです！
。。。
今日はコロナワクチン接種の翌日ってことで特別休暇だったんですが、明日は普通にお仕事がありましてですね。。。で、今00:30なんですよね。。。
まだまだ書き足りないのですが明日の仕事に響くといけないのでこの記事はここで終了（笑）
下書き保存して後日続きを書く、、、っていうの苦手なんですよね。。。
書けるとこまで書いてタイムリミットが終了！次は新しいことを書く！ってするのが私のモチベーション維持テクニックなのですよ！
ではでは！また近いうちに備忘録書くのでよろしくお願いします！
怠惰プログラマーちゃんの日常 
