KOJIKA17

最初からブラウザに設定されているスタイルシートを、「User Agent Style Sheets」といいます。(以下、UA Style Sheets)
ここ数年でUA Style Sheetsに変化があり、どのような変化があるのか知っておくと、リセットCSSの見直しなどに役立ちます。

CSSのスタイリングではIDを使用しない、という話をよく聞くようになりました。
私も最近は、IDを使わずにコーディングしているので所感を書きます。

数カ月前に@suzukisan__が投稿された「Illustrator Unlimited Appearance - suzuki | JAYPEG」は、Illustratorのアピアランスを駆使して、1つのオブジェクトからカメラのアイコンを作るという、面白い試みをされていました。
アピアランスの可能性を示す、インパクトのある内容であったため、記憶に残っている方もいることでしょう。

このアイコンが投稿されてから時間がたっていますが、HTMLとCSSに分解されるイメージが自然に湧いてきたので、少しばかりのHTMLとCSSでアイコンを模写してみました。

2011年にclearfixについて記事を書きましたが、Micro clearfixなどの新しい手法も出てきました。
記事を書いてから2年が経ち、色々思うところも出てきたので、改めてclearfixについて書きます。

HTMLのidとclassに顔文字記述しても、CSSではスタイルが適用されません。
ただCSSをごにょごにょするだけで、id, classを顔文字、日本語でもコーディングすることができます。

誰が得をするのか全くわからないけど、紹介します。

CSS Preprocessor Advent Calendar 2012 19日目の記事です。

CSS Preprocessorは、CSSに拡張機能を持たせるメタ言語と呼ばれるものです。
CSS Preprocessorでよく耳にするものに、SassやLessがあります。
私も以前からSassを使用していましたが、最近Stylusを使い始めたので、SassとStylusの比較を行ってみます。

JavaScriptを使用せずに、HTMLとCSSを駆使して、ゲームやスライドショーなどを作る、CSS Programming Advent Calendar 2012に参加してみることにしました。

私が題材にしたのは、昔よくFlashのゲームであった、バーを動かしてボールが反射するゲームです。

テーブルレイアウトと聞くと<table>タグを使い、入れ子で<tr>, <td>タグのオンパレードを連想する人も多いと思いますが、今回の内容はCSSの display: table; を使用したテーブルレイアウトの話です。

Emmetは、Zen-Codingの次期バージョンの名前です。
Zen-CodingはHTMLの記述方法が取り上げられることが多いですが、個人的には、CSSの入力補助こそ真価が発揮されると思っています。
私は、EmmetまたはZen-Codingがなければ、CSSのプロパティを打つのが苦痛なほどです。

Emmetから、さらに多くのプロパティに対応し、数値も含めて展開できるようになりました。CSSの記述がより使いやすくなったので、紹介します。

Sergey Chikuyonok氏のGithubを見に行ったら、"Emmet (ex-Zen Coding)" という気になる記述があり、気になったので調べてみました。

デフォルトスタイルシートの構造を知ることによって、闇雲に指定しているリセットCSSから抜け出すことができます。

toggle()や変数、calc、:matchなど、今までにないCSSプロパティ、セレクタが提案・実装されて、CSS3, CSS4も楽しくなってきています。
border-radiusや、box-shadowなども、古いAndroidブラウザ以外なら、prefixなしで使える状況も増えてきました。

最新技術は、これから必要になってくるかもしれませんが、基本も大切です。
float や position など、CSSコーディングを悩ませるタネはいくつもありますが、今回はその中でも私がCSSで一番難しいと思う margin について書きます。

「marginはバグが多い」という声をたまに聞きます。
しかし話を聞いてみると、正常な動作をバグと間違って認識しているケースもあります。
marginを正しく理解することによって、効率的なレイアウトを構築できますので、基本的な内容ですが、読んで頂ければ幸いです。

HTML/CSSのコーディング速度が3倍上がる、といわれるZen-Coding。
使いこなしてコーディング速度が3倍になっていますか?

SassとかLessとか流行ってる中、あえてZen-Codingを紹介します。
(Zen-Codingの現在のバージョンは0.7です。 古いバージョンを使用している方はアップデートをお勧めします。)

追記:

Zen-Codingの最新版は、「Emmet」に名前が変更されて2013年2月24日に正式リリースされました

サイトを制作する時は完全原稿で進めたい。
でも原稿が間に合わないので、とりあえずダミーのテキスト、画像を配置。

そんな場面がありますが、ダミーテキストやダミー画像を複数配置すると、それらを削除する時、ダミーのテキストが残っていたり、画像がディレクトリに残っていたり、ヒューマンエラーが起こりやすいので、効率よくできないか考えてみました。

今まで5回ほどブログのデザインを変更し、その度にHTMLのソースなどに、簡単な解説を入れてきました。
最近、Google Style Guideが流行ってる(?)ので、それっぽくゆるく書いてみます。

コーディングで時間のかかる要素の1つとして、id,class名や画像名などの命名規則が挙げられます。
特に中規模、大規模のサイトで、適当な名前を付けると名前が被る確率が上がり、
その結果、画像の上書きや不要なプロパティがかかってしまうなど、よくない結果になることも考えられます。
一つの例として、私の命名規則について紹介してます。参考程度に読んで頂けると幸いです。

