CSS備忘録 - プログラミンGOO

ファイル名に日本語を指定した場合

ブラウザによって文字化けすることがあるので文頭に

@charset "UTF-8";

と記載しておく

【テキスト】

■line-height：インライン要素の高さを設定する

余白（line-height - font-size）は上下均等に割り振られる

pxでの指定以外に以下のように設定することもできる

line-height: 2;　font-sizeの2倍

em設定されているフォントサイズの2文字分

※Aは子要素ごとに再計算されるのでAの方が使われる。

■透明度：opacity

opacity: 0.9;

※0に近いほど薄くなる。デフォルトは1

■色

・background-color: hsl(色相,彩度,明度); //HSLでの設定

・透明度：rgbでもhslでも、最後にaをつけて表現する

background-color: hsla(色相,彩度,明度,1.0);

■フォント

sans-serif：総称フォント（よしなに選んでくれる）

※空白が入るフォント名はクォーテーションで囲う

font-family: Verdana, 'Arial Black', メイリオ, sans-serif;

■配置

・インライン要素の上下中央揃え
heightとline-heightを同じ値で指定する

・２行でも１行でも上下中央寄せ

display: flex;

align-items: center;

※box要素にしか使用できないため、inputなどはdivでラップする

左右中央寄せ

justify-content: center;

【BOX】

■線の角を丸める：border-radius

border-radius: 10px;

border-radius: 50%;　：正円

■boxに対してborderを付与すると、boxの重なり部分だけ線が太くなる問題

Flexboxでborderの重なりが気になる場合 - Qiita

■背景

background-size: cover //領域を埋める

contain //画像がすべて表示されることを保証する

■影をつける：box-shadow、text-shadow

box-shadow: 右へpx 左へpx ぼかしpx 拡大px 影の色rgba(0, 0, 0, .3);

box-shadow: 5px 3px 2px 2px rgba(0, 0, 0, .3);

※text-shadowの場合は拡大pxの指定はできない

■背景：background

background-image: url(../img/header.png);　：画像指定

background-position: center;　；中央揃え

background-size: cover;　：縦横比を保持して最大幅表示

一括指定

background: center/cover pink url(../img/header.png);

※positionとsizeは一つにまとめる（順番固定）

【配置】

■注意点

・paddingはwidthやheightに足される。含めたい場合は以下のように記述する。

box-sizing: border-box;

※クラスの初めに書くこと

・marginは重なると相殺される（小さいほうが打ち消される）

・width、heightの％表示は親要素に対して決められる

■overflow ：コンテンツがdivの幅から溢れた際の挙動を制御する

・hidden ：隠す

・scroll ：スクロールで見れるようにする

■margin(外)、padding(内)の指定

padding: 上px, 右px, 下px, 左px;

padding: 上px, 左右px, 下px;

padding: 上下px, 左右px;

■画像の中央ぞろえ

margin-left: auto;

margin-right: auto;

■ボックスの種類：display

・display: block //h1,p,div,sectionなどの初期値に設定されている
・display: inline
┗左詰めで横並びに配置
┗width、heightが設定できない
┗a,img,strongなどの初期値に設定されている

・display: inlineblock
┗左詰めで横並びに配置される
┗width、heightを設定できる

■ポジションを決める：position

・position: static; ：定位置
・position: relative; ：static(初期値)の位置を起点に計算
position: relative;
top: 30px;
left: 30px;

※親要素にrelative、子要素にabsoluteを指定して相対的に配置することはよくある

・position: fixed; ：ウィンドウの左上を起点に計算

スクロールされても位置がウィンドウの中では変わらない

・absolute：絶対配置

※親要素がstaticかそれ以外かで挙動が変わる

親要素がstaticの場合
┗ウィンドウの左上を起点に配置

親要素がstatic以外の場合
┗親要素の左上を起点に配置

■vertical-align：行ボックス内での配置

baselineを基準に計算される

img {  vertical-align: top;}

■要素の重ね合わせを制御する：z-index

※何も指定しなければ後から書いたものが上にくる

各要素に

z-index: 1;
z-index: 2;

というように指定すると

数字の若い要素が上にくる

■flex ：※別資料にて

■幅MAX

・flexを使う

display: flex;

・maginを使う

margin: 0 auto;

【リスト】

■リストの文頭記号

・リストの文頭記号の変化：list-style-type

