HTML,CSS中級編 基本概念について

こんにちは。
今回も学習段階の私が私のために(笑)
忘れないようにメモ書きを残していきたいと思います。
同じく基本から学びたい方やエッセンスだけを掴みたい方に
有益な記事になれば幸いです。

背景画像の入れ方から画面中央調整方法

Background-image:url();
Background-size:cover;

.box{
Width:300px;
Margin:0 auto;
└こうすることで、自動で中央揃えにすることができる。
ただし横幅は絶対設定しないといけないので注意。
また、縦を自動で中央に合わせる方法はありません。

文字の透明度をつける方法

CSSで
Opacity:●;
をいじれば透明度を選択することができる。
これが1であるほど不透明であり、小数点以下になるにつれて透明度が増していく。

文字の隙間を空ける方法

CSSで
Letter-spacing:●;
をいじれば文字の隙間感覚を調節することが可能

ボタンで飛ばす方法

<a href="#" class="btn twitter">Twitterで登録</a>

このように、<a>で囲むことでリンク先に飛ばせます。
ボタンで飛ばしたい場合は、HTML上でbtn twitterなどと書きます。
この際btnをクラス付けしておきましょう。

カーソルを合わせた時に色が変わるようにしたい

このような現象をhoverと言います。
CSSにて
Div:hover{
Background-color:red;
}
など、セレクタ：hover｛でコードを書き始めれば大丈夫です。
セレクタ部分には、.btnなどのクラス分けしたものが来ることもあります。

角を丸くする方法

CSSにて、border-radius: 10px;
などと記述すればOKです。

文字の揃え

CSSにて
Text-align:left
Text-align:center
Text-align:right
として文字をそろえることが可能です。

中央揃えの２つの使い分け

今まで、
・text-align:center
・margin: 0 auto;
を学びました。

アイコンを表示させる方法

<span class=”fa fa-●●”></span>
で完了。

クラスを伴った画像挿入方法

<img class="logo" src="https://prog-8.com/.png>でOK

Aの中にBを作りたい場合、

★
　☆
　　●
　　●
　☆
★

となっているので、divの次にまたdivが来て違うものをクラス分けしてても大丈夫な点に注意してください。

ログインコードの書き方

<div class="header-right">
<a href="#" class="login">ログイン</a>
</div>

変化の起こらせ方

CSSにて
Div{
Translation: all 1s;
}
で完成です。
Allは全体を反応させること、1sは反応時間を1秒としています。

また、これを使う場合何色にするのか決める必要があるため大体hoverと
一緒に使います。

行間の設定方法

Line-height: 10px;
といった形で設定することができます。
この数字が大きくなるほど行間は広くなります。

ブロックとは

親要素いっぱいに適応を広げることができる。
CSSにてdisplay:block;と書き加えれば良い

文字の大きさを変更したい

CSSにてfont-weight:normal;が細文字
Font-weight:bold;が太文字です。
H1~h6で設定した分に関しては自動でboldが適応されているので
もし補足したい場合には、自分でnormalに変えると良いでしょう。

基本に立ち返ってみよう

Divのクラスの中にpのクラスを作ったりと頭が混乱してしまうかもしれませんが、基本的には枠内にまた枠を作っているというイメージを持つようにします。
今何をしていて、どこに反映されているのかという意識は常に持つようにしましょう。

CSSを用いて要素同士を重ねてみよう

Position:absolute;
Top:50px
のようにして要素同士を重ねることが可能です。
Topというのは左上を起点としています。
右、下、左をそこに照らしてどこに配置するのか設定することで重ねられます。

もし左上ではなく、別に基準にしたい親要素があれば、
CSSにて
.parent{
Position:relative;
Top25px
のようにして、基準を変更することが可能です。Psition-relativeと記述しましょう。

ボタンを作る際に中に文字を入れる方法

Spanタグを使用すれば良いです。
HTML上で、<span class=”btn message”>●●</span>を作りましょう。
そしてその文字●●の編集に関しては、CSSで
.btn message{
としていじっていけば良いです。

カーソルの形を変更する方法

CSSでcursor:pointer;とすると変更できます。
ちなみに、ポインターが指です。
縦線のものを表示させたい場合は「text」とします。
また矢印の形にしたい場合には「default」とします。

カーソルを合わせた時にアニメーションを付けたい時

理解としては、
カーソルを合わせる前の画像の表示方法
そしてカーソルが合わされた時.message:active;に
どのような画像に変更するのかをHTMLを使って設定していきます。
そのためコードを２つ書くということを覚えておきましょう。

.message {
padding: 15px 40px;
background-color: #5dca88;
cursor: pointer;
box-shadow: 0 7px #1a7940;
}

.message:active {
position: relative;
top: 7px;
box-shadow: none;
}

ヘッダーを固定する方法（応用可）

header {
height: 65px;
width: 100%;
background-color: rgba(34, 49, 52, 0.9);
/* positionプロパティをfixedに、topを0に指定してください */
position:fixed;
top:0;

/* z-indexを10に指定してください */
z-index:10;
}

z-indexは階層を示します。0が一番下に位置し、大きくなるほど階層が上になります。
またz-indexを使用する際にはposition:fixed;と併用します。