カテゴリー: コーディング

google mapのiframeタグをタグで囲み、cssを適用するとレスポンシブ対応可能になります。
.google-mapWrap {
position: relative;
padding-bottom: 300px;
height: 0;
overflow: hidden;
}
.google-map-wrap iframe,.google-map-wrap object,.google-map-wrap embed {
width: 100% !important;
height: 100% !important;
　　　　 position: absolute;
top: 0;
left: 0;
}

liに「list-style-type: decimal;」のプロパティで自動で順番を付けることができます。

.test_count h3 {
counter-increment : chapter ;
}
.test_count h3:before {
content : “第” counter(chapter) “話” ;
padding-right: 10px;
color : #ccc;
}
これでh3タグが現れた順に番号が付けられます。

カーニングもプロパティで指定するだけで自動的にできます。

文書の見出しをカーニングしておくことでサイトレイアウトが綺麗に見えます

cssのfont-feature-settingsプロパティを指定するとOpenTypeフォントの間隔に関する情報を使って、自動的にカーニングが行われます。

paltだと全部の文字が対象になります。ですが、記号や句読点も詰まります。

レスポンシブ構築の時など、PC用にmax-widthを使用した時、スマホではmax-widthリセットをしたい場合、
『auto』を指定しただけでは、効果はないので、以下のようなセレクタを設定します。

.test{
max-width:initial;
}

各属性を初期値に戻すことのできる「initial」を設定します。

display:inline-blockなら可変幅で、内包する要素にtext-align:centerを指定することで、中央寄せすることもできます。ですが、改行されないので、要素を中央寄せして縦に並べようとしたのに、幅によっては横に並んでしまうことがあります。

そこで、可変幅にしつつ、改行が入るようにするためにdisplay:tableを使います。

.test {
display: table;
margin:0 auto;
}

CSS「pointer-events: none;」はクリックを無効化するのに便利なセレクタです。
■html

■css
.test{
pointer-events: none;
}

初期値はautoで、普通の状態に戻したい場合に設定します。

linear-gradientは背景をグラデーションにできます。
カラーコード[#xxxxxx]で「,」で区切って入力します。
■html

■css
.border{
width:100px;
height:1px;
background:linear-gradient(-90deg, #00FFFF, #F6FF00);
margin:auto;
}

条件に一致しない時にスタイルを適用したい時、否定疑似クラス:not()を使用すると便利です。not(h2)で指定すると、bodyにも「h2以外」が適用されてしまうので、クラス名をつけて詳細まで指定します。

.header :not(h2) {background: green;}

cssでのボックスの幅は width と padding と border-width の合計となります。
width : 250px;
padding 20px;
border-width : 20px;
実際の幅は330px

box-sizing:border-box を指定すると
width に書いた値が padding,border-width を含んだものになるのでwidth:250px;となります。

レスポンシブの際に横幅100%にすることが多い時
width: 100%;
height: auto;
この場合にborderを指定するとはみ出てしまいますが、box-sizing:border-box ではみ出し防止になります。