【癌患者で未経験のプログラミング学習アウトプット①】HTMLとCSS
【癌患者で未経験のプログラミング学習アウトプット①】HTMLとCSS
こんにちは。ムツ吉です。
先日からプログラミングを学ぶべく
Progateというプログラミング学習ツールをやっています。
何故プログラミングを学習する事になったのかはこちらに記載♫
プログラミングを学習する上での
目標はクラウドワークスの受注する事。
せっかく癌の闘病で時間ができているので
今のうちにパパッと学んでいきたいと思ってます。
この記事では
実際にプログラミングを学んで思った事や感じた事などをアウトプットする記事です♫
自分もアウトプットする事で情報の整理ができるし
この記事を読んでくれる方にも、「プログラミング学習ってこんな感じなんだ。」とか「敷居が高そうだったけど、 私にもできそうじゃん」
とか思って貰えたらいいなと思います♫
※尚、記事は不定期で公開していきます。学んだ順番がわかるように記事のタイトルに数字を書いていきます。
学んだ事。
今回学んだことは
・HTML
・CSS
を学びました。
HTML
HTMLを学ぶとホームページがどのような仕組みで表示されているかが学ぶことができる。
今回のHTML学習は以下のことを学ぶ。
見出し
見出しは以下のように<h1>と</h1>で囲むようです。
<h1>（見出しにしたい文言）</h1>
<h1>と</h1>を<h2>と</h2>とすると見出しの大きさが変わるみたいです。
大見出しや中見出し、小見出しといった具合に調整ができるみたいです。
リスト
リストにしたい場合は以下のように<ul><li>@@@</li></ul>で囲む。囲まれたものはリスト化される。
<ul>
<li>@@@</li>
</ul>
画像を表示する
ページ内に画像を表示したい場合は以下のコードで表示ができる。
<img src="表示したい画像URL">
リンク作成
表示した文字にリンクを紐づける場合は以下。
<a href="URL">表示したい文字</a>
表示したい文字にURLがリンクとして紐づく。
【HTMLの全体構造】
HTMLは以下の構造でできている。
<html>と</html>で<head>と</head>と<body>と</body>が挟まれている。
<head>と</head>はページには表示されない
<body>と</body>はページに表示される。
<!DOCTYPE html>は「HTMLのバージョンはコレでいきます」というバージョン宣言なのだとか。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
<head>要素にはページに関する情報。
<head>要素はページに表示されないのでWebページの設定に関する情報を書いていく。
設定に関する情報とは
①文字コードの指定、②ページのタイトルの設定、③CSSの読み込みなどをおこなっていきます。
①文字コード指定（文字化けを防ぐ）
<meta charset="○○">
（○○はUTF-8が推奨されている）
②ページのタイトル（プラウザのタブに表示される）
<title>○○</title>
③CSSの読み込み（本来はHTMLの方で読み込む必要がある。）
<link rel="stylesheet"href="stylesheet.css">
CSSについては下の方で解説。
<body>要素には実際に表示したい内容。
【レイアウト】
一般的なホームページのレイアウトは以下のようになっている。
ヘッダー（ページ上部のメニュー）
メイン（ページの主なコンテンツ）
フッター（ページ下部のメニュー）
【レイアウト <div>要素】
ヘッダーやメインやフッターの区切りには<div>要素を使えば区切ることができる。
・ヘッダーの<div>要素
<div class="header">
</div>・メインの<div>要素
<div class="main">
</div>・フッターの<div>要素
<div class="footer">
</div>
【便利機能】
タグ名（<div></div>とか<h1></h1>とか）を入力するのが面倒のときはdivと入力して「Tab」キーを押すと<div></div>が入力される。
CSS
ホームページなどは主にHTMLとCSSでできている。
HTMLが文字を書く表示させる役割としたら
CSSはその文字をデザインする役割のようだ。
CSSのコードは専用の入力フォームがあり、それをHTMLに紐づけるには
HTMLの入力フォームのところで紐づけのコードを書く必要があるように思える。
色、大きさ変える
例えばHTMLの入力フォームで<h1>○○</h1>と入力しており、
○○の色や大きさを変えたい場合は
○○{
color:（色コード）;
font-size:（大きさ）px;
}
と入力することで色と大きさが調整できるみたいだ。
色コードとは
赤や青などそれぞれCSS用のコードがあるみたいだ。
文字の種類を変える
文字のフォントも上記と同じ。
〇〇{
font-family:（フォント名）;
}
背景色を変える
〇〇{
background-color:（色コード）;
}
横幅、高さを変える
○○{
width:（横幅大きさ）px;
height:（高さ）px;
background-color:（色コード）;
}
<li>要素が複数ある場合
li{
color:（色コード）;
}
タグに名前を付ける（class名でCSSを指定する場合）
HTML
<li class="selected">○○</li>
CSS
.selected{
color:（色コード）;
}
感想。
以上、【プログラミング学習アウトプット①】HTMLとCSSでした。
学習してみて思ったことは
正直よくわからん！！
です！(笑)
ですが
初めてのプログラミング学習なのでそれぞれのコードの意味を完全に理解した訳ではないが、ある程度のホームページの仕組みは少しわかったような気がします。
この学習をやってみて、まだプログラミングの基本のきの部分であると思うので
一般的なプログラマーの方はすごいなと尊敬します。(^^)
次回の学習もなるべく間をあけずに頑張りたいです（笑）
