タグ: Webサンプル

Webサイトなどで使用できそうなサンプルコードの紹介やアイデアなど。Webのコードというものは一部の特殊な処理や難しいものを除けば自由でみんなが遣い回せるところは共有しあって実現したいことを簡単に行えるようにしておきたいところ。

サンプルのコードがあれば、それを組み合わせること・アレンジするに力を注いで、やりたいことをやればいい。

サンプルのコードは、他の先人の知恵をもとに活用したり、あるいはそれよりも良いものが見つかったならば、新しく共有するというのもいい。共有する、使えるソースコードを紹介するということ、それはそれで先人に対する敬意や感謝の違った形での表現でいいと思う。

    レスポンシブWebデザインの概念・メディアクエリのサンプル

    レスポンシブWebデザインはCSSで、デバイス・ブラウザの画面幅によってレイアウトの切り替えを行うメディアクエリ。画像にmax-width:100%;やwidth:100%;を使って、親要素の幅に合わせ、画像が比率を保ったまま拡大・縮小表示されるフルードイメージ。レイアウトを固定幅ではなく、画面幅に合わせて要素を可変にレイアウトするフルードグリッド。 メディアクエリフルードイメージフルードグリッド この3つをすべて使わな...

    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のdisplay:tableを使って縦方向の中央揃えレイアウトを実現する

    floatを使って横並びレイアウトを実現することが多いが、display:table;を使って実現するのも手。 これを使用することにメリットというのは、縦方向の揃えが可能になるということ。 縦の中央揃えさえ綺麗になれば、大きさが左右揃っていなくても美しく見えるケースなどには利用できる。 試しにやってみては? display:flexを使った方法 <ul>を使用しなければいけないというわけではないですが、よく使うレイアウトで...