specky boyのエントリーから、ブラウザのスタイルの初期化やレイアウトのテンプレートなど、スタイルシート設計のベースとなるCSSのフレームワークを紹介します。
specky boyのエントリーから、ブラウザのスタイルの初期化やレイアウトのテンプレートなど、スタイルシート設計のベースとなるCSSのフレームワークを紹介します。
CSSnewbieのエントリーから、ボックスモデルのマージン(margin)とパディング(padding)の利用シーンにおける違いを紹介します。 When to Use Margins and Padding マージン(margin)を採用する場合 パディング(padding)を採用する場合 ブラウザによる問題 マージン(margin)を採用する場合 borderの外側にスペースが必要な場合。 スペースに背景色(画像)を適用したくない場合。 上下に隣接したボックスにスペースを設ける場合、マージンの相殺を期待して、大きいサイズを有効にしたい場合。 例:15px + 20px の場合、スペースは20px。 ※相殺されない場合もあります。 パディング(padding)を採用する場合 borderの内側にスペースが必要な場合。 スペースに背景色(画像)を適用したい場合。 上下に隣接したボックスにス
ここまでに学んだ知識だけでは,CSSを使ってWebページをレイアウトする際に, XHTMLの書式として<p>の中に<h1>や<ul>は書けない 禁忌だと言っていたheight指定を使わざるを得ない場合がある といった問題が発生すると前回,指摘しました。今回は,これらの問題を解決する方法について説明します。 HTMLには<div>というタグがあります。“div”はDivisionの略です。Divisionは「分離」や「区域」といった意味です。和訳の通り,タグの意味合いも「領域指定」といった感じになっています。<div>タグはCSSで画面構成を学ぶにはとても大切なタグです。 次のようなHTML(部分)があったと考えてください(リスト1)。 リスト1●ページを作っていると普通に出てくる構成 リスト1はページを作っていると普通に出てくる構成です。前回までの知識で,<h1>や<p>にそれぞれCSS指
TJK Designのエントリーから、ヘッダ・フッタ・3カラムのレイアウトをdiv, float, clear, CSS hackを使用しないで実装するスタイルシートの紹介です。 A CSS layout that does not rely on DIV, FLOAT, CLEAR nor structural HACK! 対応ブラウザは、WidnowsがIE5.01, 5.5, 6, 7, Fx0.8, 1.5, 2.0, Op9.0, 9.24、MacがIE5.2, Safari2.0, 3.0, Fx2.0、LinuxがKonqueror, Mozilla、そしてiPhoneとなっています。 仕組みは、簡単に説明するとリストを使用したもので、実装方法は8つのステップで紹介されています。
前回はサンプルを交えながら(X)HTMLとCSSの関係をおさらいしました。どれだけ画像を沢山利用したグラフィカルなサイトでも、画像を使わないシンプルなサイトでも基本はまったく同じであり、(X)HTMLは文書構造を、CSSでは文書の要素に対して見た目等の振る舞いを指定することにより、ブラウザで私たちが閲覧できる状態になります。 ところがリファレンス等を参考にしながら正しく(X)HTML/CSSを書くように頑張ってみたわりには、ブラウザ(閲覧環境)によっては表示が崩れてしまうなど、最初はなかなか思い通りに表示されないことが多いものです。 W3Cが技術を標準化するため(X)HTMLやCSSの仕様書を勧告していますが、現実に普及しているブラウザでは、仕様に完全準拠しているとは限りません。そのため、普及しているそれぞれのブラウザの特徴まで理解した上で(X)HTMLとCSSの設計をすることが必要です。
<style>タグの使い方を理解したところで,2番目のCSS記述方法の学習に進みます。この方法では,<style>タグを使わずに,装飾したい部分のタグに直接書式指定を書きます。 前回のサンプルから<style>~</style>の部分を削除し,生のHTMLに戻します。もう一つ適当な文章で<p>を作ってください。そして次のようにコードを書きます(リスト1)。 リスト1●サンプルコード <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-
前回,CSSの書き方には3種類あると書きました。今回から書き方を順番に説明していくことにしましょう。まずベースになるHTMLを作ります。今回はHTML中の<p>に対して,フォントの色を赤くするという単純な装飾でCSSの書き方を学習します。 <p>があるHTMLを作ります。説明画面が寂しくないように,若干のボリュームがあるテキストを本記事からコピーして作ってみました(リスト1)。 リスト1●ベースになるHTML <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <hea
CSS Type Set is a hands-on typography tool allowing designers and developers to interactively test and learn how to style their web content.
CSSがWebページデザインの主要技術になってから、WebデザイナはCSSの振る舞いに頭を抱えなかったことはない。もっとも悩ましいのは、同じCSSでもWebブラウザごとに表示が異なるところにある。なるべく同じ表示を実現しようと、一見すると奇っ怪にみえる設定を加えたり、意味がないような行を加えたり、背景色と同じ色の画像を調整用に追加したり、涙ぐましい努力は後を断たない。 世界中のWebデザイナやフロントエンドデベロッパが同じ悩みを抱えているから、Webブラウザ間の互換性を実現するCSSライブラリがいくつも登場したり、ベストプラクティスをまとめたCSSリファレンスドキュメントが登場したり、CSS擬似クラスといったテクニックが紹介されたり、IEのCSS/HTML非準拠に対処するライブラリが登場するといったことが相次いで起こっているわけだ。 しかし、ほかのライブラリに依存せずにいちから自力でCSS
A List Apart - For People Who Make Websites HTMLとCSSは規格通りに使うとすれば縦横無尽にさまざまな記述ができる。しかし規格上サポートされているからといって、馬鹿正直にそうした機能を使うのは避けたい。シンプルな記述であとから読んでも理解しやすい、他人が読んでも理解しやすいHTMLやCSSを書けるようになることが理想だ。しかし誰しも最初は素人だ。エキスパートがまとめたドキュメントを参考にして、そうしたテクニックであり勘どころを学んでしまいたい。 フロントエンドデベロッパであるAlex Bischoff氏は5日(米国時間)、A List ApartにおいてKeeping Your Elements' Kids in Line with Offspringという名のもと、CSSやHTMLの記述方法について細かい技巧をまとめて発表した。同ドキュメント
※Firefox(推奨)またはSafariでご覧ください。(未確認ですがFlockでも良いようです。) via http://metaatem.net/highlite/ まずは以下のテキストをマウスでハイライトさせてみてください。(あるいはCtrl+Aでテキスト全選択ですね。) One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches int
趣旨 ウェブページとして描画された HTML 要素の画面上の位置を取得する。一見簡単そうに見えるこの作業が、現在実装されているブラウザ上ではとてつもなく難しい。そのことを以下で説明していく。 情報ソース この問題に関して調べたところ、最もよく出来ているエントリは、susie-t 氏による offsetTop/offsetLeft/offsetParentの闇 である。とてつもない力作で、実に多くのケースにわたって、包括的に探究が行われている。まるで犯人を追跡する刑事のような執拗さである。氏の自己紹介では「ナマケモノのプログラマ」とか謙遜されているが、これはとてもナマケモノにできる仕事ではない。 基本中の基本として W3C CSS 2.1 の次の章を抑えておきたい。 8 Box model 9 Visual formatting model 10 Visual formatting mode
間があいてしまいましたが、前回は見出しについてお話をしました。Webに限らずあらゆる文書において、見出し+本文という組み合わせは一番シンプルかつ必ず文書中に必要な要素です。 今回は(X)HTML[1]+CSS入門の実践を兼ねて、サンプルを作ってみます。 見栄えを整えるその前に ~簡単な(X)HTMLの構造を観察してみる~ これから出てくるサンプルでは、シンプルなXHTMLに対してCSSを適用する事で見た目のデザインを変更していきます。Webデザインをこれからはじめる際のすべての基本となる部分でもあるので、しっかりと身につけていくとあとでいろいろな知識が吸収しやすくなります。 (X)HTMLは意味づけを行う言語 それではまず、以下のサンプルファイルをブラウザでご覧ください。特に何もスタイルを適用していない、見出し+本文だけのシンプルな内容です。 サンプル1(sample1.html) 見出し
Matthew James TaylorのCSSハック無しシリーズから新たに、emとピクセル指定のリキッドレイアウトのテンプレートがリリースされました。 Ultimate multi-column liquid layouts (em and pixel widths) emとピクセル指定のリキッドレイアウトは、3カラムx2、2カラムx2、1カラム、マルチカラム、それぞれemとピクセル用の12種類のテンプレートがあります。 主な特徴 CSSハックは、無し。 iPhone & iPod Touch互換。 SEOにやさしい。 カラムの背景色はフルで。 画像は、無し。 JavaScriptは、無し。 サイズ変更可能なテキストへの互換。 カラムの積み重ねに対応。 誰が使用してもフリー。
ここ最近、次々と目にするようになってきたCSSフレームワーク。TomcatやRailsをはじめとするサーバサイド、prototype.jsやjQueryといったクライアントサイド、そしてデザイン領域のCSSへとフレームワークの裾野は広がっている。 こうしたフレームワークを覚えれば、サイトの構築は手軽になる。CSSによる三段組やブラウザ間での互換性などのTipsが盛り込まれたフレームワークを使って、サイトデザインに役立てよう。 今回紹介するオープンソース・ソフトウェアはBoilerplate、シンプルなCSSフレームワークだ。 Boilerplateは他のCSSフレームワーク同様に初期プロパティの消去からはじまって、各タグに対する設定を行っている。印刷時のCSS設定や、IEハックも盛り込まれている。 一つのファイルでの構成ではなく、目的に応じて複数のファイルに分かれているのが特徴だ。例えばフ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く