ページ全般 ボックス テキスト リンク リスト イメージ テーブル フレーム フォーム フィルタ CSSの基本 CSSプロパティ一覧[ABC順] リファレンスについて HTML リファレンス HTML Living Standardに対応したリファレンスです。 HTMLタグ リファレンス HTML4の時代に作成したリファレンスです。古いWebページを更新する際などに参考にしてください。 CSS リファレンス CSS2の時代に作成したリファレンスです。
ネットで検索をすると CSS のテクニックが山ほど公開されていますが、実際に商用サイトの制作をしていて個人的に利用する頻度が高いテクニックの BEST 5 をご紹介します。 ちょっと凝ったデザインのサイトをコーディングする時に、これらのテクニックに助けられることが多いです。どれも覚えておいて損はないものばかりです! IE6 でも min-height を使う 例えば、異なる高さのブロックを float しつつ底辺のラインを揃えたい時などに、「IE6 が min-height に対応していたら楽なのに!」と思うことがありますが、以下のテクニックを使えば IE6 でも min-height(相当)の適用が可能になります。 [CREAMU]CSSでmin-heightをクロスブラウザにする最も簡単な方法『Easiest cross-browser CSS min-height』 IE6 に mi
日本が大型連休に入る少し前の4月23日、W3CはHTML5の新しいドラフトを公開しました。いつも最新のWeb標準化動向を伝えてくれるWeb標準ブログのエントリ「Last Callに向け進むHTML5 | Web標準Blog | ミツエーリンクス」によると、今回のドラフトから仕様書に大きく手が加わり、Webサイトを作る人向け(制作者に関係する要件)と、Webブラウザを作る人向け(実装要件についての要件)ごとに見やすくなるようなスタイルシートが用意されたとのこと。 これまでも何度かこのブログでは、HTML5やJavaScript 2.0などのWeb標準の動向を書いてきましたが、今回は分かりやすいようにその動きをまとめてみました。 HTMLはHTML4でいったん進化が終了し、それ以後はXHTMLで進化していくことになっていました。しかし実際にはXHTMLは期待されたほど普及せず、XHTMLによっ
外部スタイルシートの指定は@importとlinkでどちらがいいかと、書籍「ハイパフォーマンスWebサイト ―高速サイトを実現する14のルール」の@importはパフォーマンスに悪影響を与えることについてのフォローアップを紹介します。 don't use @import 内容は、IEでは@importで外部スタイルシートを指定すると、パフォーマンスに悪影響を与えるので使用しないでください、というものです。 下記は、外部スタイルシートを@importとlinkを組み合わせて、それぞれのパフォーマンスを比較したもので、キャプチャはそのサイトのものと、参考に当環境でIE7/Fx3(XP)を検証したものです。 @import @import 2つの外部スタイルシートを@importで指定。 <textarea name="code" class="html" cols="60" rows="5">
現場でバリバリコーディングをしている当ブログの執筆陣が、ちょっと使える CSS のテクニックをご紹介する短期集中連載企画。全 10 回の予定でお送りします。 第 1 回目は「ブラウザのデフォルトスタイルをリセットする」です。 ほんの 1~2 年前までは「*(ユニバーサルセレクタ)」を使って以下のようにブラウザのデフォルトスタイルをリセットするのが主流でした。 * { margin: 0; padding: 0; border: none; list-style-type: none; font-style: normal; font-weight: normal; font-size: 100%; text-align: left; } ただ、全要素のスタイルを無条件でリセットしてしまうと、input 要素や button 要素などフォーム周りの要素の表示にまで影響が及ぶ事から、既にユニバ
茨城県出身。1980年生まれ。専修大学経営学部卒業後,1年弱のニート生活を経て販売代理店の営業職を経験後,有限会社アイエイトワンに入社。主に,Webディレクション,マークアップを務める傍ら,講師活動・執筆活動を行う。allWebクリエイター塾ではCSS講習の講師。著書に「XHTML&CSSデザイン |基本原則,これだけ。」(共著,MdN発行)がある。 いつも良質なエントリでブックマークをたくさんもらっている「ウノウラボ Unoh Labs」というサイトがあります。少し前になりますが,そこで「CSSによるデザインワークと相性のよいHTMLって?」というエントリがありました。そこにはすでにたくさんのことが書かれていますが,今回は僕が実践していることを紹介します。 と,その前に,「CSSによるデザインワークと相性のよいHTML」についてちょっと説明しておきましょう。サイト作成の案件を進めていく過
PCのモニター・ディスプレイは,ここ数年で液晶が標準となり,併せてワイド化が進んでいます。ワイド液晶ディスプレイが登場するまでPCの画面構成比は,一部のノートPCなどの小型端末を除いて,「横4対縦3(640*480)」~「横5対縦4(1024*768)」という比率でした。解像度は「XGA(1024*768)」を大多数の環境としていればよく,XGAベースで構成しておけば「SXGA(1280*1024)」でも特に問題はありませんでした。 一時期,「サイトデザインはSVGA(800*600)を意識しろ」と言われていましたが,現実問題としてSVGAはほぼなくなりました。2006年の時点でディスプレイ全体の出荷台数に占める液晶ディスプレイの比率は99.7%(電子情報技術産業協会の市場調査結果)です。SVGAまでしか表示できない液晶ディスプレイはほとんどありませんから,これが現在の「XGAを標準解像度
小林 信次 マークアップ・エンジニア。茨城県出身。1980年生まれ。専修大学経営学部卒業後,1年弱のニート生活を経て,販売代理店の営業職を経験後,有限会社アイエイトワンに入社。主に,Webディレクション,マークアップを務めるかたわら,講師活動・執筆活動を行う。allWebクリエイター塾ではCSS講習の講師。著書に「XHTML&CSSデザイン |基本原則,これだけ。」(共著,MdN発行)がある。 いろいろな方と話しているときに,line-height(1行の高さ。行間として認識できる余白を制御する値)ってどのくらいに指定していますか?という話題が出ることがあります。そこで改めて,他の人がサイトでどんな指定をしているのかを調べてみました。 ※ 今回は,Webのフロントエンド制作を仕事にしている人の間でよく知られており,アクセシビリティ,ユーザビリティ,文字の読みやすさなどにも気を使っていると思
Dave Woodsのエントリー「IE6 -CSSのバグとその解決方法」から、IE6でよく遭遇する3つのCSSのバグとその解決方法の意訳です。 IE6 - CSS Bugs and Fixes Explained IE6で、マージンが2倍になってしまうバグ IE6で、hasLayoutプロパティによって起こるバグ IE6で、小さい高さを指定した場合に起こるバグ IE6で、マージンが2倍になってしまうバグ IE6で、フロートした要素のマージンが2倍になってしまうバグと解決方法の紹介です。 下記のコードで、IE6はマージンが20pxになります。 sample:バグ #navigation{ float: left; width: 200px; margin-left: 10px; } #content{ float: right; width: 500px; margin-right: 10p
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く