Webコーディングする時によく使うCss編
初めてのコーディング
初めて1からコーディングをする時によく使うCssの記述を紹介します。
whidth
「whidth」とは要素の横幅を設定するCss
whidth:100px;/*横幅100px*/
max-whidth:100px;/*最大の横幅100px*/
min-whidth:100px;/*最小の横幅100px*/
サンプル画像
height
「height」とは要素の高さを設定するCss
height:100px;/*縦幅100px*/
max-height:100px;/*最大の縦幅100px*/
min-height:100px;/*最小の縦幅100px*/
サンプル画像
padding
「padding」とは要素の内側にスペースを開けるCss
padding:10px 10px 10px 10px;/*上/右/下/左の順番*/
padding-top:10px;/*上側だけにスペースを開ける場合*/
padding-right:10px;/*右側だけにスペースを開ける場合*/
padding-bottom:10px;/*下側だけにスペースを開ける場合*/
padding-left:10px;/*左側だけにスペースを開ける場合*/
サンプル画像
margin
「margin」とは要素の外側にスペースを開けるCss
margin:10px 0px 0px 0px;/*上/右/下/左の順番*/
margin-top:10px;/*上側だけにスペースを開ける場合*/
margin-right:10px;/*右側だけにスペースを開ける場合*/
margin-left:10px;/*左側だけにスペースを開ける場合*/
サンプル画像
text-align
「text-align」とは要素の内側のテキストなどの位置を調整Css
text-align: center;/*テキストをセンター寄せ/
text-align: right;/*テキストを右寄せ/
text-align: left;/*テキストを左寄せ/
サンプル画像
border
「border」とは要素の枠線を指定するCss
border:1px solid #000;/*線の太さ/線の形状/色を指定*/
border-top:1px solid #ff0000;/*上側だけに線の太さ/線の形状/色を指定*/
border-right:1px solid #0006ff;/*右側だけに線の太さ/線の形状/色を指定*/
border-bottom:1px solid #00ff1e;/*右側だけに線の太さ/線の形状/色を指定*/
border-left:1px solid #ffd800;/*左側だけに線の太さ/線の形状/色を指定*/
サンプル画像
font-size
「font-size」とは要素のテキストの大きさを調整Css
font-size: 16px;/*pxでテキストの大きさを指定*/
font-size: 100%;/*%でテキストの大きさを指定*/
font-size: 16em;/*emでテキストの大きさを指定*/
font-size: 16rem;/*remでテキストの大きさを指定*/
list-style
「list-style」とはulタグを使った際の「・」を調整Css
list-style: none;
color
「color」とはフォントの色を調整Css
color: #000000;/*#カラーコードを指定*/
position
「position」とは要素の位置などを調整Css
position: relative;/*基準点の指定*/
position: absolute;/*基準点からの位置を指定*/
position: absolute;/*基準点からの位置を指定*/
top: 0;/*トップからの位置を指定*/
left: 0;/*左からの位置を指定*/
right: 0;/*右からの位置を指定*/
bottom: 0px;/*下からの位置を指定*/
position: fixed;/*位置を固定して追従したりするように指定*/
background-color
「background-color」とは要素の背景色を指定するCss
background-color: #カラーコード;/*カラーコードを入れて色を指定*/
background-color: #rgba(255, 0, 0, 0.5);;/*rgbで色を指定し、最後の数値で透明度を指定*/
background-image:
「background-image」とは要素の背景に画像を指定するCss
background-image: url("画像のパスを指定");/*画像のパス部分にスタイルシートから画像までの場所を指定*/
CSSで疑似要素 ::after による改行を実現する方法
10月 24, 2024YouTube動画をアスペクト比を維持したまま埋め込む方法
10月 3, 2024transitionプロパティを使ってホバー時の切り替えをゆっくりにする方法
9月 19, 2024