ねみぎログ

IT業界で運用管理エンジニアとして過ごしてます。仕事・資格・趣味など、日々をアウトプットしていきます。

Progate初体験。「HTML & CSS 学習コース 初級編」個人的メモ

自分には、「プログラミング」の知識が殆どありません。

むしろ苦手意識すらあります。

 

以前から、勉強しようと考えた事は難度あり、自宅の本棚にはJAVAの入門書があったりします。

 

Javaの絵本 第3版 Javaが好きになる新しい9つの扉

世界でいちばん簡単なJavaのe本 [最新第3版] Javaの基本と考え方がわかる本

 

書籍の内容自体は別に難しくありません。むしろ、分かりやすくさえあります。

ただ、1冊読み込んだとしても、何が出来るようになるのか分からない。

基礎から入るのは大事と思うけど、読了してもゴールが見えない。

Webサービスやアプリを作ってみたいとは思うが、一体どれだけやり込めば良いんだ…」という気持ちでずっと挫折しっぱなしでした。

 

ただ、「何かを作ってみたい」という願望はずっとあったので、最近「Progate」でやっと、プログラミングに入門しました。

prog-8.com

 

Progateを試してみた所、僕にピッタリでした。

これは本当に初学者向け。ゲーム感覚でサクサク進むし、わかりやすい。

 

そして無料版なのに、結構なボリュームの多さ。

(「HTML & CSS 学習コース 初級編」は、延べ2時間くらい掛かりました…)

f:id:nemigi:20180724213736p:plain

プログラミングってどこから・何から手を付けていいか解らなかったから、ちゃんと目的別にコース分けされているのが嬉しい。

これだけでも、入門のハードルがグッと下がります。

 

f:id:nemigi:20180724213132p:plain

スライドによる簡潔な解説。見やすい。

 

f:id:nemigi:20180724213234p:plain

スライドの後は、手を動かしながら実践型で覚えていくスタイル。

環境構築不要でWeb上で学習できるというのは、とても便利。

そして成果物が目に見えるのが、楽しい。

 

まだ始めたばかりですが、今度は挫折しないように頑張りたい。

慣れてきたら、学習内容を活かして自分でWebサービスやアプリを作ってみたいですね。

 

以下は、「HTML & CSS 学習コース 初級編」 で得た内容の備忘録的メモです。

 

HTML


HyperText Markup Language(ハイパーテキストマークアップ・ランゲージ)
ウェブページを作成するために開発されたマークアップ(=ページの要素や構造に目印を付ける)言語

 

タグの説明


タグ 意味
<meta charset="文字コード"> <head>で使用 文字コード指定
<title> <head>で使用ページのタイトル指定
<link rel="stylesheet"> href="CSSファイル名" <head>で使用CSS読み込み指定
<h*> 見出し(headingの略) 
<h1>が一番大きく、<h6>が一番小さい
改行される
<p> 段落(paragraphの略)
改行される
<a href="リンクURL"> ハイパーリンク
改行されない
<img src="画像のリンク"> 画像の表示
<li> 箇条書き(リスト)になる
<ul>で囲むと黒点が先頭に付く
<ol>で囲むと数字が連番で付く
<div> タグのグループ分けに使う divisionの略
<span> 文中の一部にCSSを適用させたい場合に囲う
改行されない
<input> 1行のテキスト入力を受け取る 終了タグ不要
type=submit→送信ボタン作成
value="名前"→ボタンに表示されるテキスト変更
<textarea> 複数行のテキスト入力を受け取る
<!-- コメントアウト開始
-->

コメントアウト終了

<div class="名前">

<li class=”名前”>など

各タグに名前を付ける

CSSでクラス指定する時は、「.名前」で指定する

 

書き方


<!DOCTYPE html>HTMLのバージョン宣言(シェルスクリプトのシバンみたいなもの?)

<html>
<head>ページに関する情報を記述</head>
<body>実際のページ内容を記述</body>

 </html>

 

CSS


Cascading Style Sheets(カスケーディング・スタイル・シート)
HTMLで作成された文書に、色・大きさ・レイアウトなどを指定して修飾する。
セレクタ(HTMLの要素)・プロパティ(変更内容)・値で指定する。
プロパティの末尾には「:」、行末には「;」を付ける。

 

CSSプロパティの説明


プロパティ 意味
color 文字の色を変える
font-size 文字サイズ変更 px(ピクセル)で指定
font-family フォント指定
background-color 背景色指定
width 横幅指定 px(ピクセル)で指定
height 縦幅指定 px(ピクセル)で指定
list-style noneとすることで、リストのマーク(黒点とか)を無くせる
float left  →リストを左から並べる事が出来る
right→リストを右から並べる事が出来る
border 枠線を付ける 太さ(px)、種類、色の順に指定
上下左右   →border
特定の場所のみ→border-bottom、border-top、border-left、border-right
padding borderの内側の余白指定 px(ピクセル)で指定
padding-top、padding-bottom、padding-left、padding-rightがある
値が1つ→余白が均一に適用される
値が2つ→上下・左右の順に適用される
値が4つ→上右下左(時計回り)にて供される
margin borderの外側の余白指定 px(ピクセル)で指定 
指定方法はpaddingと同様
/* コメントアウト開始
*/ コメントアウト終了

 

 

書き方


HTMLの要素名(セレクタ) {
    プロパティ: 指定する値;
}