skillup

技術ブログ

デザイン

backgroundやbox系のプロパティ

投稿日:2017年10月9日 更新日:

cssのbackground-imageについてちょっとまとめ。urlとかrepeatとかはとりあえずぬきで

背景画像の位置 background-postion

いわゆるどの位置で画像を表記するか。

background-position :水平位置 垂直位置

background-position: right 20px auto 背景画像を右から20px 、縦に関しては自動で表記

主にリンクのアイコン的な矢印の表記などで使われる。

background-positionは指定の単位によって原点が変わる?

背景画像のサイズ background-size

値、%指定→画像の大きさを直接決めたいとき 幅・高さの順

background-size :10px 10px
background-size :50% auto

background-size :contain 背景画像全体が表示される

横幅に対して伸縮する。

background-size :cover ボックス全体に画像が表示される。

ブロック全体を覆う。

主にメインビジュアル的な要素にして使う。

リファレンス

CSS の background-size での cover、contain、auto の違い

背景画像の固定 background-attachment

scroll ページがスクロールする。いわゆる通常のプロパティ

fixed 固定 スクロールしてもかわらない。

影 box-shadow

box-shadow (inset) 縦方向 横方向 ぼかし 拡張量 色

insetをつけると内向きの陰になる

ジェネレーター

角丸 border-radius

border-radius 半径

ジェネレーター

グラデーション background linear-gradietn

background linear-gradietn 傾き 始点 終点

ジェネーレーター

ちなみにPhotoshopのツールにもCSSを作ってくれる機能があるようです。

その他、疑似要素(before,after)で画像の大きさをコントールしたい場合は以下のようにします。


:before content image のサイズを指定する

-デザイン
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

CSSの概要 主に適用ルールについて

昨日までリーダブルコードを読みまして正しいコーディングについて書いてきました。 本日からは正しいCSSについてみていこうと。 Contents1 CSSとは?2 CSSの書き方3 CSSの挙動4 プロ …

no image

cakePHP+bootstrapでのページャー

cakePHP+bootstrapでページャーのリンクを下記のように出力したいときのメモを。 ソース コントローラーのほうでは特に設定する必要なはく、HTMLのほうで下記のように設定すればOKです。 …

no image

チェック状態のradio,checkでの要素の表示、非表示

CSS小ネタ系。 チェックボックスやラジオと隣接するテキストボックスがあって、チェックがあった時のみ表示したい。(例えばその他の自由入力欄) 完全に隣接の場合にはCSSの+が使えるんですが、そうもいか …

no image

パララックス系のギャラリー(中央ネタ)

ギャラリー的な画像を使ったときに思ったこと。下記が画像の標準的な扱い方かな・・・ 枠自体は高さも幅も決める(li要素のwidth,heightは決める) 基本は画像要素を中央揃え(positionの5 …

no image

CSSのレイアウト例 その2 部分的な多カラムレイアウト

ナビのボタンや一覧のリスト項目などfloatを使ったいろいろなバリエーションについて。 例によってサイトが具体的にどうなっているかを知りたい方は「プロとして恥ずかしくない 新・CSSデザインの大原則」 …