CSSの勉強メモ
CSSに関する私的なメモです。書いた本人にしかわからない所が多いです。
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; １番目の値：水平方向の影のオフセット距離 正右、負左 ２番目の値：垂直方向の影のオフセット距離 正下、負上 ３番目の値：ぼかし距離 値が0の場合には端がくっきり ４番目の値：広がり距離です。正は全方向に拡大、負は縮小 色を指定すると、影がその色になる。insetを指定すると内側の影 ４番目の広がり距離をマイナスの値にすると下だけに影がつく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>上下左右の指定方法
１つ [上下左右] ２つ [上下 左右] ３つ [上 左右 下] ４つ [上 右 下 左]text-align:justify
テキストを両端そろえにする。これを指定すると文章の両端のラインがそろうため、borderの線をひいてなくても何となく区切りのラインを感じ取れるようになる。line-heightの推奨値（単位はつけない）
適度なかたまり感＝1.5 少し余裕あり＝1.7 けっこう広め＝2.0上下の中央配置（1行の場合）
子要素のline-height＝親要素の高さとし、さらに子要素にvertical-align:middle; を指定する上下の中央配置（2行以上の場合）
１．親要素にposition:relativeを指定しておく ２．(子要素に)センタリングしたい要素を絶対配置（position:absolute）に ３．(子要素に)top: 50%で親要素から上から50%の位置に ４．(子要素に)transform: translateY(-50%)でズレを補正特定のリンクをgoogleボットが参照しないようにする
<a href=”リンク先ページのURL” rel=”nofollow”>アンカーテキスト</a>
コメント
記事No.413