CSSの最近のブログ記事

みなさん、どうもこんにちわ。
J-Payment WEBデザイナーの山賀です。

今年も、もうすぐ終わりですね。
つい最近までサクラが咲いていたかと思えば、もう雪が降る季節になってしまいましたね。
今年最後のデザイナーブログです。

よくチェックしているWebCreatorsのサイトに興味深い記事が掲載されていました。

■CSSだけでリボンのようなデザインをつくりたい■
http://www.mdn.co.jp/di/articles/2295/?page=2

Webでよく見られる巻きつきリボン。
普通は画像を使用して表現するのですが、それをCSSだけで表現してしまおうという試みだそうです。

作成方法の説明は上記URLに掲載されているので割愛させて頂きますが、CSSだけでここまで表現が
できるのだな、と関心してしまいました。

CSS3のためIEとOperaでは角丸やドロップシャドウが反映されないのが残念ですが、利用してみる価値は
大いにありそうです。

Webデザイナーとしては、こういう細かいテクニックをしっかり身につけていきたいですね。
それでは、また来年にお会いしましょう。
よいお年を！

山賀

こんにちは。事業戦略室の竹内です。

先日、社内で軽く説明する機会があったので
今日はちょっと便利なCSSハックをご紹介します。

body {
    color: red; /* 通常（全ブラウザに適用） */
    color : green\9; /* IE8以下に適用 */
    *color : yellow; /* IE7以下に適用 */
    _color : orange; /* IE6のみ適用 */
}

\、9、*、_の4文字でIE6,7,8を
区別する事が出来ます。

デバッグの際に是非使ってみて下さい。

こんにちは。事業戦略室の竹内です。

社内で説明する機会があったので
今回は簡単に書けるclearfixについてご紹介します。

よく見る一般的なclearfixがこれ...

.clearfix:after {
content: "."; /* 新しい要素を作る */
display: block; /* ブロックレベル要素に */
clear: both;
height: 0;
visibility: hidden;
}

.clearfix {
min-height: 1px;
}

* html .clearfix {
height: 1px;
/*\*//*/
height: auto;
overflow: hidden;
/**/
}

上記を簡素化したclearfixがこちら...

.clearfix {
overflow:hidden; /*モダンブラウザ用*/
_zoom:1; 　　　　/*IE用*/
}

ぜひ使ってみて下さい。

竹内

こんにちは。
Webデザイナーの鈴木です。

徐々にサイト作成に慣れてきました。
CSSハックなどもすこしずつためしていっています。
しかし、やはりまだ画像や配色で物足りない部分が
多々あり、フリーの画像を編集したりして、すこし
ずつバランスを整えています。
いろいろCSSの技術について紹介しているサイトが
あるのですが、今の自分にはかなりレベルが高いと
感じられるものもあり、とても勉強になります。
ということで、最近参考にしているサイトです。

http://www.webbibo.com/

他にもっと実用的なことを具体的に説明している
サイトはないか探しています。
例えばCSSの設計（ブラウザの初期化やCSSハックを
@importで振り分け)などです。というより今一番欲しい
ノウハウです。
目標としてはiPhoneやスマホや携帯にも対応できるよ
うにしたいです。

 

みなさん、どうもこんにちわ。

J-Payment WEBデザイナーの山賀です。

 

今回は私がCSSでコーディングする際に

必ずといっていいほどお世話になっている書籍をご紹介したいと思います。

 

「ガレリアCSS プロに学ぶスタイルシートの定番デザイン」

http://amzn.to/90dKfH

（ちなみにガレリアはスペイン語でギャラリーの意味です。）

 

この書籍は初心者から中級者向けのCSSテクニックが惜しみなく公開されています。

CSSのタグ辞典を見ているだけでは分からない、実践向きのテクニックが

とても分かりやすく掲載されているので、書籍通りに制作していけば

かなりのCSSテクニックが身についてくると思います。

 

「こういう風に表現したいんだけど、どうコーディングすればいいんだろう？」

と迷ったときにはこの書籍で調べることにしています。

