HTML/CSSはじめました(2019/12〜)
２０１９年の１２月中旬、私はプログラミングの勉強を開始した。
講師の先生もいて、１０人程の小規模なクラス。
正直私は学がないだけじゃなく、勉強は好きだけどできるタイプじゃないから、めちゃくちゃ不安だった。勉強についていけるだろうか、と。
置いてかれないように頑張る、が当面の目標だった。
授業で使うパソコンはノートパソコンで１５インチか１６インチの大きめのもの。
私はよくて１３インチぐらいまでの大きさのノートパソコンしか使ったことがないから、それだけでも不安が増えた。小心者過ぎる。
簡単な自己紹介を各々済ませて、授業は始まった。
まず、『Terapad』のインストールから。
Googleで検索してダウンロードしてインストール。未知のことじゃなく少し安心した。
Terapadを開いて簡単なテキストを入力してファイルを作り保存。
『美佳タイプ』というタイピングソフトも取ってきて入れた。
私はタイピング速度は普通より気持ち速いぐらいで入力にあんまり不自由はないけど、ホームポジションができない。
ホームポジションでランダムタイピングをすることになったが、苦手×苦手でまた不安が押し寄せた。
ホームポジションが出来ないとダメだ、タイピング速度を上げないとダメだ。
その時計測したタイピング速度は
最高入力速度 が、６０秒で１０３文字だった。(ミスタッチは1回)
平均は１５０〜１６０ぐらいだからまずは１００を目指すよう言われる。
ここから５０字も増える気がしなかった。
人差し指タイピングの限界かと思った。
準備体操その１はここまでで、次が肩慣らしとしてHTMLだった。
HTML ハイパーテキストマークアップランゲージ
リンク(飛んでいく仕組み)がハイパー。
TerapadにHTMLを書いていく。
自分で作ったもののソースを見る癖をつけるようにと教わる。
<p>タグでマークアップ
<h>タグも大事
<ol>オーダードリスト
<li>リストアイテム
<tr>table row
rowは行のこと。
列はcolumn
<th>table header
<td>table date
captionは表題
img src イメージ ソースの略
./ 同じ階層
../ １個上
../../ ２個上
alt属性で画像の説明(SEO的にも大事)
インライン要素は文字と同じ(画像(img)も動画(iframe)も)
こんな感じのことを学んで初日を終えた。
HTMLと来たら次はCSSだった。
CSSリセットでブラウザが持ってるデザインなどを最初に初期化しておくことで、どのブラウザで見ても崩れにくく同じデザインのサイトを表示できるとのこと。
width ウィスは横
height ハイトは縦
rel リレーションの略で関係の意味
divは汎用ブロック要素でブロックを作りたい時に使う
paddingは内側、marginは外側
marginの相殺
大きい方が適用される
line-heightは行間
idとclassの違いは、idは一つしか使っちゃいけない(ユニーク)がclassは何度使っても良い
box-sizing:border-box; これはwidth(幅)に含めてくれる
border-radius 角を丸めることができる。昔は画像を使うしかなかった
Can I useではどのぐらい使われているのかが調べられる
HTMLはブロック要素が縦に並ぶのが基本
縦に並ぶのが１カラムレイアウトといって、最近また人気だと教わる。
理由はスマホが普及したことでモバイルファーストが重視されているからとのこと。スマホメインでその後パソコンでも見られるようにといった感じらしい。
flex-boxを習う。昔はfloatでやってたのを今はflexがあるからこちらを覚えた方がいいという。
flex-direction:column; は縦並び
flex-direction:row; は横並び(デフォルト)
align-itemsは行全部
align-selfは単体
align-items:stretch;(デフォルト)は低い方を高い方に合わせてくれる
flex-direction(元がどちらかが大事(デフォルトのrowの場合))
justyfy-contentは横方向
align-itemsは縦方向
CSSのセレクタ
body{
color:gray;
}
プロパティ:値
idは#、classは.
.main p span{
color:orange;
}
mainクラス内のp内にあるspanだけデザインが変わる
©は©️表記になる(特殊文字が定義されている)
特殊文字は全部&で始まって;で終わる
background-size:cover; 背景をカバー(全体)する
HTMLで画像を置く方法は大きく分けて二つ。
imgタグで置くか、背景に置くか
背景の場合は上に文字が乗せられる。
カラーコード #555555
同じ数字が並ぶときは、#555みたいに略せる
RGB レッド・グリーン・ブルー(光の三原色)
比率が揃っているとモノトーン
白#ffffff 全ての光が揃ってる
黒#000000 全ての光がない
CMYK シアン・マゼンタ・イエロー・ブラック(絵具の三原色)
heightとline-heightを一緒の数値にするとセンタリングしてくれる
hoverは擬似クラスで乗せたとき
box-shadow:1px(X軸) 2px(Y軸) 3px(ぼかし) 1px(大きさ);
!importantは最強なので基本的に使わない
数日間は、上にメモしたようなことを学んだ。
HTMLは触ったことがあったけど、CSSは激しく苦手意識が強い。
すこーしだけCSSと仲良くなれそうな気がした。
まだプログラミングの勉強は始まっていない。
予習を昨日からすこし始めはじめてみた。 pic.twitter.com/W4oaLEVfwe
— ぬる@勉強垢 (@instantheaven_) November 24, 2019
いいなと思ったら応援しよう！
