※の文章を改行してもきれいに見せる

通常だとこれを表示した際、PC画面では問題なく表示されるのですが、
ブラウザ幅が狭くなり複数行表示になった場合、

※の下に文章が続き見た目がカッコ悪くなってしまいます。

これを防ぐには以下のcssを記載します。

※のしたは空白になりキレイになりました。

backgroundに複数の画像・背景色を入れる

背景に複数の画像・背景色を入れたいと以下の場面で思うことがあります。

①画像を二つ入れる
例:2カラムのサイトを作成するとき左のサブカテゴリー内で[画像・文字・矢印]としたい

②画像と背景色を入れる
例:背景に色をつけつつ、画像も入れたい

今日はこの2場面に対してのスタイルの付け方をまとめます。

【特徴】
・①はカンマが必要。
 ②はカンマが不要です。
・わざわざ、背景用のdivを入れる必要がなくなる。

シンプルなコードを目指します。

リストの中で画像を横並べ

リストの中でタイトルと画像を並べたいとき

リストタグの中でhタグとulタグを使用し、ulタグの中でリストタグを用いてimgタグを使用します。
また、imgに用いているリストタグをインライン要素にすることで横並びにします。

【特徴】
・リストタグの中でタイトルと画像を区別できる
・ulとliでのシンプルかつキレイなコードが書ける
・スタイルもシンプル

CSS:画像トリミング

画像の一覧を表示するときなどに、画像サイズが統一されていないが為に、
コーディングに苦労した経験はおありではないでしょうか。

今回は、そんなときに便利なCSSプロパティをご紹介します。

その名も「object-fit」

こやつ、画像の縦横比を維持しつつ、トリミングしてくれるすげえ奴です。

たとえば、こんな画像があったとします。

縦長と横長の画像を正方形でトリミングするには、

こうなります。すごい!便利!

で、サポートブラウザですが、いつも通り「Can I Use」を見てみると…

例によってIE系は全滅です。残念でしかない…。

IEの対応策や、詳細については下記のページで解説されています。

参考:http://www.webcreatorbox.com/tech/object-fit/

CSS:ベンダープレフィックス

ベンダープレフィックスとは何か

ベンダープレフィックス(接頭辞)とは、cssのプロパティの頭に付ける識別子のことで、
ブラウザごとに記述が決まっています。

-ms- ・・・・・・ Internet Explorer
-webkit- ・・・・・・ Google Chrome、Safari
-moz- ・・・・・・ Firefox
-o- ・・・・・・ Opera

なぜこういった記述が必要かと言うと、草案段階のcssプロパティを、
先行して実装、ブラウザ上に動作させる、という効果があります。

例えばこんな風に書きます。

ですが、何でもかんでも付ければ良いというものではありません。
プロパティごとに必要最低限のプレフィックスだけ付けることが推奨されます。

また、草案から正式に勧告されたプロパティについては、プレフィックスを外すべきです。
ですが、そういった現状に気づかずに、正しいプレフィックスが付けられていない事が多々あります。

最新のプレフィックス事情については、下記のサイトで分かりやすくまとめられています。

参考:http://qiita.com/sdn_tome/items/42197e443134478befaf

Opera用のプレフィックスが今では意味をなさないものになっているというのは知りませんでした。

精度の高いコーディングをするためには、こういった最新の動向は常にチェックする必要がありますね。

属性セレクタでCSSを適用させる

■ポイント
・タグに直書きされている属性でセレクタを選択できる。
・いじれれない部分にCSSを適用させる際に便利

参考:意外と知らない!?CSSセレクタ20個のおさらい

CSSのみで作るドロップダウンメニュー

■ポイント

・外側のナビの各項目の中に入れる入れ子構造にする
・疑似クラス:hoverとdisplay:none; display:block;で表示を切り替える

■HTML

■CSS

CSS : selectbox

セレクトボックスの装飾に独自のスタイルを当てる方法です。
まずはブラウザがデフォルトで付けているスタイルを無効化します。

IEの場合には下記のように記述します。
※IE10では有効ですが、IE9,IE11では上手く効かないようです。

近く、WindowsVistaのサポートが切れ、Vistaの標準ブラウザである、
IE9をサポート外とする制作会社も増えてくると思いますが、
IE10、11も癖がありますので、対応にはまだまだ悩まされそうですね。

:first-child :first-of-type, :nth-child(), :nth-of-typeなど

■1番最初の子要素に適用
:first-child

■1番最後の子要素に適用
:last-child

■親要素の中に他の子要素があっても、適用するセレクタの1番最初の子要素に適用
:first-of-type

■親要素の中に他の子要素があっても、適用するセレクタの1番最後の子要素に適用
:last-of-type

■n番目の子要素に適用(子要素の種類は問わず上から数えてn番目の子要素につく)
:nth-child(n)

■親要素の中に他の子要素があっても、適用するセレクタのn番目の子要素に適用
:nth-of-type(n)

■参考  http://www.vanfu-vts.jp/blog/2014/09/first-child_last-child/

■参考 http://www.htmq.com/selector/first-of-type.shtml