jQuery基礎講座：ウィンドウサイズを取得してブラウザ100%のぴったりHeightを指定する！ | 株式会社パナレア
東京都中野区を中心としたホームページ制作会社『PNRA CO.LTD.,』のブログ。日々の業務上での発見やアイディア、Tipsなどを随時更新していきます。<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script> //開いた画面の高さを取得 var WindowHeight = $(window).height(); //WindowHeightは変数のため任意の名前をつける $(function(){ if(WindowHeight > 320){ //開いた画面が320px以上なら実行 //body要素に高さを書き込む $('body').css('height',WindowHeight+'px'); } }); </scrip
CSS3とjqueryでブラウザ縦横いっぱいに画像を表示する方法 |
ブラウザ画面全体に画像を配置したいとき、 横幅はcssで「width:100%」とすればOKですが、 縦幅は、使う画像の縦横比率に左右されてしまいます。 通常はそれでも問題ないのですが、 ブランディングサイトのTOPページなどは、 ファーストビューを画面いっぱいの写真で埋め、 スクロールするとニュースなどのその他のコンテンツが出てくるようにしたい、 といったニーズがあります。 どのようなブラウザサイズでも常に縦横いっぱいに画像を配置するには、 CSS3プロパティとjqueryが使える環境であれば、下記の方法で行えます。 html: <div id='main-visual'> </div> CSS: #main-visual{ width: 100%; height: 100%; background-image: url('表示したい画像'); background-position:c
ファーストビューをフルスクリーン対応デザインにしてみた
もうひとつの運営サイト「大切な記録」のキービジュアルをフルスクリーン対応にしてみました。フルスクリーンに耐えさせる画像のチョイスは ボカしていてもビジュアルとして成り立つ フルスクリーンに耐えられる大きさ 被写体が引いてある といったところでしょうか？キャッチコピーなどの文字周り系は完全に別画像にしたほうが良いでしょう。今回僕は「ボカしていてもビジュアルとして成り立つ」画像を用意しました。シングルページにする想定ではありませんでしたが、そこそこ大きな画像ができたのでもしかするとそのうちシングルページになっているかもしれませんが今回はキービジュアルのみで、スクロール等の仕掛けも無しです。あくまでファーストビューのみフルスクリーンになるていです。 .height()で高さを取得する 実装したサイトはレスポンシブです。PCとタブレットはフルスクリーンでもいいですが、スマホのポートレートがフルスク
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
