Asial Blog

Recruit! Asialで一緒に働きませんか?

鴨田健次

Webディレクター/Webデザイナー

某無料動画配信サービスでWEBデザイナー/コーダーとして腕を磨き、現在はアシアルにて、WEBディレクターとして精進しています。シンプルで見やすいデザインが好きです。。

たずさわった仕事

CSSの優先順位について

カテゴリ :
Monaca
タグ :
Monaca
icon
こんにちは、鴨田です。
この間、弊社スクールのTAを務める機会があって、そこでCSSの優先順位について聞かれたので、ここでまとめておきたいと思います。
初歩的なことですが、重要なことでもありますので、知っている人もおさらいのつもりでご覧下さい。

○セレクタの読み込み順について

同じセレクタが指定されている場合は、後から読みこまれたものが優先されます。
つまり、2回同じセレクタが存在している場合、後から書かれたもののスタイルが適用されます。


  1. p {color:#0f0;} /* こちらは劣性 */
  2. p {color:#00f;} /* こちらが優先 */

○セレクタの優先順位について

一般的に、次のような順番で優先順位が決まっています。

 インラインによる指定 > idによる指定 > class・疑似class・属性による指定 > 要素による指定

インラインによる指定:

  1. <p style="color:#f00">

id指定:

  1. <p id="id">


>>BOX #id {color:#0f0;} < class指定:

  1. <p class="class">
  2. .class {color:#00f;}


>>BOX .class {color:#00f;} < 要素による指定:

  1. <p>


>>BOX p {color:#f0f;} < あとは、それぞれどれだけ詳しく書くかによって決まります。
ポイント制という考え方もあるようです。

○ポイントの数え方

指定の仕方によりポイント数が変わってきます。

 インライン指定:1000点
 idによる指定:100点
 class・疑似class・属性による指定:10点
 要素による指定:1点

  1. <head>
  2. <title>CSSの優先順位</title>
  3. <style type="text/css">
  4. <!--
  5. #id1 p {color:#0f0;} /* 101点 */
  6. #id1 .class1 p {color:#00f;} /* 111点 */
  7. #id1 #id2 p {color:#ff0;} /* 201点 */
  8. #id1 #id2 .class2 p {color:#ff0;} /* 211点 */
  9. #id1 .class1 #id2 .class2 p{color:#f0f;} /* 221点 */
  10. -->
  11. </style>
  12. </head>
  13. <body>
  14. <div id="id1">
  15.   <div class="class1">
  16.     <div id="id2">
  17.       <div class="class2">
  18.         <p style="color:#f00;">ほげほげ</p> <!-- 1000点 -->
  19.         <p>ほにゃらら</p>
  20.       </div>
  21.     </div>
  22.   </div>
  23. </div>
  24. </body>
とした場合、

「ほにゃらら」と「ほげほげ」はHTMLの構造上は同列にありますが、
「ほげほげ」にはHTMLでインライン指定がされているので、color="#f00が適用され、
「ほにゃらら」には、CSSで一番詳細に指定され、点数の高いcolor:#f0fが適用されます。



ほげほげ



ほにゃらら



ただし、厳密にはポイント制が絶対ではなく、id*1(100点) > class*11(110点)なので、
classなどを積み重ねても、優先順位で上位にある指定がされていれば、
そちらが優先して適用されることになりますので、注意してください。

下記の場合、classを11個重ねた指定よりも、idを1つだけ指定している方が優先順位が高くなります。

  1. <head>
  2. <title>CSSの優先順位</title>
  3. <style type="text/css">
  4. <!--
  5. #sample p {color:#f00;} /* 101点 */
  6. .sample1 .sample2 .sample3 .sample4 .sample5 .sample6 .sample7 .sample8 .sample9 .sample10 .sample11 p {color:#00f;} /* 111点 */
  7. -->
  8. </style>
  9. </head>
  10. <body>
  11. <div id="sample">
  12.   <div class="sample1">
  13.     <div class="sample2">
  14.       <div class="sample3">
  15.         <div class="sample4">
  16.           <div class="sample5">
  17.             <div class="sample6">
  18.               <div class="sample7">
  19.                 <div class="sample8">
  20.                   <div class="sample9">
  21.                     <div class="sample10">
  22.                       <div class="sample11">
  23.                         <p>赤くなりますよ</p>
  24.                       </div>
  25.                     </div>
  26.                   </div>
  27.                 </div>
  28.               </div>
  29.             </div>
  30.           </div>
  31.         </div>
  32.       </div>
  33.     </div>
  34.   </div>
  35. </div>
  36. </body>

赤くなりますよ




他人の書いたコードをいじらなければならない時、
パースされて自分でいじることの出来ない場所のスタイルを強引に変えたい時には、
優先順位を考えて、どうやったら他の場所に影響を出さず、
上書きできるのかを考えることがあると思いますので、参考にしてください。

「ASICS SHOE FINDER」をリリースしました

カテゴリ :
Monaca
タグ :
Monaca
ASICS SHOE FINDER
こんにちは、鴨田です。

先日、3/12にアシアル社のプレスリリースとして、株式会社アシックスと共同でiPadアプリ「ASICS SHOE FINDER(アシックス シューファインダー)」を開発したことを発表させていただきました。
http://www.asial.co.jp/pressrelease/365

非エンジニア出身の新米Webディレクターが覚えておくべき10の用語 その2

カテゴリ :
デザイン・UI
タグ :
Tech
ディレクター
ディレクション
用語
icon
こんにちは、鴨田です。

先日、非エンジニア出身の新米Webディレクターが覚えておくべき10の用語という記事を書いたのですが、
今回はその続きというか、第2弾をお送りしたいと思います。

もしかしたら、用語を説明するための用語が分からないのではないかという気もしますが、そこは自分で調べると吉なんじゃないかと思います。

iOS、Androidにおけるposition:fixed;の制限

カテゴリ :
Monaca
タグ :
Monaca
icon
こんにちは、鴨田です。

スマートフォンアプリを作成する際、
やはりタイトルバーやフッターメニューは欠かせないところです。

jQuery MobileやiUIなどのライブラリを使えば、大して苦労はしないのですが、
ライブラリを使いたくない場合もあると思います。

仮に独自で実装する場合は、上部と下部に固定する必要があり、
HTMLになじみのある人であれば、すぐに"position:fixed;"を使えばいいだろう、
と気づくと思います。

確かにそうなのですが、実は"position:fixed;"を使用するには、
ある程度の条件が存在します。

CSS3で多用するようになったプロパティ3つ

カテゴリ :
Monaca
タグ :
Monaca
icon
こんにちは、鴨田です。
スマホ対応サイトやMonacaを使ってアプリを作る場合、

CSS3を使って、なるべく画像を作らない傾向にあると思います。
きっと誰もが、よく使うようになった(これからなっていく)プロパティについて、

ちょっと書いてみたいと思います。

非エンジニア出身の新米Webディレクターが覚えておくべき10の用語

カテゴリ :
デザイン・UI
タグ :
Tech
ディレクター
ディレクション
用語
icon
こんにちは、鴨田です。

元々WEBデザイナーをやっていたのですが、
最近は何かとディレクションみたいなことをする機会が多く、
その度に色々と分からない用語があるので、少しですがまとめてみました。

自分の説明でよく分からない単語があった場合、各自で調べてみて下さい。
おそらく能動的に調べた方が、しっかり学べると思います。

Monacaウェブサイトデザインリニューアル計画

カテゴリ :
Monaca
タグ :
Monaca
icon
こんにちは、鴨田です。

近々、MonacaのWebサイトを大きくデザインリニューアルする予定です。
現在、デザイン作業の大詰め段階を迎えておりますので、
後は、自分のコーディング力次第ということになっています。

ドキュメントレイアウトと機能美

カテゴリ :
Monaca
タグ :
Monaca
icon
こんにちは、鴨田です。

現在、Monacaドキュメントのデザイン変更に取り組んでいます。
おそらく、今のドキュメントのレイアウトは見にくいのではないかと思っております。

元々デザイナーですので、フレームワークやサービスのドキュメントというものは、
あまり見慣れていないこともあり、どのようなレイアウトが好ましいのか、
という調査から始まっております。

HTML5+CSS3の導入時に役立つ7つの設定

カテゴリ :
フロントエンド(HTML5)
タグ :
Tech
HTML5
CSS3
icon
こんにちは、鴨田です。

個人的に仕事の大半はスマートフォン関連なので、最近のマークアップはほとんど全てHTML5+CSS3で行っています。
とはいえ、PC向けのサイトではまだまだHTML4.01、XHTML1.0、CSS2.1を使用している場合が多いと思います。

ですので、今回はHTML5+CSS3を導入するにあたって、
役立つと思う7つの設定について、書きたいと思います。

IDEのUIを考える

カテゴリ :
Monaca
タグ :
Monaca
icon
こんにちは、鴨田です。

Monacaのプラグインとして採用してるPhoneGapを開発しているnitobi社がAdobe社に買収されるというニュースがありました。
今後PhoneGapがどのように展開されていくのかまだ分かりませんが、推移を見守りたいと思います。