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サイト制作
-

関連記事

no image

角丸テーブルのスタイル指定

時々使うテーブルの角丸仕様、毎回調べてる気がする。。 ポイントはborder-collapse border-collapse: collapse;ではなくborder-collapse: separ ...

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

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

Amazon Product Advertising APIを使って気づいた事

目次1 APIの使い方が分からない時は2 最低価格(MinPrice)、最高価格(MaxPrice)の結果がおかしいと思ったら2.1 価格は*100にします3 一度に取得できる情報の件数4 よく分から ...

no image

画像の拡大表示(ポップアップ)

目次1 やりたいこと2 タグを設置3 画像にクラスを付与4 スクリプトを記載5 スタイルを記載6 完成! やりたいこと 画像のポップアップがしたい! タグを設置 html内であればどこでも良いので、ポ ...

ページ読み込み時にフェードインのエフェクト【超簡単!】

jQueryの取扱が苦手な私でもすぐに実装することができたフェードインエフェクト。 トップのイメージ画像の上にテキストをふわっと表示させたいなーと思い調べてたら、かなりシンプルな記述でフェードインエフ ...