ヘッダとフッタを固定して常に表示 « (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
<input>－HTML5タグリファレンス
<input>タグは、フォーム（<form>～</form>）を構成する様々な入力部品を作成する際に使用します。 ■フォーム部品の種類を指定するtype属性 type属性は、フォーム部品の種類を指定する際に使用します。 <input>要素は、type属性にどのような値を指定するかによって、 一行テキストボックス・チェックボックス・ラジオボタン・送信ボタン・リセットボタン等、 フォーム部品の種類を指定し分けることができます。 type属性の初期値は、type="text"（一行テキストボックス）です。 ■type属性の値 type="hidden" 画面上は表示されない隠しデータを指定する type="text" 一行テキストボックスを作成する（初期値） type="search" 検索テキストの入力欄を作成する type="tel" 電話番号の入力欄を作成する type="url" URL
Quipper で最初のリリースなので振り返る - @banyan's blog
5月に Quipper に入ってやっと最初のリリースが迎えられそうな中、チームのメンバー全員がなぜかブログを書き始めた。なんなのこれ... Quipper のスピード感 自分の強みを生かすこと on Quipper Github Issues を利用したリリースマネージャのお仕事 Quipperでのおじさんエンジニアの立ち位置 QuipperでHTML5アプリを作ってる話 Quipperのエンジニアのblog day（ステマじゃないよ） でも @banyan さんが日記書くまでは寝るわけにいかない。 — 北市真 (@KitaitiMakoto) October 22, 2013 同調圧力は見て見ぬふりをしてたけど、外部のブログ圧力に負け僕も書くことにします。 Pull Request の粒度 6月に最初は開発者4人でスタートして、8月に Android 開発者の @dagezi さん、9月
Webサービス作るの難しすぎるよう... - 旧gaaamiiのブログ
こちらの記事。盛り上がってますね。 今すぐ辞めて欲しい、「Ruby on Rails勉強してます」「CakePHP勉強してます」 正直、「背伸びのしすぎ」としか言い様がない。要らない知識を取得するために必要な知識を修得するための時間を捨てているようにしか思えない。GETとPOSTの違いもわからない人が、ルーティングやらフォームの自動生成やら使えるわけがない。 こういうのってけっこう頻繁に盛り上がるようなものなのか、２００８年にも、モバツイの開発者えふしんさんがはじめてWebプログラミングをするなら PHP? Ruby?という記事で似たようなことを書いてます。 Ruby on Railsが10分でWebアプリができた！的な話はあまり好きではない。フレームワークは、まだ行間を読めない初心者が簡単にWebアプリを作るためのものではない。 どちらも、初心者が基本的な技術そっちのけでブラックボックス
dresscording.com
dresscording.com 2019 Copyright. All Rights Reserved. The Sponsored Listings displayed above are served automatically by a third party. Neither the service provider nor the domain owner maintain any relationship with the advertisers. In case of trademark issues please contact the domain owner directly (contact information can be found in whois). Privacy Policy
HTML5 Boilerplateの開発者でGoogleのエンジニア、ポール・アイリッシュに聞くCSS高速化テクニック - builder by ZDNet Japan
Adobe Systemsがロサンゼルスで5月に初旬に開催した「Adobe MAX 2013」において、HTML5 Boilerplateの開発者として知られるPaul Irish氏の講演「Mobile CSS Performance」を聴講した。その内容をベースにしながら、CSSを高速化するためのさまざまなテクニックを紹介する。 Paul Irish氏は、HTML5 BoilerplateやModernizrなどの開発者として世界的に著名なGoogleのエンジニア。その彼が直接CSSのパフォーマンスを語るとあって、セッションは大変な人気であった。 一般的にウェブページの高速化、特にモバイルにおいてはCSSを高速化することよりもネットワークのパフォーマンスを最適化する方が効果が高い。そのため、まずはPageSpeedやYSlowなどを効果的に使用し、HTTPリクエスト数を減らす、ダウンロー
CSS3だけで実現する美麗なスペースワープ 【増田 @maskin】 | TechWave（テックウェーブ）
1990年代初頭から記者としてまた起業家としてITスタートアップ業界のハードウェアからソフトウェアの事業創出に関わる。シリコンバレーやEU等でのスタートアップを経験。日本ではネットエイジ等に所属、大手企業の新規事業創出に協力。ブログやSNS、LINEなどの誕生から普及成長までを最前線で見てきた生き字引として注目される。通信キャリアのニュースポータルの創業デスクとして数億PV事業に。世界最大IT系メディア（スペイン）の元日本編集長、World Innovation Lab(WiL)などを経て、現在、スタートアップ支援側の取り組みに注力中。 [読了時間: 1分] もはや定番ともいえる次世代ウェブアプリ開発タッグ「HTML5+CSS3+JavaScript」。欧米圏ではHTML5+CSS3の活用事例が毎日何本も公開されており、最近は、「高度」と「アイディア指向」に二分化されている。このデモも高度
ブラウザのしくみ: 最新ウェブブラウザの内部構造 - HTML5 Rocks
How browsers work Stay organized with collections Save and categorize content based on your preferences. Preface This comprehensive primer on the internal operations of WebKit and Gecko is the result of much research done by Israeli developer Tali Garsiel. Over a few years, she reviewed all the published data about browser internals and spent a lot of time reading web browser source code. She wrot
Ligature Symbols
HTML & CSS Please copy & paste this code to your HTML file or Stylesheet. <p>Simple use for mailto link.</p> <a href="mailto:mail@example.com" class="lsf">mail</a> <p>Use tha icon with text.</p> <a href="http://twitter.com/" class="lsf-icon" title="twitter">Twitter</a> <p>Use tha icon with unicode.</p> <a href="http://amazon.com/" class="lsf-icon amazon">Amazon</a> /* CSS */ @font-face { font-fami
良いエンジニアの育て方 - ひがやすを技術ブログ
人を育てるというのは、とても難しい。 なぜなら、育てる方も未完成な人間だから。 ちょっと経験値のある未完成な人が、経験値の少ない未完成な人と、ともに冒険をし、ともにレベルをあげていくことが、人を育てるってことだと思う。 人を育てようと思うと、どうしても上から目線になってしまう。上から目線だと気持ちも相手に伝わりにくい。気持ちが伝わらないと相手もうまく成長してくれない。 だから、人を育てる機会があったら、ともに冒険をする仲間を持ったと考えよう。きっとその方がうまくいく。 それでは、自分の話をしよう。自分というよりは自分たちの話かな。 2010年、自分は、昼間、ブラ三をやりながら、新規ビジネスの企画を考えたり、プロトタイプを作っていたりしていた。ブラ三をやっていたのは、当然ソーシャルアプリというものを学ぶためだ。ブラ三の能力はかなり向上したけど、仕事ではたいした結果が出せなかった。特に企画考え
Big Sky :: 最近の zencoding.vim
最近 zencoding.vim を大きく修正しました。とは言ってもこれまで単体テストを作ってきた事もあって、過去の動作を(なるべく)壊さずに大規模な修正が行えました。 これまでは一つのファイルに html, css, haml の処理が全て記述されていたのでとてもスパゲッティなコードになっていて、もう少し放っておくとカオスな状態になりかけていたので、ファイルを分割しインタフェースを揃える事にしました。 これにより、今後新しいフォーマットに対応する際にも、zencoding/lang にあるファイルの真似をして記述すれば実装出来る様になります。 haml に対応した 「えっ？前から対応してたんじゃないの？」と言われる方もいるかもしれませんが、これはあくまで expand abbreviation の haml フィルタとしてだけサポートしていました。 何が変わったかというと zen cod
TechCrunch | Startup and Technology News
Unlike Light’s older phones, the Light III sports a larger OLED display and an NFC chip to make way for future payment tools, as well as a camera.
にひりずむ::しんぷる - blog のデザイン変更または canvas 入門
HTML をいじるのはめんどかったので、CSS だけ変更した。いちいち blog の管理画面から CSS を適用してプレビューとかやってたら日が暮れるどころの騒ぎではないので、まず HTML をローカルに保存する。 $ wget http://blog.livedoor.jp/xaicron/ で、index.html とかが保存されるので、おもむろに </body> の直前に以下の JavaScript を書く。 <script type="text/javascript"> (function() { var i = 0; var css = "http://localhost:5000/style.css"; setInterval(function() { document.getElementsByTagName("link")[1].href = css+"?id="+i++
[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"
HTML5 開発者に便利なツール 14 個
先日 Google+で Addy Osmani 氏が紹介していたオンラインツールが便利そうだったので紹介します。 DocHub.io # CSS, HTML, JavaScript, DOM, jQuery, PHP, Python の API リファレンス。インクリメンタルサーチできるので、開発中は常に開いておきたい。 Dillinger.io # 最近 GitHub 関連で使われるようになって流行り始めた Markdown 記法を、視覚的に確認しながら入力できるツール。Dropbox や GitHub のアカウントで繋ぐと、アップロードできるようです。Mac 用デスクトップアプリの Mou というのも合わせて紹介されていました。 HTML5Please # 今から使える HTML5 機能のリストとブラウザの対応状況に応じたアドバイス、そして Pollyfill (未対応ブラウザ向けに機
Ruby on Railsが簡単というのは嘘 - toyoshiの日記
WinユーザがRailsアプリをこれから公開しようと思った場合 Windowsで学習を開始するのは不可能なのでLinuxをいれる でもWindowsで進めようとしてmsysGitをいれたりするが結局半日無駄にする なぜかgemが最新じゃないと怒られる gemを単純に使っても後から困るのでrvmかrbenvが必要。使い方覚えないといけない やっとRails3.2導入。javascriptエンジンが入ってないので起動しない やっと起動 HTML書いてるのは情弱だけ => hamlを覚える js書いてるのは情弱だけ => coffee scriptを覚える css書いてるのは情弱だけ => scssを覚える テスト書いてないコードはレガシーコードっていわれる しかたないのでRspecいれる => Rspec覚える ユニットテストだけではしかたないといわれcapybaraもいれる => capyb
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Flatis
Geo for Bootstrap, a Timeless Theme by Divshot
Responsive web design tool, CMS, and hosting platform | Webflow
Loading...
