Archive for the ‘CSS’ Category
土曜日, 5月 23rd, 2009
CSS3を使えば画像を使わずに角丸を表現する事が出来ます。
早速使ってみました。
すべての角に角丸を適用した場合
CSSソース
[css]#css3_corner{
font-family: Arial;
border: 5px solid #dedede;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
padding: 15px 25px;
height: inherit;
width: 350px;
}
[/css]
一部にだけ適用させてこんな角丸も可能。
CSSソース
[css]
#css3_corner2{
font-family: Arial;
border: 5px solid #dedede;
-moz-border-radius-topleft: 15px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 15px;
-moz-border-radius-bottomleft: 15px;
-webkit-border-top-left-radius: 15px;
-webkit-border-top-right-radius: ...
Posted in CSS | 4 Comments »
月曜日, 11月 3rd, 2008
CSSで作るドロップダウンメニューのフレームワークを紹介します。
読み込むスタイルシートを変える事によってメニューのデザインを簡単に変える事が出来ます。
CSSとJavascriptの外部ファイルを読み込み、リストタグでメニューを作ってidやclassを設定する必要があります。
メニューの種類
水平面
デモはこちら
水平面で下から上
デモはこちら
水平面直線
デモはこちら
垂直な左から右
デモはこちら
...
Posted in CSS | No Comments »
金曜日, 8月 22nd, 2008
CSSでのコーディング作業を効率よくする為のHTML・CSSのテンプレートを紹介します。
Dyanamic Drive
２カラム、３カラム、左フレームレイアウト、右フレームレイアウト。
その他、フォームCSSやCSSで作るメニューなどのテンプレートがたくさんあります。
Code Sucks
レイアウトの数がかなり多くあります。
cssだけでなくPHPやJavaScriptもあります。
Layout Gala
４０個のレイアウトがあります。
ダウンロードは一括でも個別でも出来ます。
CSS Creator
ブラウザ上でヘッダーやフッターなどレイアウトを指定するとソースが生成されます。
Whiteboard
WordPressのテーマのフレームワークです。
Via：Blank Themes, Frameworks and Templates: Resources to Speed Up Your Development Time
Posted in CSS | No Comments »
日曜日, 8月 10th, 2008
使えるCSSトリックの紹介です。
Design centered horizontally
ページの中心に配置する。
[source:css]
div#container {margin: 0 auto;}
[/source]
※IEでは有効ではありません。
Position an element center screen
エレメントを中心に配置したい場合のCSS。
[source:css]
div.popup{
height:400px;
width:500px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -200px;
margin-left: -250px;
background-color:pink;
}
[/source]
divで指定した高さと横幅をposition: absolute;で真ん中に指定。
その後、指定した高さと横幅の50%分マイナスする事により中心に配置できます。
Simple navigation bar
簡単でシンプルなナビゲーションバー
まず、XHTMLで以下のソースを書きます。
[source:css]
Peakflow Design
Google
Zen Habits
[/source]
次にCSSに以下のソースを加えます。
[source:css]
#navbar ul li {display:inline;margin:0 10px 0 0;}
#navbar ul li a {color: #333;display:block;float:left;padding:5px;}
#navbar ul li a:hover {background:#eee;color:black;}
[/source]
サンプルはこちら→サンプル
Multiple classes applied to one element
複数のクラスが1つの要素に適応される。
まず、２つのクラスを指定します。
[source:css]
.red {color: red;}
.bold {font-weight: strong;}
[/source]
そして、以下のようにすると２つのクラス要素が1つのクラスで適応できます。
[source:css]
This text will be red yet also ...
Posted in CSS | No Comments »
月曜日, 8月 4th, 2008
CSSのフレームワークの紹介です。
CSSフレームワークは各ブラウザ間での相違を吸収してくれるので便利です。
是非活用してみてください。
Elements CSS Frameworks
YUI Grids CSS
YAML CSS Framework
Blueprint CSS
Schema Web Design Framework
CleverCSS
Tripoli CSS Framework
ESWAT Web Project Framework
Boilerplate CSS Framework
WYMstyle CSS Framework
ESWAT Web Project Framework
The Logic CSS framework
Elements 960 Grid System
Emastic CSS Framework
via：What is CSS Framework
Posted in CSS | No Comments »
