2.CSS
こんにちはー。
年に1度の高熱で死んでいたやまうちです。
次はCSSですね。HTMLが文字だったのに対して、これはデザインです！
色とか並び方とか！
本当であればHTMLのところでstyleとか指定すればかけるんですけど、
めんどくさいというか見にくいから文字とデザインでしっかり分けるんです！
では早速入っていきたいのですが、
デザインを指定するときに"どこにどんな処理をするか"を指定すればいいですよね。
このときに役立つのがさっき最後にやったクラス名とタグです。
具体的には
タグ(どこの){
プロパティ名(何を) :値(どうするか);}
または
.クラス名{
プロパティ名2: 値2;}
のようにしてHTMLのタグやクラス名を指定してどんなデザインをするかを決めていきます。
これで全てと言っても過言ではありません。
あとはプロパティ名を色々使い方で分類して覚えるだけです！
⑴色系
color : #ff00ff00(16進数);
background-color : #ff00ff00(16進数); , rgba(赤/緑/青/透明度);
opacity : 0.0(透明)~1.0(不透明);
⑵文字系(サイズ,太さ,種類など)
font-size : ~px;
font-family : ~ , "~~"(2語以上のときは""をつける);
font-weight : 100(最も細字)~400(normal)~700(bold)~900(最も太字);
letter-spacing : ~px
⑶配置系
float : left , right(横に並べる) ;
position : absolute, relative, top:~px left:~px, fixed(固定したい場合) ;
display : block(縦), inline(横), inline-block(横), none;
z-index:1,2... と指定でき、大きいものが上に重なる(z軸と同じイメージ)
text-align : left/center/right;
文字も画像も何も指定しなければ左上からどんどん詰められていく。
そのため指定したい位置やサイズがあれば、
文字→文字の大きさ&並び方
画像(テキストボックス系)→箱の大きさ(width,height)&位置(margin,padding)
を指定する必要がある。
⑷画像系
width : ~px(横幅);
height : ~px(高さ);
background-size : cover(背景を埋める様に画像を配置) , contain(はみ出した部分は切れてしまう)
⑸テキストボックス系
width : ~px(横幅);
height : ~px(高さ);
padding : 値の数で指定する場所が変化(文字の箱の内側の余白を調整)
top right bottom left(4つ), top&bottom right&left(2つ), top&right&bottom&left(1つ)
margin : ↑同様, autoにすると中央配置になる(文字の箱の外側の余白を調整)
box-shadow : 水平方向の距離, 垂直方向の距離, (ぼかしの距離, 広がりの距離,) 影の色;
line-height : ~px(~pxのテキストボックスの中央に文字が配置される);
border-radius : ~px;
⑹変化系(カーソルに反応する,時間変化するなど)
transition : 変化の対象 変化時間;
タグ or .クラス名 : hover→カーソルが上に来た時にCSSを適用
タグ or .クラス名 : active → クリック時に変化が起きる
⑺その他
span : spanタグで囲ったものだけ限定的にCSSを適用出来る
1.HTML
こんにちは。やまうちです。
Progateだけで勉強して行ってみようかと思います。
環境構築などは一旦おいておいて、まずは知識のまとめをしていきます。
(もはや自分用←
基礎知識
・タグ→<~>内容</~>の囲ってるやつ
・h1,pは同じ行に羅列しても改行される
・他のものは改行してコードを書かないと改行されないので注意
⑴HTMLの流れ
ページで書きたい文字をとりあえずどんどん羅列していきます。
大まかな流れとしては
①大前提 (今から書いていく形式,書式,言語を宣言)
②前提(タブの内容,外部ファイル使用する(css)などの定義)
③ページに書く内容
(i)ヘッダー(ページ上部の固定部分)
(ii)コンテンツ
(iii)フッター(ページ下部の固定部分)
下みたいな感じになります。
って感じです。
大前提
<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で名前つけるつもりでいましょう！
これまでの知識を使ったものを実際に見て見ましょう！
左が打ち込んだ内容で、右が実際に出力される内容です！
これHTMLはとりあえずわかったと言っていいはず！
簡単ですね！
ではではー。
0からのプログラミング
はじめまして！やまうちです。
エンジニア志望ではないのですが、作りたいアプリとかwebサイトがいっぱいあるので
0からプログラミングを勉強していきます！
しばらくはプログラミングで学んだ知識をここでまとめていければと思います！
ぜひプログラミング始める人は参考にしてくれれば幸いです！
初心者ながら書いて見てるので違うところがあったらご指摘いただけるとうれしいです！
