-
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 <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にスタイルをつけるというサンプルで例を紹介しています。 単色背景 単純に背景に色を付けて、視認性を高めた見出しのサンプルです。パディングなどは全く設定していません。背景が例えば赤いときは白い文字など可読性の高い色を選択する必要があります。黒のままだと滲んでしまい見づらくなります。 h1{ color: rgba(255,255,255,1); background: rgba(255,0,0,1); } 単色下線 単色の下線を引いた見出し。デ... -
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; } これだけ。ベンダープレフィックスを併記しているとこ... -
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" ... -
[IE6のバグ] brにletter-spacingを適用すると解釈がおかしくなる
たまには、文字と文字の間にスペースを入れて読みやすくするために、「letter-spacing」を入れると思います。そういう時に出くわしちゃった問題がありました。 XHTML/HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Con... -
[HTML+CSS] を利用したfloat解除（ボックスの浮きを解除）
CSS3のflex 下記の通りflexを使って対応するのがスマート。 .sample{ display:flex; flex-wrap:wrap; } 大事なのは折り返すように指定しているところ。 clearfixを使った方法 <br class="clear">だとちょっと...という時は、clearfixを使って対応していた。floatの親要素にclearfixというクラス名（任意）を付与して、cssをうまくclearできるようにしたもの。検索すればどこかのソースコードが引っかかっ... -
[IE6のバグ] floatをかけたボックスにマージンを設定すると長さが2倍になる
以下のソースコードを打込み、IE6・IE7で確認するとボックスの左にかけた10pxのマージンが10pxではなく、20pxとなって表示される。IE8、Firefox、Chrome、Safariなどではこのようなことは起こらない（右にマージンを10pxかけても同様に2倍となる）。もっとも有名な旧IE系のCSS解釈の計算バグです。 ただし、このケースのようにSample1がfloat:left;と指定している時にSample2に同じくfloat:left;とすると、Sample2の左のマ...
