【html/css】サイトの高さが足りないときでもフッターを画面の一番下に固定したいときのHTMLとCSS【スマホでもOK】 – Minagawa Design Blog
【html/css】サイトの高さが足りないときでもフッターを画面の一番下に固定したいときのHTMLとCSS【スマホでもOK】 よくあるレイアウトで「ヘッダー」「コンテンツ」「フッター」という構成がありますよね。 ヘッダーは常に先頭にあるから問題ないけど、フッターはコンテンツの最下部に鎮座していてほしいのに、コンテンツの情報量が少ないと不格好な位置に来てしまう。 こういう場合はフッターは画面の下部にいてほしいですよね。 「JavaScriptでwindow.heightを取得してどうのこうの～」って方法も考えられますが、今回は「すっきりCSSだけでどうにかしたい！」という方向けの記事です。 というわけで、今回のテスト用HTMLソースはこちら <body> <div class="outer"> <header> <h1>へっだー</h1> </header> <main> <h2>めいんこん
【html/css】サイトデザインを2時間早く完成させるために
この記事は、css指定でサイトのデザインを描けるようになった人に向けて書いています。 テクニックやテンプレの話ではなく、どう取り組めば結果的に早くサイトデザインを完成させられるのか。 その考え方をツラツラと述べます。 htmlと見本デザインを見ることに時間をかける 例えば、1ページのデザインに10時間かかる場合。 html・cssにかけるのは、htmlに1時間、cssに9時間になると思います。 一方、8時間で仕上げる場合には、html2時間、css6時間の配分となります。 10時間 … html(1時間) css(9時間) 8時間 … html(2時間) css(6時間) 8時間で終わらせる場合、htmlに1時間多く費やしていますけど、そのぶんcssを3時間も減らせています。 つまり、スピードアップのポイントはhtmlにあります。 で、このhtmlの2時間ってのは何をしているのかといえば…
＜CSS＞サイトの表示速度を意識したセレクタの書き方
画面の表示速度を意識してCSSを書こう WEBページの表示速度を高速に保つことでサイトの直帰率を防げたりSEO上の観点でも有利に働くことはよく知られている事実かと思います。 2018年2月に更新されたGoogleのダニエル・アンによる研究結果ではスマホページにおいてloadingタイムが1秒から5秒に増えると直帰率は90%増加するそうです。 think with Google 表示速度を早める方法はサーバーサイド側での改善など多くの手法がありますが、CSSセレクタを最適化することでWebページの表示速度に貢献できることを知っていますか？ 『CSSセレクタの最適化』といった観点でサイトの読み込み速度を上げる方法をご紹介します。 CSSセレクタの照合は左から右？
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