まだ、チャレンジしていない表現方法がたくさんあるのですが、

少しずつチャレンジしてコーディングのレベルをあげていきたいですね！

 

最後にウォルト・ディズニーの名言をひとこと。

「現状維持では、後退するばかりである。」

現状のコーディングスキルに満足せず常に前進しなければ！

と思わせてくれる名言でした。

 

それでは、また来週にお会いしましょう。

 

山賀

GoogleがリリースしたフォントのAPI。

今回公開された Google の API は JavaScriptでなくCSS。

使いたいフォントをディレクトリから選び、リンクしたCSSファイルに
変数としてフォント名を記述するだけになります。

Getting Started

ふむー。便利です。

竹内

HTML5+CSS3の技術を使った「CSS Nite LP9連動 第2回コーディングコンテスト」。

実用的なデザインをもとにHTML5+CSS3を実装していくこのコンテストは
作成する上でのヒントがたくさん詰まっていると思いました。

少しずつ勉強はしているものの、
なかなか現場で実践するまでに至らないHTML5+CSS3。

改めて確認すると
覚える事がいっぱいだなぁ...（笑

また、審査委員長の言葉が印象的で
時代の流れというものを実感しました。

実際に課題に取り組まれた方は多かれ少なかれ感じたかもしれませんが、従来の「絵として完成したPSDを渡されてそれを再現するためにコーディング」というフローは見直しを迫られるでしょう。

少なくともHTML5やCSS3などの新しい技術の利点の一つである「迅速な開発が可能」という恩恵を享受するためには業務の分担範囲を再考する必要がありそうです。

竹内

こんにちは。事業戦略室の竹内です。
前回の名残でCSS3ネタを...。

CSS2.1と比べて、CSS3には
多数のセレクタが追加されています。

中でも感動したのは
疑似クラスセレクタの充実ぶりです。

個人的に便利だなと思ったセレクタを
一部ご紹介します。

━━━━━━━━━━━━━━━━
/* E...要素、(n)...n番目 */
E:nth-child(n)
━━━━━━━━━━━━━━━━

E要素の親の中のn番目のE要素を指定します。
それ以外にも下記のような指定も可能。

━━━━━━━━━━━━━━━━
/* 整数の場合は、そのままn番目 */
E:nth-child(1)
----------------------------------------------------
/* nには0から順に整数が入り計算されるので、奇数番目指定 */
E:nth-child(2n+1)
----------------------------------------------------
/* 奇数番目指定、(2n+1)と同じ結果 */
E:nth-child(odd)
----------------------------------------------------
/* nには0から順に整数が入り計算されるので、偶数番目指定 */
E:nth-child(2n)
----------------------------------------------------
/* 奇数番目指定、(2n)と同じ結果 */
E:nth-child(even)
━━━━━━━━━━━━━━━━

なんて便利なんでしょう！

今回ご紹介した新セレクタが使用すれば
idやclassをぐっと減らすことができ、
ソースコードを簡素化できそうです。

こんにちは。
事業戦略室の竹内です。

最近のサイト制作のトレンドの一つに
Progressive Enhancement（プログレッシブ・エンハンスメント）と
いう考え方があります。

これはどのブラウザでも情報が欠けることなく参照できるが、
最新のブラウザであればよりリッチに見ることが出来、
古いブラウザではデザイン的に劣っても情報が欠けることなく
参照できるようにする、というもの。

CSS3をサポートしているFirefoxでは枠が角丸で表示されるが、
CSS3をサポートしていないIEでは枠が直角で表示されるなど、
要するに情報の閲覧に支障がなければブラウザごとに表示が
違っても良いじゃないかという考え方です。
（CSS3を利用したデザインをメインにしてしまうと
この考えを利用できませんが...）

IEがCSS3に対応するまでにまだまだ時間がかかりそうですが、
CSS3を利用しているサイトがどんどん増加している昨今。

数年後を見据えて今からCSS3に慣れておこうかと思います。
Let's Progressive Enhancement!!

竹内