フロントエンジニアを目指す話　1話　HTMLから勉強して来い

上官命令：HTMLを一か月以内にマスターしてきて
- 昨日の成果まとめ
  - タグまとめ
  - 属性
- 5/19に勉強したことまとめ

上官命令：HTMLを一か月以内にマスターしてきて

前回とりあえず筆者のスペック説明を軽くしましたが、IT系のエンジニアといってもどれぐらい種類があるのからすら理解していない状態でした。フロントエンジニアがどんなものなのか軽く理解している程度で、我が上官の現役エンジニアによって大まかには理解でるようになりました。

Web系に強いエンジニアになりたいという理由で勉強を始めた訳ですが、そのためにはまずHTMLをマスターして来いと指示が出ましたので、とりあえずHTMLを攻略するために勉強を始めました。HTMLマスター後はCSSをある程度使えつまで勉強して、JS(JavaScript)など動的な開発を学んでいこうという結論になりました。とにかく今回は静的な開発の基本である、HTMLについて学んだことをアウトプットしていこうと思います。動的、静的な開発の違いについても正直まだきちんと理解できていな部分もある。

HTMLはWebサイトの骨みたいなものだということは学びました。HTMLが骨ならCSSは肉です。多分。HTMLは文字や画像をWeb上に表示させるもので、CSSはHTMLで表示させた文字や画像を装飾するために必要な言語という解釈で間違っていないと思う。装飾といったが文字や画像の位置や大きさ、デザインやレイアウトなど全て変更することができるのがCSSだということでWebサイト作成には必須だと理解したので頑張りたい。

ということでどんどんアウトプットしていきたいと思う。

昨日の成果まとめ

HTMLでコーディングするにはまずタグと呼ばれる<>で囲まれたコードを理解し、暗記する必要があると解釈した。CSSや他の言語だと覚えることが多いと師匠に聞いたが、HTMLは一か月でマスターすることができると教えてもらったので、すぐにでもマスターしたい自分はまず暗記することに力を入れる必要がありそうだ。ただコードの役割などは理解しておく必要があるかもしれないが現役エンジニアでも調べながらコーディングしているぐらいだからと励ましの言葉頂いたのであまり根を積めずに継続することを目標に頑張りたい。

タグまとめ

最低限今覚えて忘れないようにしておきたい昨日勉強したタグ達。

<!DOCTYPE html>

一番最初に宣言するようなもの。htmlでコーディングしていますよ的な？深く考えずにそういうものだと思っておく。

<html></html>

これも必要なものだと深く考えずにそういうものだと思っておく。二番目に書くタグで、コードの最後に終了タグを設置する。<html>と</html>の間にコーディングする。

<head></head>

その名前の通りWebサイトの頭脳的なもので目には見えないものでWebサイト上には表示されないものなどここに書く。Webサイトの見えない情報などをすべてここに記す。基本的にGoogle神が見る場所と勝手に解釈。

<head>内に書くべきコード。他にもたくさんあるみたいだが今は保留。

とりあえず今はこれだけいいと思う多分。

何か書いとけばいけないもの。文字のエンコードに必要らしいけど詳しく理解するのは先でいいだろうと解釈。とりあえず必須。

<title>例ぽいぽいぽん</title>

はてなブログなどブログサービスでは自動で出力されるようになっているので気にしなくてもよさそうではある。

<body></body>

訪問者に直接見えるWeb上に表示されるものを書く場所。<body>のタグ内に他のタグなどを使って多くの文字や画像を表示させていく。

<p></p>

今書いているこのような文章を囲っているのが<p>タグです。段落を変えたい時などは一度</p>で閉じます。

<a></a>

画像などにリンクを仕込んで押してもらうことで他のページに飛んでもらったりするときに使用する。こちらの使い方も少し特殊で属性を使用してタグを使う。

<p>

</a>

</p>

このようにすると画像をクリックすることで指定したリンクに飛べる。

<img src~~~~/>※終了タグ無し

imgでは終了タグは必要ありません。画像を貼るために使うタグです。PDFデータや動画などは貼り付けることができません。

使用できる画像データはpng、jpg、gif、svgなどの画像のみですが、gifが使えるので軽いアニメーションは張ることができます。

imgタグは終了タグがないため他とは違った使い方をする。

ファイル名は自分のPC内のものであればファイルの所在地、alt属性で囲っているところは画像が表示されない場合などに代わりに表示する名前を自分で決めて問題なし。iPhoneの画像なら<~alt"iPhoneの画像"/>みたいな感じで良いと思う。SEO対策で習ったので少しだけ知ってた。

文字と同じ扱いなので<p>タグで囲うようにする。必須なのかどうかはわからない。

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

箇条書き

<ol><li></li></ol>

番号付き箇条書き

※<li></li>の数は無制限。<ul><ol>タグの中の<li>タグを増やせばいいだけ。

<br>

改行するために使うやつ。文中などに<br>と書くだけでおｋ。

<id>と<class>

タグに名前を付けることができる。変数的なものかな？

このように書くと<p>タグの名前がpoipoiponになりました。名前は日本語で書くことはできますがエラー吐くそうなので英数字で使用しましょう。名前の先頭は英語じゃないと機能しません。

idとclassの違いは同じ名前を使えるか使えないかです。idは一つの文書で同じ名前は使えません。対してclass名はいくら使っても大丈夫です。

使い分け方はまだ素人なのでよくわかっていません。

<div>と<span>

ある一定の間隔ごとに文章を分けてデザインを変えたい時などに使用する。

<div>は前後に改行が挿入される。<span>は何も起きない。

<span>が使いやすい？

<h1></h1>

見出しを表す(h1~h6まである。h1が一番大きい)

属性

今わかっている属性の使い方とか

<タグ名 src>

imgと合わせて使うやつ

<タグ名 alt>

画像が表示されなかった時に変わりに表示させる名前を指定できる

<タグ名 herf>

<a>タグと合わせて使う。リンクを挿入するときに使用。

5/19に勉強したことまとめ

とりあえずHTMLのさわりはおおまか理解したかな？といった感じである。上官にHTMLをマスターして来いと言われたので昨日学んだ基礎中の基礎は忘れないようにしたい。これからはCSSの触りも勉強していくことになりそうなので頑張ろう。

勉強初日に書いたよくわからないやつ。とりあえずちょっと楽しかった。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSS練習</title>
<style>
body {
color: red;
background:
 }
.main,a{
color:rgb(104, 49, 42)
 }
p {
color:skyblue
 }
div p span{
color:thistle

 </style>
</head>
<body>
 <div id="headline">
 <h1>pooooooooooooooooooooooi</h1>
 <p>HTML練習中</p>
 </div>
 <div class="main">
 <h2>見出し。</h2>
 <p>これは<span class="light">例</span>です。</p>
 <p>
 <a href="https://www.poipoipon.com/">ぽいぽいぽんへ</a>
 飛びます。
 </p>
 </div>
</body>
</html>