【Progate】HTML/CSSを勉強して自分なりに必須のコマンドをまとめてみた

こんにちはカレイドです。

最近は就職に向けてwebデザインの勉強を本格的に進めています。そこで現在はprogateというプログラミング勉強サイトを使ってコツコツと勉強を進めています。今回は全くの初心者がプログラミングを進めていく中でdivのような頻繁に使うコマンドは最小限に抑え、最初はうろ覚えのコマンドを一通りまとめてみました。完全な初心者の方というよりは学び始めてある程度分かった方が簡単な辞書代わりに使うととても便利になるんじゃないかなと思います。

progate内で学んだものをまとめたので他にも今後気づきがあればどんどん更新していきたいと思うのでよろしくお願いします。

それでは行きましょう！

CSS必須のコマンド

color :red;

テキストの色を変更。

background-color:red;

背景色を変更

font-size:12px;

フォントの大きさを指定することが出来る。

font-weight:normal(bold);

文字の太さを変更することが出来る。

position:absolute(relative);

要素同士を重ねるための必須コマンド。まずabsoluteは画面左上を基準にピクセル指定することになる。

このコマンドを記述した後にtopやleftで移動した場所を基準にすることが出来る。

では要素同士の重ね合わせはどうするか

まず重ねたい要素同士を決める。そして一番の基準となる要素に対して

potidion:relativeを記述する。そしてそれ以外の子要素に対してabsolute指定してtop,leftを記述することでその親要素の左上を基準とした移動をすることが出来る。

また、position:fixedを指定することにより常に要素を特定の場所に固定させることができる。位置は同様にtop,left指定でできる。

また要素の重なりの順番を指定するときには

z-index:5;などのように使うことで順番を変更できる。値が大きいほどその要素は上に表示させることができる。

padding,margin

要素の内側の余白、外側の余白の設定。

width:700px(100%)

ピクセル単位で指定する場合や、親要素に対しての子要素の割合で％表示で記載することもある。

例えば親要素parentに対して子要素childがあるとすると

parent{

width:1000px;

}

に対して

child{

width:50%（25％）;

}

とすればchildの大きさは500px(250px)となる。

要素を横並べしたいときに利用できる。例えば二つの要素を横並べする場合には50％

4つの要素を横並べする場合には親要素に対して子要素を25%ずつの大きさにすることで解決することが出来る。

これはよく使う手法なので必ず覚える。

display:block(inline-block,inline);

主にインライン要素をブロック要素に変えたい場合に用いる。ブロックは縦並び、

インラインブロックは横並びになる。

float:left (right);

要素を左並べにする。

ただし子要素がすべてfloatである場合に、親要素の高さは0になってしまうfloatの意味が浮いていると考えるとわかりやすい。そこでその親要素の中に一つhtmlで空タグ

(<div class="clear"></div>)要素を埋め込みcss側でclear:left;を設定することでfloatを解除することが出来る。これによって親要素は子要素を包み込むような高さにすることが出来る。

margin:0 auto;

要素を中央に持っていきたいときに使う。ただし必ずwidthとセットで使う必要がある。

大きな要素を持つものにはtext-alignではなくこっちを用いる。

text-align:center(right,left);

テキストを真ん中ぞろえにしたいときに用いる。またインラインブロック要素を中央に持っていきたい場合には親要素にtext-alignを用いて子要素にはdisplayでインラインブロック要素にしておく必要がある。

background-image:url();

背景に画像を挿入するとき

background-size:cover

指定されたサイズに合わせて画像の大きさを調節してくれる。

letter-spacing:10px;

文字間隔を指定することが出来る。

line-height:3px;

行間の指定。要素の中央に置きたい場合は要素のheightと同じピクセルに指定することで真ん中に配置することが出来る。

opacity:0.7;

透過具合。大きいほど透過の割合が小さくなる。またこれは要素全体の色を透過させるが、rgba(22,22,33,0.5)のように使った場合はその色に対してだけ透過させる効果を持つ。

@media(max-width:1000px)

横幅が1000px以下の場合の条件を記述する。

viewportの設定を忘れずに

box-sizing:border-sizing

＊｛

box-sizeing:border-sizing

}

こうしておくことで要素すべてに対してwidthの範囲内にpaddingとborderを含めた大きさに設定することができて要素が崩れること長いので安心！

CSSおまけ

デザイン面でよく使うものなので覚えておく必要があります。

:hover

マウスが要素に乗っている状態の動作。

border-radius:5px

半径5pxの円で要素の角を丸める。

box-shadow:水平方向　縦方向　色の指定;

要素の影をつけることができる。

none指定は主にマウスが押し込まれた状態を表現するのに使う。

cursor:text(pointer,default);

マウスが要素の上に乗った時の状態を指定することが出来る。

:active

:active{

position:relative;

box-shadow:none;

top:6px;

}

マウスがクリックされている状態の動作を記述できる。

例えばこのような記述の場合にはマウスが押された時には要素が6pxだけ下にさがり、影が消えることによって押しこまれる動作のように見える。

transition:all 0.3s;

アニメーション効果をつけることが出来る。通常はカラーなどのプロパティを指定することになるが、allで対象をすべて指定することが出来る。多くの場合は:hoverと組み合わせて用いる。

html必須コマンド

input

1行入力用の入力欄

textarea

複数行入力用の入力欄

FontAwesome

https://fontawesome.com/v4.7.0/icons/

を使う。

htmlにはhead内部にこれを埋め込んでおく。

まとめ

今回は自分がhtml/cssを勉強するにあたって思い出しずらいもの、理解しずらいものについてまとめてみました。

自分なりのメモのような感じにまとめたので見づらい部分が多々あると思いますが

気になるところがあったらコメントもらえると助かります。