見出し画像

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だけデザインが変わる

&copyは©️表記になる(特殊文字が定義されている)

特殊文字は全部&で始まって;で終わる

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と仲良くなれそうな気がした。

まだプログラミングの勉強は始まっていない。



良ければサポートよろしくお願いします！いただいたサポートは愛猫姉妹のごはんとおやつ代に使わせていただきます♡♡