Progate HTML&CSSコースに出てくるコードまとめ

ProgateのHTML&CSSコースに出てくるコードをまとめました。

中級編までです。

コードまとめ

リスト[html]
<ul>黒点
<ol>数字連番

リストのマークをなくす[css]
li{
list-style: none;
}

要素を横並びにする[css]
li{
float: left (right);
}
・・左から横並び(右から横並び)

フォント種類の指定[css]
h1{
font-family: “Avenir Next”;
}
・・フォント名にスペースがあるときはダブルクォーテーションで囲む

文中の一部にだけCSSを適用させたい[html][css]
<p>ようこそ <span>Progateへ<span><p>
span{
color: red;
}
・・[Progateへ]の部分だけ赤字になる

フォーム[html]
<input> 1行のテキスト入力欄が表示される
<textarea></textarea> 複数入力用の入力欄が表示される
<input type=”submit”> value=”保存”> 送信ボタンの表示。value属性はボタンに表示されるテキスト、デフォルトでは「送信」が表示される。

背景画像の指定、大きさの指定[css]
<div>
<h1>LEARN TO CODE<h1>
<div>

div{
background-image: url(top.png); ()内に画像のURLを指定する
background-size: cover; 1枚の画像で表示範囲を埋め尽くすように画像が拡大・縮小する(指定しないと繰り返し表示される)
}

透明度、要素を透過させる[css][html]
「opacity」・・要素の中身すべてが透明になる
p {
opacity: 0.7; /*0.0(完全に透明)~1.0(完全に不透明)の数値で指定
}

「rgba」・・背景のみを透明にしたいとき
.div{
background: rgba(84, 190, 238, 0.5) 4つ目の値で透明度合いを指定 0(透明)~1(不透明)
}

文字の間隔の指定[css]
p{
letter-spacing: 10px;
}

displayプロパティ[css]
display: block;
display: inline-block;
display: inline;

カーソルが乗ったときのプロパティを変化させる[css]
div:hover{
background: red;
}

角を丸める[css]
.box{
border-radius: 10px; 角を10px丸くする
}

要素を中央に配置する[css]
.box{
width: 300px; 必ずwidth(幅)をセットで指定する
margin: 0 auto;
}

テキスト等の配置の指定(中央そろえ等)[css]
p{
text-align: left; 左寄せ
text-align: center; 中央そろえ
text-align: right; 右寄せ
}

中央そろえの使い分け[css]
margin: 0 auto; /*ブロック要素に使う
text-align: center; /*インライン要素、インラインブロック要素に使う

アイコンを使う[html]
<head>
<!–Font Awesomeheadタグ内で読み込む–>
<link rel=”stylesheet” href=”//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css”>
</head>

<body>
<span class=”fa fa-facdbook”></span> <!–faクラスとfa-〇〇クラスを両方指定する–>

アニメーションをつける[css]
div{
transition: all 1s; all・・変化の対象、1s・・変化にかかる時間
}
div:hover{ ・・transitionは多くの場合、hoverと組み合わせて使う
background: red;
}

行の高さ(行間)の指定[css]
line-height: 10px;

縦の中央寄せ[css]
line-height: 100px;
・・高さの中心に文字が配置される。そのため要素の高さとline-heightプロパティを同じ値にすると
文字が縦の中央に配置される

リンク(aタグ)のクリック範囲を広げる
a{
display: block;
}
・・<a>タグはインライン要素のためテキスト部分しかクリックできない
ブロック要素にすれば大きさが親要素いっぱいに広がりクリック範囲が広がる。

文字の太さの指定[css]
font-weight: normal; ・・通常の太さ
font-weight: bold; ・・太字
・・<h1>~<h6>の要素は初期状態では「bold」。「normal」にすることで通常の太さになる。

相対的な大きさの指定[css]
.child{
height: 70%;
width: 50%;
}
・・%で指定することで、親要素に対してその割合の高さや幅を指定できる

要素を重ねる[css]
.box1{
position: absolute;
top: 50px;
left: 70px;
}
.bos2{
position: absolute;
top: 120px;
left: 140px;
}
・・htmlの要素は通常は重ならないが、position: absolute;を使用することで重ねられる。
サイトの左上を基準としてそこからの位置をtopとleftで指定する。

配置の基準位置の変更[css]
.parent{
position: relative;
}
.child{
position: absolute;
top: 20px;
left: 15px;
}
・・基準としたい親要素に「position: relative;」を指定すると、指定した要素の左上部分が基準位置になる

立体的なボタンを作る[css]
-ボタンに影を付ける
box-shadow: 10px 10px #000000; ・・水平方向、垂直方向、色

-カーソルの形を変える
cursor: text;
cursor: pointer;
cursor: default;
・・要素に乗ったときのカーソルの形を変えられる
タグによって初期状態は異なる。
<a>タグは初期状態では、「pointer」が設定されている。

-クリックされている間だけcssを適用させる[css]
-cssを打ち消す[css]
.btn:active{
box-shadow: none; ・・影を消す
}
・・セレクタに「:active」を指定することでクリックされている間だけcssを適用させられる
多くのプロパティは「none」を指定することで打ち消すことが出来る

-要素の位置をずらす[css]
.btn:active{
positon: relative;
top: 6px;
left: 10px;
}
・・「position: relative;」をtopやleftと併用することで、その要素を本来の位置からずらすことが出来る。

-クリック時に変化をつける、ボタンをへこませる[css]
.btn:active{ position: relative;
top: 6px;
box-shadow: none;
}
・・クリック時に以下の処理をすることでボタンがへこんでいるように見える
box-shadowをnoneにする
posision: relative と top によって影の文だけ位置を下げる

要素を固定する[css]
.fixed-img{
position: fixed;
top: 10px;
left: 40px;
}
・・「position: fixed;」で、常に要素を画面上の指定した位置に固定させられる
使い所はヘッダーの固定など

要素の重なり順を指定する[css]
header{
position: fixed;
top: 0;
z-index: 10;
}
・・「z-index」プロパティで要素の重なり順を指定する
整数値で指定。値が大きいほど上に表示される
必ず「position」プロパティと併用しなければならない
使い所は固定したヘッダー。スクロールしたときに他の要素がヘッダーの上に表示されないようにする。
ヘッダーが常に上に表示されるように。