Subscribe: Web Design KOJIKA17
http://kojika17.com/blog-entry.atom
Added By: Feedage Forager Feedage Grade B rated
Language:
Tags:
Rate this Feed
Rate this feedRate this feedRate this feedRate this feedRate this feed
Rate this feed 1 starRate this feed 2 starRate this feed 3 starRate this feed 4 starRate this feed 5 star

Comments (0)

Feed Details and Statistics Feed Statistics
Preview: Web Design KOJIKA17

Web Design KOJIKA17





Updated: 2014-02-05T00:00:00+09:00

 



ここ数年のブラウザのデフォルトスタイルシート。縦書きとかHTML5とか。

2014-02-05T00:00:00+09:00

最初からブラウザに設定されているスタイルシートを、「User Agent Style Sheets」といいます。(以下、UA Style Sheets) ここ数年でUA Style Sheetsに変化があり、どのような変化があるのか知っておくと、リセットCSSの見直しなどに役立ちます。 最初からブラウザに設定されているスタイルシートを、「User Agent Style Sheets」といいます。(以下、UA Style Sheets) ここ数年でUA Style Sheetsに変化があり、どのような変化があるのか知っておくと、リセットCSSの見直しなどに役立ちます。 UA Style Sheets の margin p要素に定義されているUA Style Sheetsを例にすると、IE8などは私たちがいつも利用しているmarginによって指定されています。しかしGoogle ChromeやFirefoxなどのUA Style Shteetsでは、margin-start, margin-endなどの論理プロパティが利用されています。 IE8: p要素のUA Style Sheets p { display: block; margin: 1em 0; } Webkit: p要素のUA Style Sheets「__qem」という単位は、互換モードでmarginの相殺を行わないようにする独自拡張機能です。 p { display: block; -webkit-margin-before: 1__qem; -webkit-margin-after: 1__qem; -webkit-margin-start: 0; -webkit-margin-end: 0; } margin-startなどの論理プロパティは、言語の方向に柔軟に対応できるプロパティであり、横書きから縦書きになったとしても一定の間隔を保てます。私たちがいつも使用しているmarginプロパティは、画面にあわせて間隔を指定するのに対して、論理プロパティは文字の始まりにあわせて相対的に間隔を指定できるものです。 marginとmargin-startの違い このmarginの論理プロパティの変化は、リセットCSSの「margin: 0;」などで打ち消されてしまうことが多いため、気づきにくい変化です。今後、電子書籍を作成する場合に重宝しそうなプロパティなので、このような変化があることを覚えておいてもいいかもしれません。 HTML5の新要素の対応 HTML5にheader, article, section要素などの新要素が加わったことによって、UA Style Sheetsの対応も変化しています。 HTML5が登場し始めたブラウザのUA Style Sheetsは、新要素がインラインとして表示されていました。これはブラウザがHTML5に対応していなかった時のことであり、未知の要素として初期値の「display: inline;」が適用されていただけでした。 しかし現在のモダンブラウザでは、HTML5の新しい要素もブロックとして表示されるように変化し、marginなどの指定が追加されている新要素もあります。 そのためリセットCSSで新要素に、「display: block;」を定義するだけでは不十分です。Google Chromeではfigure要素にmarginが指定されているので、「margin: 0;」の指定も追加した方がいいでしょう。 よく見るHTML5のリセットCSS 抜粋 article, aside, figcaption, figure, footer, header, nav, section { display: block; } UA Style Sheetsの変化にあわせて、marginを追加paddingについては、menu要素などを含める時のみ利用するようにしましょう。 article, aside, figcaption, figure, footer, header, nav, section { display: block; margin: 0; } アウトライン・アルゴリズムとh1 「Normalize.css」というUA Style Sheetsを生かし、ブラウザごとの差異を少なくすることを目的としたCSSがあります。 このNormalize.cssには、見出し要素の中で唯一、h1のみが記述されています。 normalize.css v3.0.0 抜粋 h1 { font-size: 2em; margin: 0.67em 0; } mark { background: #ff0; color: #000; } small { font-size: 80%; } なぜh2, h3要素などの見出しのCSSは記述され[...]



Autoprefixerによる、CSS3の管理

2014-01-08T00:00:00+09:00

CSS3を使用する時に、ベンダープレフィックスを付けていますか?自分でプレフィックスをつけたり、SassなどのCSSメタ言語やツールを利用するなど、さまざまな方法がありますが、 せっかく付けたベンダープレフィックスも適切でない場合もあります。適切にベンダープレフィックスを付与するツールに、CSS Postprocessorの「Autoprefixer」というものがあるので紹介します。 CSS3を使用する時に、ベンダープレフィックスを付けていますか?自分でプレフィックスをつけたり、SassなどのCSSメタ言語やツールを利用するなど、さまざまな方法がありますが、 せっかく付けたベンダープレフィックスも適切でない場合もあります。適切にベンダープレフィックスを付与するツールに、CSS Postprocessorの「Autoprefixer」というものがあるので紹介します。 ベンダープレフィックスをいつまで付け続けるのか ベンダープレフィックスはブラウザの試験的、または独自拡張で実装されているものであり、W3Cの仕様がある程度固まると、ブラウザはベンダープレフィックスが外すことが推奨されています。 現在、CSS3の一部の仕様は、すでに勧告や勧告候補まで上がっているものがあり、最新のブラウザではベンダープレフィックスなしで作動するCSSも増えてきています。またグラデーションやFlexible Box Layoutなど、CSS3によっては仕様の更新時に大幅な変更が加えられたものがあり、「CSS3には、ベンダープレフィックスを付けとけばいい」という考えはやめた方がいいでしょう。 例えば、border-radiusにベンダープレフィックスが必要なブラウザは、Firefox 3.6やiOS Safari 3.2、Android Browser 2.1など、IE8がリリースされた2009年前後のブラウザばかりです。 CSSによっては、ベンダープレフィックスを付けるどころか、なしでも問題ない環境が整いつつあります。 以下の記述は2014年っぽくない -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; 今っぽい感じ border-radius: 4px; Sassを使ったベンダープレフィックスの限界 border-radiusのように、数年前から多くのブラウザがサポートしているCSSだけではありません。 仕様の改定やブラウザの開発スピードによって、CSS3の対応はブラウザのバージョンによって、まちまちです。 ベンダープレフィックスを付与するのに、SassといったCSS Preprocessorのmixinを利用している人もいるでしょう。 CompassやBorbonといったフレームワークやmixin集を利用したり、自分でmixin集を作成することで、ベンダープレフィックスを付ける作業を簡易化できます。 これらを使用することで一定以上の品質を保てますが、Compassで出力されるCSS3は、すでに時代遅れの記述ばかりです。CompassのGitHubページを見ると、CSS3のSCSSファイルはほとんどが2年前に更新されて、そのまま放置されているファイルばかりです。 先ほど紹介したborder-radiusも、Compassのデフォルトでは以下のように出力されます。 SCSS @import "compass"; .border-radius { @include border-radius(4px); } SCSSの出力 .border-radius { -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; } さまざまなベンダープレフィックスが付与されており、余計な記述を増やしている印象です。 またCompassのCSS3グラデーションを生成する仕組みは、ひとつ前の古い構[...]



IDを使わないCSSの設計

2013-09-10T00:00:00+09:00

CSSのスタイリングではIDを使用しない、という話をよく聞くようになりました。 私も最近は、IDを使わずにコーディングしているので所感を書きます。 CSSのスタイリングではIDを使用しない、という話をよく聞くようになりました。 私も最近は、IDを使わずにコーディングしているので所感を書きます。 CSSでIDを使わない 「IDを使わない」ということをHTMLの変化で示すと、以下のようになります。 ↓↓↓↓ IDだったところが、すべてclassに置き換わっています。IDを使うことに慣れていると気持ち悪いソースですね。私もこのソースを初めて見た時は、違和感しかありませんでした。 しかし「必ずしもIDとclassを使用しなければならない」という決まりもありませんし、IDがなくてもスタイルを適用できます。 パフォーマンス的にclassを使用するよりもIDを使用する方が早いともいわれていますが、モダンブラウザのセレクタの読み込みが向上しており、IDやclassを比べてもそれほど差はでないでしょう。パフォーマンスを考えるのであれば、もっと別にやることがあるはずです。 これらは引き算的な考え方ですが、IDを使用しないメリットがいくつかあります。 スタイルを使いまわす CSSは、文章と装飾を分離させる理念の元に提唱された仕様の一つです。 10年以上前まではよく使用されていた centerタグ や fontタグ も、CSSの普及に伴い、出番が非常に少なくなりました。 center, fontタグを使用した例
red
blue
red
. . .
red
CSSを使用した例
red
blue
red
. . .
red
文章と装飾を分離させることによって、ページ内の見栄えから、サイトの全体の装飾の管理が容易になりました。 なぜなら、CSSはスタイルを共通化して、様々な箇所に振り分けることができるからです。 IDとclassのどちらも、サイト内の様々な箇所でスタイルを定義することができます。しかしページ単位で考えた場合に、IDのついたスタイルは1度しか出現させることができません。 ページ内で似たIDのスタイルを使い回したい場合は、以下のように複数のセレクタを繋がなくてはなりません。 /* SCSS #header { width: 48em; margin: 0 auto; } #contents { @extend #header; } #footer { #footer-inner { @extend #header; } } */ #header, #contents, #footer #footer-inner { width: 48em; margin: 0 auto; } 複数のセレクタを繋げるならまだいいですが、同じようなスタイルを分散して記述されているのを、たまに見か[...]



イラレのアピアランスで作れたアイコンが凄かったので、HTMLとCSSで模写した。

2013-08-07T00:00:00+09:00

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

(image)

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

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

HTML と CSS で作ったカメラアイコン

模写したカメラアイコンは、Internet Explorer 10以上 や、最新のChrome, Firefoxなどであれば表示されるはずです。

こちらがHTMLとCSSで書いたものになります。
ソースを見るまでが、ネタです。

(image)
画像のキャプチャーは、IE10

カメラアイコンの簡単な解説

HTML

イラレの「1つのオブジェクト」を、HTMLに置き換える時に、少し趣向を凝らしてみました。
やっていることは「1つのdiv」と変わらないので、これ系の遊びをしている方々は、すぐに実践できるでしょう。

HTMLはライトな感じに仕上げていますが、The W3C Markup Validation Serviceに投げても、一応通ります。

(image)

CSS

CSSが分解されたイメージは浮かんでいたものの面倒臭かったので、楽をするために疑似要素(::before, ::after)を使っています。

技術的には疑似要素を使わなくても、アイコンの再現が可能です。
@suzukisan__ が行っているような、本当の「1つのオブジェクト」を目指すのであれば、Gradients と Multipe Backgrounds を使用して、カオスな感じにすることをおすすめします。

なお、Gradientsの構文は、2012年4月17日付の CSS Image Values and Replaced Content Module Level 3の仕様だけを記述しており、ベンダープレフィックスも外しています。

早くベンダープレフィックスのない世界が来てほしいですね。

- イラレのアピアランスで作れたアイコンが凄かったので、HTMLとCSSで模写した。 -




floatを解除する手法のclearfix と 次世代のレイアウトの話

2013-06-20T00:00:00+09:00

2011年にclearfixについて記事を書きましたが、Micro clearfixなどの新しい手法も出てきました。 記事を書いてから2年が経ち、色々思うところも出てきたので、改めてclearfixについて書きます。 2011年にclearfixについて記事を書きましたが、Micro clearfixなどの新しい手法も出てきました。 記事を書いてから2年が経ち、色々思うところも出てきたので、改めてclearfixについて書きます。 floatを解除するには CSSでレイアウトの構築を行う際に、よくfloatプロパティが用いられます。 しかしfloatを使用すると、「親の背景が表示されない」「下の段のレイアウトが崩れる」などのトラブルが起こりやすくなります。 floatプロパティの特性 親の背景が表示されない理由は、floatプロパティを指定しているボックスが浮動化し、通常のボックスのフローから外されることが原因です。 通常フローから外されたボックスは、親のボックスの高さを認識できなくなり、その結果、高さによって描写領域が決まる背景が表示されないという状態になります。 またfloatプロパティは、一定方向に寄せて後続する内容を流し込むという特性があり、これよって意図しない後続のボックスまで流し込まれてレイアウトが崩れる場合があります。 この「浮動化」と「後続する内容の流し込み」という2つの特性によって、悩まされている人も多いのではないでしょうか。 親のボックスの高さが出ない例
clearプロパティについて floatの特性を解消するには、clearプロパティを使用します。 このプロパティを浮動化したボックスの後ろに使用すると、一般的に「floatを解除した」と呼ばれる状態になり、「後続する内容の流し込み」が解除されます。 floatプロパティをclearプロパティが解除する原理は、clearプロパティを適用したボックスにクリアランスというものが導入されます。このクリアランスは、margin-topプロパティを自動的に浮動化されたボックスの高さまで調整するような振る舞いをします。 「floatを解除する」というよりも、「floatの影響の及ばない範囲まで調整する」というニュアンスが良いかもしれません。 なおclearプロパティとmargin-topプロパティが同時に指定されている場合は、clearプロパティが優先されます。(IE6 と 兄弟に通常フローのボックスがある場合を除く) 親のボックスの高さを出す
しかしclearプロパティは浮動化したボックスの後ろに指定しなければなりません。そのため状況によっては「不要なHTML要素が増える」、または「HTMLの文法に問題が生じる」場合があります。 その問題を解決する方法が、clearfixと呼ばれる手法です。 clearfixとは clearfixを最初に考案したのは、オーストラリア人のWeb[...]