やまうちの起業家への道

東京大学大学院M1のやまうちです。起業家になるために学校やめて色々な事業に挑戦中です!

1.HTML

こんにちは。やまうちです。

 

Progateだけで勉強して行ってみようかと思います。

環境構築などは一旦おいておいて、まずは知識のまとめをしていきます。

(もはや自分用←

基礎知識

・タグ→<~>内容</~>の囲ってるやつ

・h1,pは同じ行に羅列しても改行される

・他のものは改行してコードを書かないと改行されないので注意

 

⑴HTMLの流れ

ページで書きたい文字をとりあえずどんどん羅列していきます。

大まかな流れとしては

①大前提 (今から書いていく形式,書式,言語を宣言)

②前提(タブの内容,外部ファイル使用する(css)などの定義)

③ページに書く内容

 (i)ヘッダー(ページ上部の固定部分)

 (ii)コンテンツ

 (iii)フッター(ページ下部の固定部分)

下みたいな感じになります。

 

f:id:hiroaki0507:20170422162022p:plain

って感じです。

 

大前提

<html>

 <head>前提</head>

 <body>内容 ①ヘッダー ②メインコンテンツ ③フッター</body>

</html>

のようなイメージですね。

 

⑵HTMLの書き方

 大前提/前提/内容という大きな3つの枠組みがあるのはわかりましたね。

大枠→html,head body

中枠→div(内容の中のヘッダー/メインコンテンツ/フッター)で分けていました。

あとは文字をひたすら書いていくわけなんですが、どういう文字を書くかで囲うタグが違ってきます。

 

①見出し(heading):h1~h6(数が増えると文字のサイズが小さくなる) 

②段落(paragraph):p 

③リンク(anchor:いかり→目印):a 

 参照するリンク先が必要なのでa href="URL"のように使う

④項目を羅列したい:ol, ul, dt, dd(親要素)でli(子要素)として使う 

⑤画像を貼りたい:<img src="~">←閉じタグ要らない

⑥改行したい:br, hr(線をつけて改行)←閉じタグ要らない

など

 

①〜⑥知っておけば基本問題ありません。

 

 

そして最後にそれぞれの項目がわかりやすいように属性,属性名をつけます。

<div class="contents">のように使います。classを属性, contentsを属性名といいます。

このように名前をつけておくと見やすいし、この属性だけ色をつける!などの操作がしやすくなるので、自分のためにもシステム的にもあった方がいいです!

divがあったらclassで名前つけるつもりでいましょう!

 

これまでの知識を使ったものを実際に見て見ましょう!

左が打ち込んだ内容で、右が実際に出力される内容です!

 

f:id:hiroaki0507:20170422173527p:plain   f:id:hiroaki0507:20170422173556p:plain

 

これHTMLはとりあえずわかったと言っていいはず!

簡単ですね!

 

ではではー。