Arial

自分の好きなフォントを記事にする、#LOVEFONT という企画に、
webcre8のゆうさんに声をかけて頂いたので、Arialについて記事を書かせて頂きます。

Webデザイナーが、Webサイトのパフォーマンスを重視する傾向はあまり無いように感じますが重要なことです。

Googleでは、0.5秒遅くなると、検索数が20%減少する
amazonでは、0.1秒遅くなると、売り上げが1%減少する

という報告もあるようです。 Webサイトのパフォーマンスはコンバージョンにも影響する大切な部分。
今回はWebサイトのパフォーマンスを上げる方法を取り上げます。

よく黄金比という言葉を聞いたりしますが、実際にどういうものかわかっていなかったり、
デザインの当てはめ方が分からなかったりすることが多いので、簡単にまとめてみました。

Twitterなどを見てると、
「IE6がー!」とか
「IE6,7,8,9、Firefox、webkit系、Operaで同じレイアウトにするの大変」などのツイートをたまに見るので、クロスブラウザでも差が出にくく、効率の良くなるコーディングの基礎を紹介します。

現在floatを解除する方法として、"clearfix"がよく使用されていると思います。
しかしclearfixが初めて公開されたのが、2004年5月8日。
それ以来、7年間ほとんど形を変えずにclearfixが使用されてきました。
ブラウザもCSS3を多く対応してきている中で、「それで良いのか?」という疑問を新しい形を模索してみました。

ソースコードはテキストで、見た目は画像に変える画像置換について、CSSでよく使われる方法はtext-indent:-999pxが有名だと思いますが、発見したのでメモ。

今回、色々突き詰めて考えながら、ブログのデザインを新しく設計し直しました。 リニューアルしたポイントをまとめてみます。

CSSリセットを改変している時に、「CSSリセットは本当に必要か?」ということを疑問に思うようになってきました。
例を挙げると

h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal;}
h1.title {font-weight:bold;}

上記の例のように、元々のデフォルトのfont-weight:boldなのに、CSSリセットでnormalにして、さらにboldに戻すということをしています。
これだと単に、記述量と処理を増やしているだけに過ぎません。

「デフォルトCSSを理解すれば、CSSリセットはいらないのではないか?」という考えの元、デフォルトのCSSを調べてみました。

影をつけたり、角丸にしたり、便利なCSS3。モダンブラウザは続々と実装されています。
しかし依然としてIEのシェア率が多い現在では、「CSS3を使うのは、ちょっと・・・」と思っている方も多いと思います。
そこでIEのfilterを利用し、JavaScriptや画像を使わずに、CSS3に近い効果を表現できる、
実用的なCSSのスニペットを紹介致します。

コーディング速度が"3倍!10倍!上がる"と言われてるZen-Coding
もうすでに使っていらっしゃる方はDreamweverやAptana、Coda等に入れてZen-Codingライフを楽しんでいらっしゃる方も多いかと思います。
逆に今までのインデントが違ったり、imgだとsrcとaltの位置が違ったり、コーディングに微妙な差が出てきて、使わなくなった方もいると思います。

元々私もインデントや微妙に自分と違うコードを出されることが嫌で、Zen-Codingをやめていました。
しかしカスタマイズすることにより凄い使いやすく、手放せなくなったので、Zen-Codingのカスタマイズ方法をご紹介致します。

追記:

Zen-Codingの最新版は、「Emmet」に名前が変更されて2013年2月24日に正式リリースされました

タイトル通り、"コーディングしにくいデザインをHTMLとCSSのみで組んでみた(前編)" の後編です。
今回はクロスブラウザ(IE、FireFox、Webkit系とか)に対応させるために、ちょっとだけテクニック的な事も使っていきます。

最後に完成したページをzipで公開しています。
ダウンロードして煮るなり、焼くなりしてくれると良いよ!

いつも通りデザイン系のサイトを見てると、
"Fresh Examples of Web Design and Interfaces" という記事を見つけました。
綺麗だけど、コーディングが難しそうなデザイン。コーダーにとってドSなデザインです。

そしてtwitterでこんなことをつぶやいてみました。

さっきのドSなデザインの中から、1つ選んでコーディングの段階をブログに載せたら、面白いかな?w

そしたら、"ぜひ"いう声があったので、ノリでやってみました。

Webページの内容が、"何を意味するのか"をコンピュータが効率よく情報を収集・解釈できるようにする構想を「セマンティックWeb」「セマンティック(X)HTML」などと呼びます。
セマンティックHTMLを始めるにあたりMicroformatsとMicrodataの違いについて、
"どう違うのか"分かりづらかったのでまとめてみました。

とあるIEのバグを調べていたら、Lessに近い形でCSSをPHPで書けることを知ったのでメモ。

まずHTMLのlink要素のファイル名を修正することから始めます。ここでのCSSファイル名は仮にdummy.phpとします。

<link rel="stylesheet" type="text/css" href="dummy.php" /> 

Categories