ホームページ

ホームページ作製リスト

学び

デバイスに適応させる

< meta name="viewport" content="width=device-width, initial-scale=1" >
様々なサイズのデバイスに対応させる

リンクの設定

a {text-direction : none ;}
a要素の下線を消す

a:--- {}
:link　未訪問のリンク
:visited　訪問済みのリンク
:hover　マウスカーソルが乗っているリンク
:active　クリック中

表の設定

table {border: solid 1px black;} 表の囲みを指定
この場合
　　solid : 実線　　1px : 太さ　　black : 線の色

table { border-collapse:collapse;}
箱同士の隙間を無くす

フォントの設定

おすすめはgoogle font
文字フォントを選んでimportをcssにコピペ
＊<style> </style> は消す

font{---,---,sans-self;}
アルファベット → 日本語 の順番で
sans-self は指定したフォントがブラウザにない場合に使用される最低限のフォント

画面分割

[html] < div class="example" >
　　　　< /div>

[css] .example{display: flex}
.example の子要素が横並びに

calc とは

.last img {
width: calc(100% / 3);
height: auto;
object-fit: cover;
}

このようにコード内では使用し、コード内で計算を指示することができる

フッターを常に画面下に固定する

footer { position : absolute;
　　　　　bottom : 0;}
body { padding-bottom : 120px;}

画面下に固定して、更にdody要素がfooterによって隠れてしまうことを避けている

背景をグラデーションにする方法

{background : linear-gradient (to right, #----, #----)}

to---を変えることで上から下へ、右から左へなどグラデーションの方向を変えることができる

角丸の画像を作る

{border-radius : 1px -px -px- px }
左上　右上　右下　左下　という順