CSSに関する私的なメモです。書いた本人にしかわからない所が多いです。

メモ

セレクタの指定方法

1. * 全ての要素に適用
1-1. 例 *{}

2. .class 指定したクラスに適用
2-1. 例 .className{}

3. #id 指定したidに適用
3-1. 例 #idName{}

4. EF 同時に満たす要素に適用(スペース無し)
4-1. p.className{} ←pでclassNameのクラス名を持つものに適用

5. E F 子孫要素に適用(間にスペース)
5-1. 例 p strong{}

6. E > F 子要素のみに適用(間にスペース)
6-1. 例 div.className > a{} ←直下のa要素のみに適用される(孫要素には非適用)

7. E + F 隣接要素に適用(間にスペース)
7-1. 例 h1 + p{} ←h1に隣接しているpのみに適用される

8. :first-child 最初の要素にだけ適用
8-1. 例 p:first-child {} ←最初に現れるpのみ適用
8-2. 例 .className p:first-child{} ←.className以下の最初の要素がpの場合のみ適用(注意:間に別の要素が入っていたらその別の要素もカウントされる)

9. :first-of-type 指定要素種の最初の要素にだけ適用
9-1. 例 .className p:first-of-type{} ←.className以下の最初のpにのみ適用(間に他の要素が入っていてもp要素のみカウントされる)

10. :not(X) Xだけ除外して適用
9-1. 例 p:not(.className){} ←.className以外のpに適用
9-2. 例 div#idName .className:not(:first-of-type){} ←idName以下のclassNameのうち最初の要素以外に適用

ブロック要素とインライン要素

1. ブロック要素
<address>、<blockquote>、<center>、<div>、<dl>、
<fieldset>、<form>、<h1>-<h6>、<hr>、<noframes>、
<noscript>、<ol>、<p>、<pre>、<table>、<ul>、<li>

2. インライン要素
<a>、<abbr>、<acronym>、<b>、<basefont>、<bdo>、
<big>、<br>、<cite>、<code>、<dfn>、<em>、<font>、
<i>、<img>、<input>、<kbd>、<label>、<q>、<s>、
<samp>、<select>、<small>、<span>、<strike>、
<strong>、<sub>、<sup>、<textarea>、<tt>、<u>、<var>

画像の左右中央、サイズもフィット

画像をの縦横比を保ったまま親要素の範囲に納めて、最大サイズは原寸大で、かつ左右中央配置する方法
.img{
display: block;  ※画像はインライン要素なのでblok化しないとmarginが使えない
width: auto;    ※幅を親要素に合わせる
height: auto;   ※高さを親要素に合わせる
max-width: 100%;  ※幅は原寸大を超えない
max-height:100%;  ※高さは原寸大を超えない
margin-left: auto; ※左マージン 左右中央配置のため
margin-right: auto; ※右マージン 左右中央配置のため
}

コンテナ幅を越えたセクションの作り方

※この方法はいまいち良くないので使わない。

下のcssで画面の両端まで領域が広がる。
.breakout {
margin-right: calc(50% – 50vw);
margin-left: calc(50% – 50vw);
}

画像の下に隙間ができてしまう

原因:画像配置のデフォルトはbaseline(アルファベットのp文字の一番したの位置)であるため。
対処:cssで画像の配置をbottomにする。→ img {vertical-align:bottom;}

ダミー画像を使う

下記を入力。サイズや色も変えられる
<img src="http://placehold.it/640x340/27709b/ffffff">

影の設定(box-shadow)

box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.4) inset;
1番目の値:水平方向の影のオフセット距離 正右、負左
2番目の値:垂直方向の影のオフセット距離 正下、負上
3番目の値:ぼかし距離 値が0の場合には端がくっきり
4番目の値:広がり距離です。正は全方向に拡大、負は縮小
色を指定すると、影がその色になる。insetを指定すると内側の影
4番目の広がり距離をマイナスの値にすると下だけに影がつく

border-radius

border-radius: 100px 25px 50px 50px / 50px 25px 50px 25px;
左上、右上、右下、左下 の順(時計周り)
省略すると対角線上の角と同じ値の指定となる
楕円にする場合は / で区切る。水平方向/垂直方向の楕円半径

notosansフォントがよい。

※下記方法をfirefoxでやったがうまくいかず。要調査。
ウェブでダウンロードできるウェブフォント
cssに以下を記述
@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
その後以下でフォント指定。
font-family: ‘Noto Sans Japanese’, sans-serif;<span class=”s2″> </span>

上下左右の指定方法

1つ [上下左右]
2つ [上下 左右]
3つ [上 左右 下]
4つ [上 右 下 左]

text-align:justify

テキストを両端そろえにする。これを指定すると文章の両端のラインがそろうため、borderの線をひいてなくても何となく区切りのラインを感じ取れるようになる。

line-heightの推奨値(単位はつけない)

適度なかたまり感=1.5  少し余裕あり=1.7  けっこう広め=2.0

上下の中央配置(1行の場合)

子要素のline-height=親要素の高さとし、さらに子要素にvertical-align:middle; を指定する

上下の中央配置(2行以上の場合)

