ヘッダとフッタを固定して常に表示 « (X)HTML+CSS Tips « XHTML+CSS Webサイト制作Tips « ScuderiaWeb
少し前までのWebサイト制作ではフレームによって簡単に実装されていましたが、Web標準が重視されフレームの使用がご法度になった今、画面全体がスクロールするWebサイトが一般的になりました。しかし、コンテンツ部分が長くなると、コンテンツ上部にあるメニューボタンの利用が不便になるなど、ユーザビリティの低下も否めません。 好みや慣れもあると思いますが、XHTML+CSSでフレームのようにヘッダとフッタを画面の上下に固定し、常に表示する方法をご紹介します。 ページの情報量が少ない場合も画面最下部にフッタを表示する方法は、フッタ固定で紹介しています。 サンプル ヘッダとフッタを固定して常に表示するサンプル（別ウィンドウで表示） ソース 上記サンプルで使用しているソースです。 body{ margin: 0; padding: 100px 0 50px 0; } * html body{ overfl
[CSS]タブコンテンツにCSS3アニメーションを少しだけ加えてかっこよくするチュートリアル
JavaScriptを使用しないで、スタイルシートでタブコンテンツを実装するポイントから、コンテンツの切り替えやタブのフォーカス時にちょっとしたCSS3アニメーションを加えるチュートリアルを紹介します。 Demo 4: 垂直型タブ 実装 HTML タブの各コンテンツはdiv要素で、タブはinput要素で実装します。input要素のチェックでタブを切り替えます。 <section class="tabs"> <input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" /> <label for="tab-1" class="tab-label-1">About us</label> <input id="tab-2" type="radio" name="radio-set"
あなたの作業を音速にするかもしれないWEB屋の作業スピードを上げるチートシート大量紹介 | バンクーバーのうぇぶ屋
このブログがフロントに関する記事が多いもんだから、たまにデザイナーと呼ばれることがあるんですが、僕は業務としてはデザインよか制作ディレクションの方がどちらかと言えばメインなんですよね。 そんなディレクターとしての役割の一つに、周りにいる優れたデザイナーやプログラマー、デベロッパーの業務効率を考えることが挙げられます。 何を取るわけでもなく中途半端な僕ですが、ディレクターとして周りの各プロフェッショナルの役に少しでも立てればと、そして制作する上での効率を向上させるべく色々情報収集をする中で、よくチートシートの存在を目にします。（チートシートってどれだけ普及してるのかわかりませんが、つまりカンニングペーパーのことらしいです。） WEB屋にとってのチートシートって、どれだけ優れた技術力やデザイン力を持っていても、何かしら新しい発見がある物ですよね。以前書かせてもらった時間の価値は人によって違う！
どこでも活躍できるテンプレートエンジン「Mustache」 - Mach3.laBlog
この記事は賞味期限切れです。（更新から1年が経過しています） 世にテンプレートエンジンは多くあれど、 これ程多くの場所で活躍出来るテンプレートエンジンはなさそうです。 本稿はそんなテンプレートエンジン「Mustache」の試用レビューです。 Mustacheについて {{ mustache }} “Mustache”というのは口ひげを指す言葉で、「ますたっしゅ」とか発音する様です。 テンプレートタグに使用されている「{」が口ひげに似てるので、そこらへんが由来っぽいです。 公式を見れば分かるとおり、Mustacheは1言語にとどまらず、 様々な言葉で開発されているテンプレートエンジンです。 知らない言語も入ってたりしますね…。 Available in Ruby, JavaScript, Python, Erlang, PHP, Perl, Go, Lua, ooc, C++, Action
HTML5 ADVENTURE CALENDAR
Project Ball Pool http://mrdoob.com/projects/chromeexperiments/ball_pool/ Description MrDoob is known for Flash projects, and recently some great HTML5 work. This project shows the power of HTML5 through the physics of collision detection & gravity. Drag the balls around. Click the background to add new objects. Shake your browser to see feedback. Double click any object to refresh with a new colo
Web Safe Color一覧表/カラーチャート
Home | 目次 | Prev | Web Safe Color | Next ■ Web Safe Color (カラーチャート) Wabにおける SafeColorパレット #0000ff #00f RGB(0,0,255) #0033ff #03f RGB(0,51,255) #0066ff #06f RGB(0,102,255) #0099ff #09f RGB(0,153,255) #00ccff #0cf RGB(0,204,255) #00ffff #0ff RGB(0,255,255) #0000cc #00c RGB(0,0,204) #0033cc #03c RGB(0,51,204) #0066cc #06c RGB(0,102,204) #0099cc #09c RGB(0,153,204) #00cccc #0cc RGB(0,204,204) #00ffcc
HTMLベースで作成できるプレゼン用スライドのまとめ
ブラウザでスライドを表示し、HTMLベースで作成できるプレゼンテーション用のスライドを簡単な操作方法と合わせて紹介します。
Web屋の私がブックマークしているサイト65 | Webクリエイターボックス
2017年7月14日 便利ツール 久しぶりに自分がブックマークしているサイトを整理してみました。昔から変わらず愛し続けているWebサービスやチュートリアルサイトなど多数あったので一挙にご紹介します！有名どころからあまり知られていないけど便利なサイトまで、多数あるので時間のある時にじっくり見てみてください！ ↑私が10年以上利用している会計ソフト！ ブックマークしているサイト 目次 Webサービス デザイン関連 画像関連 CSS jQuery WordPress フォント スマートフォン 配色関連 HTML5 メルマガ Webサービス 1. Sendoid Sendoidは会員登録不要のファイル送信サービス。ファイルをアップロード後にURLが生成されます。パスワード設定可。 2. HTMLエンコードフォーム HTMLエンコードフォームは特殊記号などをエンコード・デコードしてくれるWebサービ
[JS]かわいい猫画像になごんでしまった、指定範囲をフォーカスするスクリプト -Gallery Focus
オプションもリアルタイムに適用 Gallery Focusの実装 HTML フォーカスを与える画像を「#gallery」で内包します。 「#gallery」はjQueryのセレクタで指定できるものであれば、何でも可です。 <div id="gallery"> <img src="images/01.jpg"> <img src="images/02.jpg"> ... ... </div> JavaScript 「jquery.js」と当スクリプトを外部スクリプトとして指定し、下記のスクリプトを記述します。 $('#gallery img').galleryFocus(); スクリプトのオプション オプションでは、範囲のサイズ、フェードの量、適用範囲、反転、オーバーレイの有無を指定できます。 $('#gallery img').galleryFocus({ 'radius': 800, '
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Components · Twitter Bootstrap
Loading...
創造力と遊び心がくすぐられるHTML5でつくられたウェブサイトのまとめ