list-style-type: circle;　：白丸に変更

list-style-type: none;　：なし

※左に余白ができるのでpadding: 0;を指定する

・olスタイルを英語表記に：lower-alpha;

list-style-type: lower-alpha;

・改行の際にどこにそろえるか：list-style-position

list-style-position: inside;

・画像に変更

list-style-image: url(../image/icon.png);

■複数指定する場合：list-style

※いくつか初期値が設定されているので上書きされないように注意

list-style: circle inside url(../image/icon.png);

【テーブル】

【フォーム】

■プレースホルダー

<input type=”text” placeholder=”ここに入力してください”>

【appendix】

■継承されないプロパティを継承する：inherit

例えばborderは継承されないが

body {  border: 1px solid pink;}

h1 {  border: inherit;}

とすると継承される

■文字の装飾：text-decoration

リンクの下線を消すのにもよく使われる。

a {  text-decoration: none;}

そのほかに

打消し線

などがある

■カーソルを変える

cursor: pointer;

■画像の挿入

<img src="../img/icon-search.png" alt="search-icon">

■クリックできなくする：user-select: none;

こっちの方が強力？　pointer-events: none;

■行ボックス(inline-block)の余白をなくす：vertical-align

初期値はbaseline（文字のライン）

vertical-align: bottom;

とすれば、その要素の基準が完全に行ボックスの底に合わせられるため

余白がなくなる。

■要素に情報を持たせる～表出する：data、attr

<h1 data-subtitle=" - sub title">Title</h1>

※data-●●は自由に指定できる（呼び出すときに使用する）

h1::after {

  content: attr(data-subtitle);

}

【要素の指定】セレクタ

■注意事項

・クラスを持つ要素を指定する際は連続して書く

.thumbnails img.current　//OK

.thumbnails img .current　//NG

・特定の複数のクラスを持つ要素を指定する場合

.thumbnails.current

・詳細度

idの個数＞class,属性,疑似クラスの個数＞要素,疑似要素の個数

!important;　最優先（2つあったら後者）

■セレクタリスト

複数のクラスにCSSを適用　※カンマ区切りで要素を指定する

