Webサイト制作

投稿日:2017年4月28日 更新日:

画面の縦幅いっぱいに背景画像を表示する

画面全体に背景画像を表示するには、 background:url('画像を指定'); background-size:cover; でできますが、 いやいや、一画面だけでなくその下にもコンテンツがあってそこには背景画像をつけたくないんだよって時に指定する方法です。
background:url('')center center / cover no-repeat fixed;
height: 100vh;
vhはviewport heightでビューポートの高さに対する割合を指定する単位です。 vwはviewport widthでビューポートの幅に対する割合です。 知らない単位だったけど、やりたいこと出来た!

- Webサイト制作
-

関連記事

display:flexを使った時のIE10のバグに対応する

display:flex;を使った時、IE11では問題なくてもIE10で見ると色々な不具合が生じることが多い。例えば、このサイトのレイアウト。クロームで見るとこんな感じまぁまぁ均等に並んでいるように見 ...

cssでlistのborderを斜め線にする

このサイトのメニューでも使ってますが、やってみたかったけどなかなか方法が見つけられなかったリストの区切り(border)を直線でなく斜め線にする方法。 目次1 まずはHTMLでメニュー作成2 スタイル ...

no image

サイト制作に役立つTips_リンク集

目次1 スタイルなどの装飾1.1 ボタンのホバーアニメ1.2 角丸とシャドウのジェネレーター1.3 グラデーションジェネレーター1.4 CSS三角形作成ツール1.5 吹き出し作成のジェネレーター1.6 ...

webサイト制作時に役立つ!メインカラーを元にカラーを選べるサイト

web制作する時にカラーの組み合わせを調べたい時、色々なジェネレーターはあるけど たとえば メインカラーがすでに決まっていて それに合うカラーが知りたい時 ってないですか?私は結構あります。で、ジェネ ...

cssだけでドロップダウンメニューを実装(軽い!)

ドロップダウンメニューをcssだけで実装できる方法があるらしい。 jsファイルの読み込みがないなら軽くていいなぁと思いやってみた。 目次1 まずはhtml2 つぎにcss3 cssの中身の解説4 高さ ...