ウェブコーダーを目指すにあたり、、、の話

よく言われる事だけど、

先に作りたいものを見つけなきゃだ。

だけども、その作りたいものの難易度が低く

それで満足してしまうとそれまでだったりする。

となると結局のところ、自分のアイデア、発想力の話になってしまって、

それがコーダーとしての資質ともいえるのかもしれない。

と、ほにゃにゃにゃと書いているが、

ウェブコーダーを目指すにあたり、、、

やっぱ、デザインや絵を描くってのをコードで出来なきゃいかんなぁと。

html

などなど

色んなコードを使って製作する訳ですが

基礎の基礎たるｃｓｓが苦手でねぇ。

なんも描けんのよね。

とりあえず、レベルアップを考えているんだけど

以下を理解することでより良いコーダーになれる気がするので

これからの課題としてあげとこう。

1：関数を利用しよう（定義

:root{
--c-red:#ee0000;
--c-yellow:#ffc000;
--c-blue:#0168b7;
--c-black:#000000;
--c-white:#ffffff;
--sign-size:200px;
}

２：関数を使用しよう（利用

.huku{

background-color:var(--c-white);

}

３：関数で計算しよう

.kodomohuku{

width:calc(var(--sign-size)/3);

}

４：ボックスモデルから脱出

CSSではHTML要素がどのようにレイアウトされ、サイズが計算されるかを定義する基本的な概念をボックスモデル（Box Model）として扱っている。

ボックスモデルの主要な要素はcontent , padding , border, margin。
contentサイズに他要素が追加されるという考え方。

200*200の正方形(width * height)。

余白を20pxつけますと(padding)

　　　20px　　

20px,200px,20px

　　　20px

box-sizing:border-box;を使用すると

ボックスモデルではなくなり、デザイン自体の性質を変わる。

これは余白などをcontentサイズに含めるというもの。

　　　20px　　

20px,160px,20px

　　　20px

これを理解すると非常に便利で複雑な描写ができるようになる。

５：今更、位置の親子関係
position:relative;とposition:absolute;の利用。
positionを指定して親子関係を築き、子要素に、top、right、bottom、left プロパティを使用する。
.parent {
position: relative;
width: 300px;
height: 200px;
background-color: lightgray;
}

.child {
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background-color: blue;
}

６：形状作成予備軍
border-radius : 丸めるためのプロパティ。
clip-path : 切り取る。要素の形状を自由に変更できます。
transform :　回転、拡大縮小、移動などさまざまな変換を行う。
mask :　要素にマスクを適用して表示内容を一部隠すために使用

こんな感じかな。