I7ll

Webデザイナーが, Webについて,デザイン, 技術トレンド, レビューなど, あれこれ綴っていきます。

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


CSS drive



CSSのTips集

CSS Library Horizontal CSS Menus
http://www.dynamicdrive.com/style/csslibrary/category/C1/

このような感じで、テーマごとにサンプルソースを参照できる。

スポンサーサイト


完全CSSレイアウト

完全CSSレイアウトのお勉強

SEO対策に有効、ソースが軽い、メンテナンス/見た目がいい(微妙)
今までスピード重視だったので割とtableタグの多様になってしまったが、
フレームはちゃんと作成した方がいいだろう、という事で.

■CSSレイアウト
positonプロパティの有効利用
 
static 通常の位置に表示する。この値が指定された場合,
後述するtop,right,bottom,leftの各プロパティは適用されない。

relative staticで表示されるべき位置(つまり通常の表示位置)を基準として,
top,right,bottom,leftの各プロパティによるオフセットで
表示位置を決定する。

absolute 通常の表示位置とは無関係に,包含ブロックからの距離を
top,right,bottom,leftの各プロパティで指定されることによって,
表示位置を決定する。

fixed absoluteと同様の方法で位置を決定したあと,それを何かに固定する。
連続メディア(スクロールメディア)の場合は,viewportに固定され,
スクロールに流されずに常に表示されるようになる。ページメディアでは,
ページに固定される。
■参考サイト
http://css.uka-p.com/

続きを読む »



ブラウザ別 CSS

ブラウザ別 スタイルシートの切り替え備忘録.

CSSに対し, ブラウザごとに仕様が異なり,
特にNetscape4.xには問題のあるバグが多い.

□対策のひとつとして NS4互換と非互換のCSSを用意する
・NS4互換  common.css
・NS4非互換 original.css


<link rel="stylesheet" type="text/css" href="css/common.css">
<style type="text/css">
<!--
@import url(css/original.css);
-->
</style>

何をしているかと言うと,
@import url(...)は, NS4に対応していない.
そこの部分にNS4非互換ファイルを指定する事で,
NS4に適用除外する事ができる.
というか, IEやらはorigianla.cssを読む事ができる.



<<

CSSとは?

What's CSS ?

■CSS(Cascading Style Sheet)
 WebページはHTMLで記述されている.
 HTMLは元々, 文書の論理構造を記述するものなので,
 HTMLで凝ったデザインを施すと, 複雑なコーディングとなり,
 作成修正が困難となる.

 そこでCSS(スタイルシート)を用いることで,
 論理構造とデザインを分離.

 HTMLと分離してコードを作成できるので,
 サイト内の全ページに共通デザインのテンプレートとして
 利用できる.メンテナンスが容易になる.

 欠点:
  ブラウザによっては対応が異なる.

■CSSのレベル
 ・CSS1 Level1
 ・CSS2 Level2

 CSS1に加えて印刷や音声の制御, XMLに対応したものがCSS2
 詳しくはこちら:CSS1とCSS2の相違


Top

HOME

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。