1.親要素にposition:relativeを指定しておく
2.(子要素に)センタリングしたい要素を絶対配置(position:absolute)に
3.(子要素に)top: 50%で親要素から上から50%の位置に
4.(子要素に)transform: translateY(-50%)でズレを補正

特定のリンクをgoogleボットが参照しないようにする

<a href=”リンク先ページのURL” rel=”nofollow”>アンカーテキスト</a>

-webkitのこと

webkitはSafariやChrome系mozはFirefox系
Safari, Chromeで文字のアンチエイリアスが柔らかくなる→ -webkit-font-smoothing: antialiased;
Firefoxで文字のアンチエイリアスがやわらかくなる→ -moz-osx-font-smoothing: grayscale;
スマホのchromeで画面を横にしたときにフォントサイズが変わらないようにする→ -webkit-text-size-adjust: 100%;

flexコンテナ内のflexアイテムのサイズについて

1. 固定幅にしたい場合
flex-growを0、flex-shrinkを0、flex-basisを固定したい値(300pxなど)、とすると伸び縮みせずに固定幅になる。
【例】 flex: 0 0 300px;

2. ディスプレイからはみ出す症状の場合

2-1. 原因
flexアイテムの最小幅は、「A:flexアイテムに明確に指定した幅」か「B:flexアイテムの中の要素(divとかpreとか)に明確に指定した幅」のいずれか小さい方となる。
例えばAでflexアイテムにwidth=500pxと指定するとブラウザの幅を500pxより小さくしてもflexアイテムは500pxよりも小さくは縮まずにブラウザからはみ出すことになる。
2-2. 対処:
flexアイテムに下記の通り指定する
width: 0px;
flex: 1;

2-3. 説明
1行目で幅0pxとすることで、最小で0pxの幅までflexアイテムが縮むため、ブラウザの幅を狭くしてもブラウザからはみ出さなくなる。2行目でflex:1とすることで横に広がれる余地があれば自動で広がる。

2-4. よくある失敗
Bのケースでありがちだが、flexアイテム内の要素(divとかpreとか)に幅を指定してあると、flexアイテムがその幅よりも小さく縮まなくなる。特にpreは幅を指定していないにも関わらず暗黙的に<pre></pre>で囲まれた部分の幅が使われてしまう模様。その場合は、「2-2対処」とおりに対処する

2-5. 参考になったサイト
(flexboxレイアウトで内容がはみ出す理由)
http://nanto.asablo.jp/blog/2016/04/03/8063943

flexの例が分かりやすいサイト

CMANというサイトがとてもわかりやすい。コードサンプルあり。
https://web-designer.cman.jp/css_ref/abc_list/flexbox/

flexの標準対応状況

IE-PC 11~対応
Firefox-PC 22~対応
Chrome-PC 28~対応
Chrome-Android 35~対応
Androdid標準ブラウザ 4.4~対応
Safari-PC ※非対応(6.1~は display:-webkit-flex で必要)
Safari-iOS ※非対応(7~は display:-webkit-flex で対応)

スタイル適用の優先順位

スタイルがかぶった場合は下記の点数の合計が大きいほど優先
指定方法:例/点数
全称セレクタ:*:0
タイプセレクタ:p:1
擬似要素:first-child:1
擬似クラス:[type=”text”]:10
classセレクタ:.fugafuga:10
idセレクタ:#piyopiyo:100
要素に直書き:style=””:1000

スタイルの強制適用

!importantをつける。例→ #AAA a{font-size: 10px !important;}

スタイルが継承されるもの

テキスト関連

color テキストの描画色
text-align テキストの寄せ
text-indent テキストのインデント(字下げ)
text-transform 大文字・小文字表示

フォント関連

font フォントのプロパティ 一括
font-family フォントファミリー
font-size フォントサイズ
font-style フォントスタイル
font-variant フォントの小文字の扱い
font-weight フォント太さ

テキスト 間隔・空白・方向

letter-spacing 文字間隔
word-spacing ワード間隔
line-height 行の高さ
white-space 半角スペース・タブ・改行の表示方法
direction 文字表記の方向

リスト関連

list-style リストスタイル 一括
list-style-image リストマーカー 画像
list-style-position リストマーカー 位置
list-style-type リストマーカー 種類

テーブル関連

border-collapse テーブルの隣接セルのボーダーの扱い

その他関連

cusor マウスカーソルの形状

marginの相殺

marginは重なると相殺される。
paddingは重なっても相殺されない。

paddingの要素範囲

paddingはpadding部分も要素とみなされるので背景色などもpadding部分に適用される。

グラデーション

[css]
background-image:-webkit-gradient(
グラデーションの方向
, 開始位置
, 終了位置
, from(開始色)
, color-stop(位置, 途中色)
, to(終了色));

background-image: -webkit-gradient(
linear
, left top
, left bottom
, from(#b2b2ed)
, color-stop(0.49, #5050a5)
, color-stop(0.50, #1c1c60)
, to(#050519));

background: linear-gradient(to bottom, blue, white 80%, orange);

ベクター画像作成サイト

https://mondrian.io/files/local/ryQ0S26yf

アンケートフォーム作成サイト

Typeform
https://admin.typeform.com/form/6201311/fields/#/