横揺れは、スマホの画面幅より大きな要素がある場合発生します。
はみ出している要素の分だけ横にスクロールされます。
横揺れが原因で下にスクロールするのが難しくなって、離脱されてしまうことが多くなってしまうので、あまり良くありません
よくある原因としては、
表組みで使われる tableタグ
googlemapやfacebookなどでも使われる iframeタグ
コードなどの記載で使われる preタグ
などですが、positionで指定ミスで検証ツールやandroidで見ていても横揺れは発生しないのに、iphoneのみ発生してしまう、厄介な現象もあるので、注意が必要です。
なので、対策としてコードなどの記載で使われる [pre]タグでは
.sample { overflow: auto; }
.sample { word-wrap: break-word; }
広告が原因で横揺れしているケースでは、
広告作成時に「レスポンシブ」を選択することが一番です。
今回は便利なcssのセレクタ指定方法を紹介します
#example>* {
margin: 0 10px;
}
親に内包れる直下要素のみを対象に指定できます。
親要素であるexampleの直下の要素すべてにマージンが設定されます。
div[id^="sapmple"] { /* 属性 ^=" 文言"]で、【属性】が【文言】で始まる要素 */
color: green;
}
p[class$="Txt"] { /* 属性$=" 文言"]で、【属性】が【文言】で終わる要素 */
margin: 10px;
}
div[id*="Box"] { /* 属性*="文言 "]で、【属性】に【文言】を含む要素 */
padding: 5px;
}
#sapmpleTxtBoxとセレクタ名を指定していたなら、上記の前方一致と後方一致、部分一致にあてはまります。
文字の色や背景色などに多く使うことが多いですが、
色指定を16進数指定する方法です。
現在主流といってもいいほど多く使われる指定方法です。
.example{
background: #f0f;
}
.example{
background: red;
}
カラーネームで、たくさんの種類の色を指定できます。
表示されない色などブラウザによっては存在することがあります。
カラーネーム
コチラでは文字の透明度はそのままに、背景の色を透過できたり便利な指定方法です。
.example{
background: rgba(赤(0～255),緑の量(0～255),青の量(0～255) 0.8);
}
色相 = Hueは、0～359の値で指定します。
これは、色相環の角度になります。
彩度 = Saturationです。
この値は、0%～100%で指定します。
輝度 = Luminance
この値も、0%～100%で指定します。
.example{
background: hsl(0,100%,50%);
}
.example{
background: hsla(180,100%,50%,0.5);
}
minmax()の値には、適用する要素の最小値と最大値を指定することができます。
minmax(min, max)
min, maxにはには、次の値を利用できます。
1,px単位
2,%単位
3,fr単位
4,auto
5,max-content
6,min-content
.example {
display: grid;
grid-template-columns: minmax(200px, 300px) 1fr 1fr;
}
ビューポートのサイズを変更すると、
最初の要素は100px〜200pxの間の幅になり、2番目と3番目の要素は残りの空きスペースを均等に占めるように横幅を可変させます。
IE, Edgeではベンダプレフィックス（-ms-）を加える必要がありますが、
minmax()はすべてのブラウザにサポートされています。
pxや、%, em, rem, vw, vhなどの相対単位を使っても、
異なる単位間で計算することができる「calc()」での使用法です。
「calc()」は2つの利点があります。
1.異なる単位で計算することが可能です。例えば、相対単位（vw, vhや%）,
絶対単位（px）を組み合わせることができます。
2.ブラウザでの値が動的になり、ビューポートの変更に合わせて適応できます。
.exsample{
width: calc(100% - 10px);
}
calc()」の実装例: 要素のセンタリング
要素をボックス内で上下左右、中央にセンタリングすることができます。
.exsample {
position: absolute
top: calc(50% - 100px);
left: calc(50% - 100px);
}
上記の例では縦、横ともに100pxのボックスの場合上下中央の配置となります。
今回はCSSのコメントアウトの重要性についてです。
コメントアウトなんてせずにcssの記述をしていると、書いている人にとっては良いでしょうが、
メンテナンスする人にとっては、読みにくいCSSを書いていることになります。
CSSに限らずdivの閉じタグなど重要なので入れていくほうが良いでしょう。
■CSS コメントアウトの例
一行
width:100px; // コメントアウトの内容
複数行
/* コメントアウトの内容 コメントアウトの内容 コメントアウトの内容 */ width:100px; // コメントアウトの内容
上記が基本的な書き方となりますが、
いろいろなデザインにして、読みやすくすることもできます。
/* * * コメントアウトの内容 */
/*------------------------------- コメントアウトの内容 -------------------------------*/
コメントアウトを利用するのが面倒くさいと思う人もいるかもしれませんが、
後々のメンテナンスや修正で非常にわかりづらいと時間の無駄になったり、面倒なことになります。
Creative CloudのCreative Cloud Extractを使用すれば、
スライスを自動で行ってくれたり、CSSを自動生成してくれます。
https://assets.adobe.com/
上記の、サイトにアクセスしてPSDをアップロードして、
「詳細」「アクティビティ」「Extract」のメニューから「Extract」をクリックします。
Creative Cloud Extract 画面では、
選択した要素に対し、右メニューにcssが表示されたり、フォント、カラー、レイヤーの選択までできてしまいます。
できることとしては、
1.画像を書き出す
2.テキストをコピー
3.グラデーションのCSSを自動生成
などです。
Creative Cloud Extractだけでなく、DreamweaverにもExtractが入っています。
サイトのコーディングをしていると「先頭や最後の要素のみに対して指定がしたい場合があります。
そんな時に便利な
nth-childとnth-of-typeですが使い分けとしては
nth-child(n)
ｎ番目の指定された要素に適用
指定された要素でなければ未適用
nth-of-type(n)
指定した要素のｎ番目に適用
上記となりますが、
【例】
タイトル
文言
サブタイトル
上記の例で使用すると
h2:nth-child(1)では
最初の要素はh1のため適用はされません
h2:nth-of-type(1)
間にほかの要素を挟んでも初めのh2に適用されます。
nth-childを主に使う人も多いと思いますが、
nth-of-typeも知っておくとコーディングで役に立ちます。
プロパティcounter-incrementを使うと、
liなどの要素に番号を自動的に付与することができます。
リスト（list-style-type: decimal）のような感じです。
counterを適用する要素に対しbeforeやafter要素を付け
プロパティでカウンタ名を指定することで連番をつけることができます。
ol {
counter-reset: li;
list-style: none;
padding: 0;
margin-bottom: 4em;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
横並びにしたい要素にdisplay:flexを指定すると、その子要素が並列になります。
簡単に導入するならば、CSSで「display:flex」というスタイルを指定するだけです。
■html
また、上下左右中央寄せは
.flexBox {
display: -webkit-flex;
display: flex;
justify-content: center;
align-items: center;
}
で指定します。
横並びにするならば、inline-blockやfloatなど選択肢はありますが、
flex-directionプロパティを使うと、HTMLはそのまま要素の順番の変更が可能です。
.flexBox {
display: -webkit-flex;
display: flex;
}
.flexBox li:nth-child(3) {
-webkit-order: -1;
order: -1;
}