webエンジニアの日常

RubyやPython, JSなど、IT関連の記事を書いています

Progateに出てくるHTML/CSSの文法まとめ

html

文法・テクニックまとめ

【目次】

リストのドットをなくす

li {
  list-style: none;
}

リスト含む要素の横並び

li {
  float: left (or right);
}

padding・marginの値の指定

padding: 上下 左右;
padding: 上 右 下 左;
padding: 上 左右 下;
margin: 上下 左右;
margin: 上 右 下 左;
margin: 上 左右 下;

左右にautoを指定する場合には、widthを指定する

border

border: 太さ 種類 色;
border-bottom: 太さ 種類 色;
border-top: 太さ 種類 色;

背景画像

baclground-color: url(https://○○) //urlで指定
background-size: cover;  // 繰り返さずに背景を拡大

透明度

opacity: 0.7;(1.0~0.0)

0が透明、1が不透明

文字間隔

letter-spacing: 2px;

ブロックスタイル

display: block;
display: inline;
display: inline-block;

display:

  width, height, margin, padding: 指定できる
  縦並び:

inline:

  width, margin: 指定できない
  margin, padding: 左右のみ
  横並び:

inline-block:

  width, height, margin, padding: 指定できる
  横並び

カーソル

カーソルを乗せたときの処理

div:hover{
  color: red
}

角丸

border-radius: 10px;

marigin: autoとtext-align: centerの使い分け

marigin: auto ・・・ 広い範囲を囲うようなブロック要素
text-align: center・・・テキストやボタンなどのようなインライン・インラインブロック要素

font-awesomeの使い方

<head>
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"
</head>
<body>
  <span class="fa fa-facebook">facebook</span>

透過度(rgba)

background-color: rgba(60, 60, 60, 0.5);

アニメーション

div{
  transition: 変化の対象 変化の時間;
  transition: all 1s; //基本はallにする。変化するときに1秒かけるという意味
{

div:hover{
  bavkground-color: red
}

行の高さ

line-height; 30px;

文字は行の中央に配置されるので、上下の中央にも使える

線の太さ

font-weight: bold(or normal);

boldが太字、normalが通常の太さ

h1～h6はデフォルトでboldになっている

position

position: absolute; // 画面の右端からの絶対位置

.parent {
  position: relative;
}
.children{
 position: absolute;
}

親要素にrelativeを設定すると、その子要素でabsoluteしたときに、親要素からの相対位置になる。

header{
  position: fixed;
  top: 5px;
  left: 10px;
}

fixedで位置を固定できる。

div:active{
  position: relative;
  top: 6px;
  right: 10px;
}

本来の位置から動かすことができる。

影

box-shadow: 水平方向 垂直方向 色;
box-shadow: 10px 10px #fff;
box-shadow: none; //影を消す

カーソルの形

cursor: text;
cursor: pointer;
cursor: default;

クリック時

a:active{
  color: red
}

クリックしたときにactiveになる

クリック時に動くボタンのcss

.btn {
  box-shadow: 0 5px #fff;
}

.btn:active{
  position: relative;
  top: 5px;
  box-shadow: none;
}

重なり

z-index: 10;

positionプロパティの必ず併用しなくてはならない

mediaクエリ

@media(max-width: 1000px){
}

境界の数字をブレイクポイントという。例えば以下のような組み合わせ

// pc

@media(max-width: 1000px){
  //タブレット
}

@media(max-width: 670px){
  // スマホ
}

boxsizing

li {
  box-sizing: border-box;
  width: 25%;
}

要素の幅をボーダーとパディングを含めた幅として計算する。

すべての要素に適応するのが推奨されている。すべての要素は*を使う

## {
  box-sizing: border-box;
}

viewport

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
</head>

スマホなどでメディアクエリを使えるようにするための設定

clear

clear: left;

floatの状態のままで、親要素が高さを持つようにする。これがないと、floatを指定した要素は浮いているため、親要素は子要素がない状態の時の高さになってしまう。

スラスラわかるHTML&CSSのきほん 第2版

スラスラわかるHTML&CSSのきほん 第2版

HTML&CSSとWebデザインが 1冊できちんと身につく本

HTML&CSSとWebデザインが 1冊できちんと身につく本

これからWebをはじめる人のHTML&CSS、JavaScriptのきほんのきほん

これからWebをはじめる人のHTML&CSS、JavaScriptのきほんのきほん