-
レスポンシブWebデザインの概念・メディアクエリのサンプル
レスポンシブWebデザインはCSSで、デバイス・ブラウザの画面幅によってレイアウトの切り替えを行うメディアクエリ。画像にmax-width:100%;やwidth:100%;を使って、親要素の幅に合わせ、画像が比率を保ったまま拡大・縮小表示されるフルードイメージ。レイアウトを固定幅ではなく、画面幅に合わせて要素を可変にレイアウトするフルードグリッド。 メディアクエリフルードイメージフルードグリッド この3つをすべて使わな... -
HTML+CSSでformを装飾するサンプル／方法
シンプルな横並びフォーム CSS .search-sample .search-sample-box { display: flex; justify-content: space-between; width: 100%; } .search-sample .search-sample-box input[name="s"] { display: block; border-radius: 0; width: 80%; padding: 1em 0; border: solid 1px #bfbfbf; } .search-sample .search-sample-box input[type="submit"] { display: block; width: 19%; padding: 0; border: non... -
HTML+CSSでフローティングバナーを作成する方法
フローティングバナーは単純。固定するだけと考えたら、邪魔しない場所に設置するだけ。 HTML <div class="fix"> 固定したい内容 </div> CSS .fix{ position:fixed; right:10px; bottom:10px; border:solid 1px #000; background:#fff; } 注意点 注意点としては、重なるコンテンツを邪魔していないかどうか、フッター付近に固定する場合は、フッターのコンテンツとかぶっても余裕があるように、body下... -
HTML+CSSでフッターを固定する方法
HTML <div class="fix-footer"> 固定フッター </div> CSS body{ margin:0 0 10vw; } .fix-footer{ width: 100%; position: fixed; bottom: 0; background: rgba(255,255,255,1); } 注意 注意点としては、下部に固定するため、固定した文のマージンを計算して取っておいたほうがいい。 -
HTML+CSSでヘッダーを固定する方法・アンカー位置を調整する方法
position:fixedを使う方法 基本的な考え方としては、ヘッダーを固定して、その固定分高さを確保しておくというもの。 注意しなければいけないのはアンカーの位置がずれてしまうので、それを調整しておく必要がある。 HTML <div id="header"></div> CSS #header{ position:fixed; width:100%; } -
HTML+CSSでランキング部分のレイアウトする方法／サンプル
通販サイトなどでよく見かける、商品の売上やピックアップランキングをレイアウトするHTML+CSSのコードスニペット 5つのランキングと商品名 リンク付きの商品サムネイルと商品名をリストで並べる方法。 HTML <div class="ranking"> <ul> <li><a href="#"><span class="thumb"><img src="images/thumb-rank-01.jpg" alt=""></span><span class="item-name">商品名1</span>&... -
HTML+CSSで商品一覧のレイアウトする方法
HTML <div id="index"> <div class="item-list"> <h2>ランキング</h2> <p>商品一覧で商品名の長さ等で縦揃えがばらばらになってしまうときに、flexを使って揃える。</p> <ul> <li> <a href="#"> <span class="thumb"><img src="images/item-rank1.jpg" alt="1位"></span> <span class="name">商品名商品名商品名商品名商品</span> </a> <span... -
★HTML＋CSS 見出しのデザインサンプルコードスニペット
h1にスタイルをつけるというサンプルで例を紹介しています。 あなたの作成する見出しで使用する際は、適宜都合の良い記述方法で、設定してくださいね。 太字にする フォントを太字にするだけ。 HTML <div class="heading-1-1">見出し見出し見出し見出し</div> CSS .heading-1-1{ font-weight: bold; } デモ デモを見る フォントを太字・大文字に フォントを太字・大文字にした... -
CSSのflex・floatを使ったWebサイトのレイアウト例
flexのみ flexやflex-directionなどは親要素に記載する。最初間違ってしまうのは、小要素に記載してしまったんだけれども...。 今までと同じように親要素、レイアウトしたい小要素で構成する。 <div class="sample"> <ul> <li>AAA</li> <li>AAA</li> <li>AAA</li> </ul> </div> CSSが違う。 .sample ul{ display:flex; } これだけ。ベンダープレフィックスを併記しているとこ... -
CSSにおけるbackground（背景）のサンプルコードスニペット紹介
背景のサンプルコードスニペット。 単色背景色の指定 backgroundや、background-xxxなどは背景のスタイルを定義します。文字の背景・ボックス・ブロック・表・テーブルやリストなど様々な箇所の背景の指定が可能。 背景は単色を始め、グラデーション、画像を使ったタイル状の背景設定や複数の背景の指定も可能です。 HTML <div class="background-1">背景を赤に</div> CSS <style> .backgroun... -
HTML+CSS：リストでナビゲーションを作成
HTML＋CSSでナビゲーションを作る時の自分用メモ。 シンプルなリストナビゲーション 中央揃えのシンプルなテキストナビゲーション。テキストリンクに対して、下線を引いたりあるいはマウスホバーした時に色が変わるように工夫すると良い。 display:inline-block;を使ったレイアウト。 HTML <nav> <ul> <li><a href="#">sample1</a></li> <li><a href="#"&g... -
IE6のバグ：floatしている要素にマージンを指定すると幅が2倍になる
IE6の中でももっとも有名で鬱陶しいバグの一つ。floatをしている要素にマージンを指定すると幅が2倍になってしまう。そのため、設計通りに横に並べようとしたときにうまくいかなくなる。 XHTML/HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" ...
