CSSで高さ（height）100%のボックス要素を作る方法｜BLACKFLAG
Webページ内に配置したボックスなどのブロック要素で 要素の長さを画面目いっぱいの高さに伸ばそうとしたとしても CSSで「height:100%;」と指定しただけでは理想通りにいかなかったりします。 CSSでボックスなどのブロック要素を画面目いっぱいの高さにする際の記述方法を いざという時に忘れてしまいがちなので、今さらながら紹介がてらメモしておきます。 まずはサンプルから。 高さ100%のブロック要素サンプル HTMLソース上では 単純な＜div＞のボックス要素を配置します。 ◆HTML <body> <div id="container"></div> </body> そして、この「#container」の高さを 画面目いっぱいにするにはCSSで以下の様な記述をします。 ◆CSS html,body { height: 100%; } body { font-size: 100%; l
エンティティ変換 | Webサイト制作支援 | ShanaBrian Website
HTMLエンティティ変換ツールです。 文字列から10進数、文字列から16進数、10・16進数から文字列への変換が可能です。 オプション
1ランク上の「HTML5」制作に欠かせないサイト・ツール・アプリのまとめ21個！
「HTMLファイ部」のほんだです(・Å・)∫ jsdo.it、nakamap、Paberish、HTML5実力テストといった自社運営Webサービスの HTML5エンジニアをやっているものです。 よろしくお願いします！ 「HTMLファイ部」創立1周年！ 非常に手前味噌ではございますが、 弊社HTMLファイ部が創立から1年になりましたっ！・u・ HTMLファイ部は、「HTML5」技術を軸に、様々な表現に挑戦していくエンジニアを集めた部署となっています。 今回の記事では、HTMLファイ部の一周年を勝手に記念して、 HTMLファイ部のメンバーからかき集めてきた、HTML5サイト制作ツールをまとめます！ ツール系のサイト
WEB制作のIE対策いろいろ チートシートやHTML5/CSS3対応方法など | DECONCEPTER
かわいいあいつIEとの付き合い Internet Explorer 通称 IEはかわいいやつである。私の心を掴んで離さない。IEについて言及すれば火が燃え上がる、存在が燃えている最強の火種だ。 なぜこんなにIEはかわいいのか。テーブルタグでウェブサイトをレイアウトする時代からCSSでレイアウトする時代へ移行する際はIE5/IE5.5/IE6/Mac IE5.2でどうしたら同じレイアウトを実現できるかを苦悩させてくれた強敵（とも）だった。 昨今のHTML5バンザイWEB制作においては、最新機能を使ってWEBサイトを作る上でIEの表示や機能をどうするかという話題が常にモチキリだ。 そんな我々の心を離さないIEの対策をする上で一つ一つ表示を確認しながら作っていたら日がくれて定年を迎えてしまう。IE定年を迎えないためにある程度どういう対応が必要かよくまとまっているサイトを見ていこうと思う。 チート
リストの作成 -- ごく簡単なHTMLの説明
情報を見やすく整理して表現する方法として、リスト（一覧）はとても効果的です。HTMLでは、項目を列挙するul要素、順序を考慮して列挙するol要素、用語とその説明という定義型のリストを構成するdl要素の3つのリスト要素が用意されています。 目次： リストで情報を分かりやすく整理する 並列列挙リスト 順序付きリスト 定義型リスト リスト要素はブロックレベル リストの入れ子 取り上げる要素： ul ol li dl dt dd リストで情報を分かりやすく整理する 基本的には本文は見出しと段落だけで構成できるはずです。しかし、一連の並列される情報や、順序立ててステップを説明するような内容は、リストとして表現する方が分かりやすいことがあります。 一つの段落が長くなってしまう場合は、そこで述べようとしているポイントを箇条書きにすると、簡潔に表現することができます。また、複数の段落に分けて書いている内容
クリッカブルマップを使ったロールオーバー｜Webクリエイターネット
Category Javascript 1枚の画像に複数のリンクを設定する際"クリッカブルマップ(イメージマップ)"を使用することで、複雑な形でもリンク領域を指定できますので結構便利です。 ｢このクリッカブルマップ(イメージマップ)で、指定領域にカーソルを合わせた時に画像をロールオーバー出来れば便利かも｣と思ったことはないでしょうか？ ちょっとしたJavascriptで簡単に実装できますので、今回はその方法をデモページも交えて紹介しようと思います。 Keyword：クリッカブルマップ,ロールオーバー,Javascrpt ロールオーバー用のスクリプトを用意する rollover.js /* Rollover Script */ if(navigator.appVersion.charAt(0) >=3){ var rolimg = new Array(); for( i = 0 ; i <
Daftar Serta Masuk Saat ini Di Situs Slots Online Terpilih Ojekslot
Daftar Serta Masuk Saat ini Di Situs Slots Online Terpilih Ojekslot Seperti yang kita pahami waktu ini ada sangat banyak permainan slot online paling sederhana yang dapat dimainkan dalam sekejap hanya cukup masuk di sana saja ojekslot terunggul. Di sini dapat ada sangat banyak bermacam permainan luar biasa yang pastinya dapat anda temukan dengan ringan. Beraneka permainan terbaik di sini dapat and
ウェブ制作者の困ったを解決するコードが盛りだくさん、スニペットを共有するサービス -Code Pad
Public Snippets コードは、現在7つのカテゴリに分けられています。 CSS Apache PHP JavaScript jQuery HTML XML Others [ad#ad-2] 例えばCSSだと、clearFix、角にリボンを配置、画像のフリップ、フッタの固定表示など、たくさんの便利なスニペットが登録されています。 CSS: Clearfix CSS: Pure CSS Corner Ribbon CSS: Flip an Image CSS: Sticky Footer スニペットのページでは、シンタックスハイライト、テキスト表示に対応しており、テキスト形式でダウンロードできます。
HTML5演出に最適な複数画像読み込み管理のJSライブラリ「LoadManager.js」 | ClockMaker Blog
HTMLで複数の画像を読み込むとき、HTMLのimgタグだけだと不恰好となりがちですが、読み込みを管理すれば見栄えも整いますというデモとJSライブラリを作ってみました。次の2つのデモを見比べて何が違うのか確認ください。 デモ (通常のimgタグ) デモ (LoadManager.jsを使用) デモの違いとは 前者は画像がバラバラとインターレース的に読み込まれ、後者は読み込み終わるまでローディングが表示され読み込まれたものがフェードインして表示されます。 ▼前者のデモ ▼後者のデモ 後者のデモには、ローディングのパーセンテージ表示も付いています。読み込みが何%まで達しているかを確認できるのも、後述のJSライブラリのメリットです。 HTML5で作られたフルFlash的なサイトを見たときにimgタグでインターレース的に画像がバラバラとでてくることが多くて、いつも微妙な思いをしていました。Flas
CSSとフレームワークとメタ言語 | debilog
Less & Sass Advent calendar 2011 の 2 日目を書きます。ウェブページを作るときのアプローチに触れた後で、アドベントカレンダーのテーマである LESS や Sass が、ウェブページ制作者にとってどのように役に立つものなのかを紹介したいと思います。 あなたが HTML や CSS を書くことになったら HTML も CSS も自分で書く HTML テンプレートスキンを使う CSS フレームワークを使う CSS フレームワークの紹介 メタ CSS 言語 CSS の構成要素 CSS の仕様ではできないこと CSS のメタ言語を使う Sass 3 系の登場 他のメタ CSS 言語 終わりに あなたが HTML や CSS を書くことになったら 個人や団体のウェブサイトを作りたいとき 個人で使っているブログなどの CMS をカスタマイズしたいとき 仕事でウェブアプリ
float解除の決定版。clearfixを考えたら、進化した。
現在この中でclearfixでよく使用されているプロパティは display:inline-block; height:1%(min-height:1%) zoom:1; でも良く考えたら、全て微妙です。 zoom:1はIEの独自仕様ですし、heightを使用する場合は、IE6,7に対応させるために2つのプロパティが必要です。 display:inline-blockもボックスの要素を変形させることになります。 hasLayoutのスイッチを見た時に、一番理に適ったプロパティはwidthかなと思いました。 子要素を囲む要素として、divやulなどデフォルトCSSがdisplay:blockのプロパティのものが多く、display:blockのプロパティの場合、width:100%で問題ないと思ったからです。 現在のブラウザ状況に適したclearfix 上記を踏まえ見直したclearfixが
HTML5ホームページテンプレート無料配布 [Cool Web Window]
404 Not Found お探しのファイルは見つからないようです。 お手数ですが、下記リンクからトップページへお戻りください。 CoolWebWindow Copyright (C) Cool Web Window All Rights Reserved
<h1>要素（タグ）の適正な使い方についてふと気づく - Web標準にアプローチ 〔まいまいのお宿。〕：楽天ブログ
2008/04/17 <h1>要素（タグ）の適正な使い方についてふと気づく (13) テーマ：Web標準(117) カテゴリ：Web標準 「h1要素ってのは、そのページ内で一回しか使わないもの、使えないものだから･･･」 鳥のミンチをこねながら、「記述」について考えた。ふと思った。 それが h1要素 のこと。 ふと思ったら、気になって仕方がない。 h1要素って、ほら、SEO的にも重要なウェートを占めるし。 頭の中に沸々と湧き上がってきたものを書き留めてみると･･･ title要素とh1要素は、当たり前だけど役割が違う。 違うけれど、サイトのタイトルとh1要素に書くものってニア～イコールっぽくないかい？ でもさ、なんか違う。違うんだよね。 例えば「Web標準にアプローチ」ってサイトがあって このブログのように、一番上に、タイトル画像がデーンってあったりしたら その子は、h1要素で書いちゃった
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Flashじゃなくて HTML5で ビュンビュン動くサイトを 作ってと言われたら
ウェブ制作者に必ず役立つ！iOS, HTML5, CSS, jQuery, WordPress, .htaccessなどのチートシートのまとめ
資料：日本のコーダーのfont-family指定 | ウェビンブログ
今年(2011年)参考になったWeb制作者向けのスライドのまとめ - かちびと. net
PHAM MTB – Europe's beauty and diversity from behind bars of my mountain bike.
Imaginista – Visionary Brand Makers
わずか四文字でIE6/7/8を区別するCSSハック | コリス