ここの情報は古いです。ご理解頂いた上でお取り扱いください。

Changes between Initial Version and Version 1 of pne-xhtmlcss/tips-note


Ignore:
Timestamp:
Jun 19, 2008, 5:07:12 PM (14 years ago)
Author:
takai
Comment:

2.12でのカスタムCSSの説明(ノート)

Legend:

Unmodified
Added
Removed
Modified
  • pne-xhtmlcss/tips-note

    v1 v1  
     1[[TOC]]
     2== HTMLとスタイル指定の関係 ==
     3文字の大きさや色、背景色、ボックスの幅やレイアウトなどの指定は、カスケーディングスタイルシート(CSS)という言語を記述することで行います。
     4この節では、どのような方針でマークアップを見直したかについて説明します。
     5
     6=== HTMLという語について ===
     7HTMLとXHTMLは、言語として文法規則が異なるといった違いはありますが、スタイル指定の観点からは特に気にする違いはありません。
     8ここでは、HTMLとXHTMLを総括する広い意味でのHTMLとして"HTML"という語を用います。
     9
     10=== HTMLとスタイル指定 ===
     11{{{
     12<h1>OpenPNEとは?</h1>
     13<p><img src="http://www.openpne.jp/images/top.png" alt="OpenPNE" />
     14SNSエンジン『OpenPNE』は、株式会社手嶋屋が中心となって...</p>
     15
     16<h2>OpenPNEプロジェクトの体制</h2>
     17<p>OpenPNEは<a href="http://www.tejimaya.com">手嶋屋</a>の社内実験プロジェクトとして...</p>
     18
     19<h2>OpenPNEプロジェクトの目的</h2>
     20<p><strong>「あらゆる組織にSNSを提供する」</strong></p>
     21<p>OpenPNE開発チームは、この目的のための最短最速の手段を選択し、プロジェクトの推進を行います。</p>
     22}}}
     23HTMLでは、このように内容がテキストで書かれています。画像も <img ~ /> といったように記述されています。
     24次のようにスタイルを記述することで、ブラウザで実際に表示した際の見栄えを決めることができます。
     25{{{
     26h1 {
     27        background-color: #0000FF;    /* 背景色を青に */
     28        color: #FFFFFF;               /* 文字色を白に */
     29        font-size: 200%;              /* 文字サイズを2倍に */
     30}
     31h2 {
     32        background-color: #0000FF;    /* 背景色を青に */
     33        color: #FFFFFF;               /* 文字色を白に */
     34}
     35img {
     36        float: left;                  /* 左に浮かせる */
     37}
     38strong {
     39        font-weight: bold;            /* 文字を太字に */
     40}
     41}}}
     42実際のものとは少し違いますが、このようにスタイル指定をすることで[http://www.openpne.jp/about/ OpenPNEとは?]のような見栄えが実現できます。
     43
     44=== 外部スタイルシートの利点 ===
     45スタイル指定をするだけであれば、前述の例は次のように書くこともできます。
     46{{{
     47<h2 style="background-color: #0000FF; color: #FFFFFF;">OpenPNEプロジェクトの体制</h2>
     48<p>OpenPNEは<a href="http://www.tejimaya.com">手嶋屋</a>の社内実験プロジェクトとして...</p>
     49
     50<h2 style="background-color: #0000FF; color: #FFFFFF;">OpenPNEプロジェクトの目的</h2>
     51<p><strong>「あらゆる組織にSNSを提供する」</strong></p>
     52<p>OpenPNE開発チームは、この目的のための最短最速の手段を選択し、プロジェクトの推進を行います。</p>
     53}}}
     54h2要素に注目すると、このように書いても理想とする同じ見栄えにすることができます。
     55
     56しかし、これではh2要素に対するスタイル宣言をh2タグ全てに書かなければなりません。
     57また、そうしてしまうと文字色を変更したいといった場合に全てを書き直さなければなりません。
     58
     59複数のページ(HTML)で同じスタイル指定をしたい場合も同様の問題が生じます。
     60スタイル宣言を外部スタイルシートに記述し、複数のページで共有することでこの問題を解消することができます。
     61
     62=== クラスセレクタによる個別指定 ===
     63外部スタイルシートを用いると1つの記述で同じスタイル指定を複数の要素に適用することができました。
     64しかし、これでは逆に一部だけ違ったスタイル指定をすることができません。
     65{{{
     66<h2>OpenPNEプロジェクトの体制</h2>
     67<p>OpenPNEは<a href="http://www.tejimaya.com">手嶋屋</a>の社内実験プロジェクトとして...</p>
     68
     69<h2>OpenPNEプロジェクトの目的</h2>
     70<p><strong>「あらゆる組織にSNSを提供する」</strong></p>
     71<p>OpenPNE開発チームは、この目的のための最短最速の手段を選択し、プロジェクトの推進を行います。</p>
     72}}}
     73h2要素の「背景色を青、文字色を白」にして『OpenPNEプロジェクトの目的』だけ「背景色を赤」にしたいといった場合、HTMLが次のように記述されているとうまく指定することができます。
     74{{{
     75<h2 class="system">OpenPNEプロジェクトの体制</h2>
     76<p>OpenPNEは<a href="http://www.tejimaya.com">手嶋屋</a>の社内実験プロジェクトとして...</p>
     77
     78<h2 class="purpose">OpenPNEプロジェクトの目的</h2>
     79<p><strong>「あらゆる組織にSNSを提供する」</strong></p>
     80<p>OpenPNE開発チームは、この目的のための最短最速の手段を選択し、プロジェクトの推進を行います。</p>
     81}}}
     82このようにclass属性が記述されているHTMLに対して、
     83{{{
     84h2 { /* h2要素に対して */
     85        background-color: #0000FF;
     86        color: #FFFFFF;
     87}
     88h2.purpose { /* class属性値が"purpose"であるh2要素に対して */
     89        background-color: #FF0000;
     90}
     91}}}
     92のようにスタイル宣言を記述すると、h2要素の文字色を白に、背景色は『OpenPNEプロジェクトの目的』を赤に、その他のh2要素を青にすることができます。
     93
     94=== ブロックにクラスを与える ===
     95{{{
     96<h2 class="system">OpenPNEプロジェクトの体制</h2>
     97<p>OpenPNEは<a href="http://www.tejimaya.com">手嶋屋</a>の社内実験プロジェクトとして...</p>
     98
     99<h2 class="purpose">OpenPNEプロジェクトの目的</h2>
     100<p><strong>「あらゆる組織にSNSを提供する」</strong></p>
     101<p>OpenPNE開発チームは、この目的のための最短最速の手段を選択し、プロジェクトの推進を行います。</p>
     102}}}
     103このように記述されていればよいと書きましたが、『OpenPNEプロジェクトの目的』の内容である、
     104{{{
     105<p><strong>「あらゆる組織にSNSを提供する」</strong></p>
     106<p>OpenPNE開発チームは、この目的のための最短最速の手段を選択し、プロジェクトの推進を行います。</p>
     107}}}
     108この部分も個別指定したいと思うと、p要素にもclass属性を記述しておくべきです。
     109しかし、各p要素に記述するのは非効率です。
     110このような場合、次のようにHTMLを記述することが効率的だと考えられます。
     111{{{
     112<div class="system">
     113    <h2>OpenPNEプロジェクトの体制</h2>
     114    <p>OpenPNEは<a href="http://www.tejimaya.com">手嶋屋</a>の社内実験プロジェクトとして...</p>
     115</div>
     116
     117<div class="purpose">
     118    <h2>OpenPNEプロジェクトの目的</h2>
     119    <p><strong>「あらゆる組織にSNSを提供する」</strong></p>
     120    <p>OpenPNE開発チームは、この目的のための最短最速の手段を選択し、プロジェクトの推進を行います。</p>
     121</div>
     122}}}
     123OpenPNE2.12ではこのような考えに基づいて、パーツ単位でclass属性を記述しています。
     124
     125== OpenPNE2.12のパーツ ==
     126この節では、実際にどのようにパーツが分類されているのかについてを説明します。
     127また、分類の仕方に対するスタイル指定の方法を説明します。
     128
     129=== パーツの分類 ===
     130ログイン後のページは、h_homeを例に挙げると、
     131 * 検索部分
     132 * インフォメーション欄
     133 * メイン写真表示部
     134 * マイフレンドリスト
     135 * コミュニティリスト
     136 * 最新情報
     137 * マイフレンドからの紹介文
     138といった部品が集まってできています。
     139この部品をパーツと考えて分類していますが、ここで挙げた7個のパーツを全て異なるパーツとして分類しているわけではありません。
     140
     141OpenPNE2.12でのパーツ分類は、構成(見栄え)が似ているパーツを同じものだと考えて、クラスを与えています。
     142|| 検索部分 || [wiki:pne-xhtmlcss/parts/17 17.searchFormLine] ||
     143|| インフォメーション欄 || [wiki:pne-xhtmlcss/parts/12 12.homeInfoBox] ||
     144|| メイン写真表示部 || [wiki:pne-xhtmlcss/parts/11 11.homePhotoBox] ||
     145|| マイフレンドリスト|| [wiki:pne-xhtmlcss/parts/36 36.homeNineTable] ||
     146|| コミュニティリスト|| [wiki:pne-xhtmlcss/parts/36 36.homeNineTable] ||
     147|| 最新情報 || [wiki:pne-xhtmlcss/parts/38 38.homeMainTable] ||
     148|| マイフレンドからの紹介文 || [wiki:pne-xhtmlcss/parts/26 26.friendIntroList] ||
     149
     150=== スタイルを適用する対象を絞り込む ===
     151h_homeでパーツが区別されていない『マイフレンドリスト』と『コミュニティリスト』はクラスセレクタで別々のスタイル指定を行うことはできません。
     152{{{
     153#Body .homePhotoBox  { background-color: #FF0000; }
     154#Body .homeNineTable { background-color: #0000FF; }
     155}}}
     156このようにカスタムCSSにスタイル記述を行うと、このパーツが現れるページ(h_home, f_home, c_home)の「メイン写真表示部の背景色を赤」、「9面の表の背景色を青」にすることができます。
     157("#Body"を記述している理由は、セレクタの優先度(詳細度、個別性)を既存のスタイルより高くするためです。)
     158
     159同一ページ内の同じパーツは区別ができませんが、異なるページで同じパーツのスタイルを別々に指定することはできます。
     160各ページのBody要素には、h_homeであれば、
     161{{{
     162<body id="pc_page_h_home">
     163}}}
     164のようにid属性が与えられています。
     165これを利用すると、
     166{{{
     167#pc_page_h_home .homePhotoBox { background-color: #FF0000; }
     168#pc_page_f_home .homePhotoBox { background-color: #00FF00; }
     169#pc_page_c_home .homePhotoBox { background-color: #FFFF00; }
     170}}}
     171のように記述することができ、メイン写真表示部の背景色を、h_homeは赤、f_homeは緑、c_homeは黄と指定することができます。