.top-img, h3 { //mainクラスとh3要素に適用

■全称セレクタ ※ブラウザによっては重たくなるのであまり使われない

>|??|

{

■属性セレクタフォームでよく使用する

input[type=text] {

input[class~=className] { //~を付けるとclassNameを含むとなる

//classが複数ある場合は=では反映されない

a[href^="https"] { ：前方一致

a[href$="com"] { ：後方一致

a[href*="com"] { ：部分一致

a[class=className i] ：大文字小文字を区別しない　※デフォルトは区別する

■子孫結合子　一般兄弟結合子　隣接結合子

div p { //div配下のp要素　※直下でなくても良い

div > p { //div要素直下のp要素

h2 > p { //h2と並列にあるp ※h2には反映されない

p + p { //h2と並列にあるp ※h2には反映されない　最初の1つだけ

【疑似クラス】

■ホバーエフェクト

.btn-shadow:hover{

opacity: 0.8;

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

transition: 0.4s;

}

・選択済みのラジオボタンにホバー時の装飾を固定

※inputとlabelをセットにしている前提

label:hober,

input:checked + label {

  //装飾

}

■nth-child(n) ：n番目の要素を指定 ※コンテンツ数に応じて折り返すときなど

子要素が並列して複数ある際に親要素に指定する

.main > p:nth-child(3) {

  background-color: pink;

}

※該当の要素がpではない場合スタイルは適用されない

適用したい場合は

.main > p:nth-of-type(3) {

とする。

.main > p:nth-child(3n) {　：3の倍数の要素

.main > p:nth-child(odd) {　：奇数番目の要素

.main > p:nth-child(even) {　：偶数番目の要素

.main > p:first-child {　：最初の要素

.main > p:last-child {　：最後の要素

■notで特定の要素を除くこともできる

()内のセレクタ以外の要素

.main > p:not(:last-child) { //p要素の最後の要素以外

:not(a) { //aタグ以外の要素

■focus

input:focus { //クリックしてフォーカスが当たっている除隊

body:focus-within //フォーカスが当たっている要素の親要素のスタイル変更

■out-of-range

input:out-of-range { //以下のように最小値等をしているときに範囲外になると反映

//input type=”number” min=”1” max=”10”

■invalid

input:invalid { //required属性等を指定しているときに条件を満たしていない場合に反映

■link visited

a:link { //リンクテキストの装飾

a:visited { //訪問済みリンクの装飾

■target ：アンカー（ページ内リンク）で飛んできた場合にその要素に適用

h2:target { //例えば以下のようなHTMLが指定されている場合に

//ページ内リンクで飛んできた時だけ該当のh2要素にCSSを適用

//※他のh2には適用されない

//<h2 id=”uncarName”></h2>

■その他

button:active { //クリックしている状態　クリックを離すと解除

input:checked { //チェックボックスやラジオボタンで選択されているとき

p:empty { //<p></p>のように要素内が空の時

【疑似要素】

■before、after ::で指定する　※contentの指定が必須

h1::before {

  content: '-'; //h1要素の前に『-』が入る

}

■first-letter //最初の1文字

p::first-letter { //p要素の最初の1文字目

p::first-line { //最初の行

【レスポンシブwebデザイン】画像幅の指定

■メタタグの設定

<meta name="viewport" content="width=device-width, initial-scale=1">

※content="width=device-width

　スマホの画面幅に表示領域を合わせる

※initial-scale=1

　最初の倍率を等倍にする

■レスポンシブ幅に応じてスタイルを調整（メディアクエリ）：@media

例）要素：画像・テキスト・広告の順で表示

広告は800px以上で表示

600px以上で画像・テキストを横並びにする

//599px以下のスタイル
body {
  margin: 0;
}

aside {
  display: none; //小さい幅ではasideは非表示
}

.image {
  height: 100px; //画像は横幅は自由に広がる※これじゃダメじゃね？
}

.text {
  height: 100px;
}

@media (min-width: 600px) { //600～799pxのスタイル
  section {
    display: flex; //横並びにする
  }
  .image {
    width: 200px; //画像幅の固定
  }
  .text {
    flex: 1; //ブラウザ幅で可変
  }
}

@media (min-width: 800px) {
  section {
    width: 800px; //最大幅を指定
    margin: 0 auto; //中央揃え
  }
  aside {
    display: block; //noneにしていたasaideを表示
    width: 160px; //新しく表示されるasideの幅指定
  }

・メディアタイプを指定することでスクリーン、テレビ、プリンタ、プロジェクタなど

使用する端末ごとの設定をすることもできる。

http://www.htmq.com/csskihon/009.shtml

@media screen and (min-width: 800px) {

............................................................

【appendix】

■disabled

<input class=”sample” type=”text” disabled>

//disabledをつけるだけ。ちなみにこれはcssではなく属性。

・cssでdisabledされたときにcssを変える場合は以下のように疑似要素で指定する。

.sample:disabled {}

■アニメーション

・すごくいろいろできる

https://www.webdesignleaves.com/pr/css/css_basic_07.html

・基本っぽいやつ

https://qiita.com/7968/items/1d999354e00db53bcbd8

■floatで画像が下の要素にかぶる場合

下の要素にclearを使用する。

※display:blockの要素にしか対応できない点に注意

img {float: right;}

h2 {clear: right;}

■はみ出る画像をセンタリング中央寄せ

https://www.tam-tam.co.jp/tipsnote/html_css/post10099.html

サイズを決めるbox（親要素）に

position: relative;

画像の要素に

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

・もっと簡単なのがあった

子要素に

height: 100%;

width: 100%

object-fit: cover;

これをやると親要素のoverflow: hiddenすら必要なくなる

■ブログカード

http://commonsense-design.com/web/thumbnail-hover-css/

https://copypet.jp/2225/

■テキストを右下に表示する

・それぞれの要素をdivでくくって、親要素にflex

<div class="budget-box">
    <div>
        <p class="budget-text">
            予算(月4回)税込
        </p>
    </div>
    <div>
        <p class="budget-text">
            キッズ(月4回)税込
        </p>
    </div>
</div>

.budget-box {
    height: 40px;
    margin-top: 8px;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    flex-direction: column;
}

.budget-text {
    margin-bottom: 0;
}

■ファイルアップロードフォームのCSS

既存のフォームは装飾が無くダサいうえにカスタマイズできない。

元のフォームはdisplay: hiddenで隠してしまって、別のテキストリンクを用意してlabelで紐づける。

～HTML～

<div class="row">

<label for="file_upload_top" class="link-text">トップ画像を変更</label>

//テキストリンクを用意

<input type="file" name="file" accept="image/jpeg, image/png"

  id="file_upload_top" style="display:none">

//実際のフォームは隠す

</div>

<div class="row">

<label for="submit" style="cursor: pointer;"

  class="btn btn-primary my-3 inactive" id="file-submit">送信</label>

//ボタンを用意

<input type="submit" id="submit" style="display:none">

//実際のフォームは隠す

<p id="file_upload_top_text" class="m-3 d-flex align-items-center">

ファイルが選択されていません

//ファイルが選択されたらファイル名に置き換え

</p>

</div>

～JavaScript～

※無くても良い。

　inactiveクラスはファイルがセットされたかどうかでグレーアウトの出し分けをしている

/* ファイルアップロードフォーム装飾 */

$(function(){

$('#file_upload_top').on('change', function(){

const file = $(this).prop('files')[0];

$('#file_upload_top_text').text(file.name); //ファイル名を表示

$('#file-submit').removeClass('inactive');

})

})

■トップ画像(ロゴ大)をスマホとPCでうまく表示したい

PCでは一定の大きさを維持したい。

しかし画像の大きさを維持する設定をするとスマホ表示の時に小さくなりすぎ

・場合分けをすると大変なのでimgではなく背景画像として表示する

～HTML～

<div class="cover"></div>

～CSS～

.cover {

background: url(img/dkt_search_top.png) no-repeat center center;

background-size: cover;

height:360px;

}

■改行禁止

テーブルの見出しなど、改行したくない場合

white-space: nowrap;

■命名規則

スネークケースでつける
ページ名-コンテンツ名[-配置][-詳細(アクション・状態など)]

例）

home-news
common-title
result-chart-left
survey-form-invalid-dialog

【テキスト】

■line-height：インライン要素の高さを設定する

■透明度：opacity

■色

■フォント

■配置

・２行でも１行でも上下中央寄せ

【BOX】

■線の角を丸める：border-radius

■boxに対してborderを付与すると、boxの重なり部分だけ線が太くなる問題

■背景

■影をつける：box-shadow、text-shadow

■背景：background

【配置】

■注意点

■overflow ：コンテンツがdivの幅から溢れた際の挙動を制御する

■margin(外)、padding(内)の指定

■画像の中央ぞろえ

■ボックスの種類：display

■ポジションを決める：position

■vertical-align：行ボックス内での配置

■要素の重ね合わせを制御する：z-index

■flex ：※別資料にて

■幅MAX

【リスト】

■リストの文頭記号

■複数指定する場合：list-style

【テーブル】

【フォーム】

■プレースホルダー

【appendix】

■継承されないプロパティを継承する：inherit

■文字の装飾：text-decoration

■カーソルを変える

■画像の挿入

■クリックできなくする ：user-select: none;

■行ボックス(inline-block)の余白をなくす：vertical-align

■要素に情報を持たせる～表出する：data、attr

【要素の指定】セレクタ

■注意事項

■セレクタリスト

■全称セレクタ ※ブラウザによっては重たくなるのであまり使われない

{

■属性セレクタ フォームでよく使用する

■子孫結合子 一般兄弟結合子 隣接結合子

【疑似クラス】

■ホバーエフェクト

■nth-child(n) ：n番目の要素を指定 ※コンテンツ数に応じて折り返すときなど

■notで特定の要素を除くこともできる

■focus

■out-of-range

■invalid

■link visited

■target ：アンカー（ページ内リンク）で飛んできた場合にその要素に適用

■その他

【疑似要素】

■before、after ::で指定する ※contentの指定が必須

■first-letter //最初の1文字

【レスポンシブwebデザイン】画像幅の指定

■メタタグの設定

■レスポンシブ幅に応じてスタイルを調整（メディアクエリ）：@media

【appendix】

■disabled

■アニメーション

■はみ出る画像をセンタリング中央寄せ

■ブログカード

■テキストを右下に表示する

■ファイルアップロードフォームのCSS

■トップ画像(ロゴ大)をスマホとPCでうまく表示したい

■改行禁止

■命名規則

■クリックできなくする：user-select: none;

■属性セレクタフォームでよく使用する

■子孫結合子　一般兄弟結合子　隣接結合子

■before、after ::で指定する　※contentの指定が必須