タグ別アーカイブ: CSS

CSSって簡単/セレクタ編

CATEGORIES eラーニングby.a.takeuchi2 Comments2011.03.10

HTMLぐらいなら分かるけど、CSSってなんか難しそう。そんな貴方のための記事です。

CSSを学ぶ上で躓きやすいのはセレクタです。今回はセレクタを中心にCSSを紹介します。

CSSとは

CSSは、Cascading Style Sheetsの略です。HTMLからデザインを分離させることを目的として策定されました。
2000年ごろのWebの世界では、HTML自体にデザインを記述していました。しかし、これでは、ページごと、タグごとにスタイルを記述することになり、デザインの変更は大変な労力を伴うものとなりました。そこで、HTMLでは文章構造だけを表現し、デザインはCSSとして分離する方式が主流になりました。

セレクタとは

英語で書くとselector、つまり何かを選択するためのものです。CSSにおいては、特定のタグを選ぶための記述のことをセレクタ呼びます。CSSを使うとセレクタで選択したタグに対してさまざまな視覚効果を与えることができます。

タイプセレクタ

タグの種類を指定するセレクタです。指定した種類のタグ全てにスタイルが適用されます。影響範囲が広く、予想外の部分のスタイルに影響を与えるので、タイプ単独でのスタイル指定はお勧めしません。

1
2
h1{color:black;} /* h1タグの文字色を黒にします */
body {background-color:#fff;}. /* 全体の背景色を白にします */

クラスセレクタ

特定クラスのタグを指定するセレクタです。クラスはタグ内にclass=” *** “の形式で指定します。同じclassを指定することで、複数のタグに同じスタイルを適用できます。

1
<h2 class="title">CSSって簡単/セレクタ編</h2>

上記のタグにスタイルを指定するには、次のように記述します。

1
2
.title{ /*スタイルの指定*/ } # titleクラスが指定されている部分全体が対象
h2.title{ /*スタイルの指定*/ } # h2タグの中でtitleクラスが指定されている部分だけが対象

一意セレクタ

特定のIDを持っているタグを指定するセレクタです。IDはタグないにid=” *** “の形式で指定します。同じIDを持ったタグは1つのHTML内に1つしか存在してはいけません。

1
<h1 class="title">blog.eラーニング.co.jp</h1>

上記のタグにスタイルを指定するには、次のように記述します。

1
#title{ /*スタイルの指定*/ } # IDがtitleのタグだけに適用

文脈セレクタ

タグの包含関係を利用するセレクタです。

1
2
3
4
5
6
7
8
<div class="artile">
<ul>
    <li>ここのスタイルを変更したい</li>
</ul>
</div>
<ul>
    <li>ここは変更したくない</li>
</ul>

次のように記述すると、divタグ内のliタグだけにスタイルを適用できます。

1
div.article li{ /*スタイルの指定*/ }

まとめ

CSSのセレクタって難しそうなイメージがあるのは事実ですが、基本を押さえておけば意外と簡単ですよ!このブログの中で私の記事には固有のスタイルが設定されていますが、CSSのセレクタさえ理解すれば、こういうことも簡単にできるようになります!

宿題

キバンインターナショナルのメンバーへの宿題です。ブログの自分の記事のスタイルを変更してください。strong、em、h2、h3、h4、ul、liなどにスタイルを指定するのがお勧めです。追加するスタイルはテーマのstyle.cssに書き込むこともできますが、テーマの切り替えでリセットされてしまうのでお勧めしません。Entry Wrapperプラグイン内で追加指定を記述できますので、プラグイン内に記述するようお願いします。既に数名分の記述があるので参考にしてみてください。

HTMLやCSSの基礎から応用まで。

いつも新しい内容でわかりやすく講義している「allWebクリエーター塾」の菊池さんがeラーニング向のけ講義をパンダスタジオで収録しました。
これからeラーニングでも展開予定ということで、特別に最初の講義を公開いたします。


ここから先の講義が気になる内容ですね。

今後、コンテンツとして作成するかを検討しているそうです!

ブログに画像をアップロードした際に、横幅が圧縮されて困ったこと、ありませんか?

1024×768の画像で、width=1024 height=768に設定しているのにもかかわらず、横幅がつぶれてます。

firefox3

知ってる人は知ってるとおもいますが、これはスタイルシートのmax-widthが指定されているからです。スタイルシートのmax-widthが指定されていると、width属性を指定してもmax-widthが優先されてしまいます。これは、デザインが崩れないようにするためには合理的なのですが、どうしても、なにがなんでも、でっかい画像を張りたいということもあると思います。

そういうときは、min-widthを設定すると潰れずに表示されます。min-widthによる制約が、max-widthよりも優先され、min-widthで指定したサイズで表示されるのです。

firefox3

merginにマイナス値を設定すると、右側の部分を表示させることもできます。

firefox3

プログラマ視点でのWebデザイン

CATEGORIES eラーニングby.a.takeuchi2 Comments2009.10.30

絵もかけないし、デザインセンスもない。でもCSSなら修正できるという、プログラマ向けのデザインテクニック、を紹介します。

・余分な要素を取り除く
・余白をあける

たったこれだけです。

この2点をブログのリンクユニットに適用してみました。

Before After
before after

どうでしょう?

すっきりしましたよね。

  • 製品・サービス
    PC、iPhone対応のeラーニングシステム。20名まで無料でASPサービスを利用できます
    PC、iPhone対応のeラーニング学習管理システム(LMS)【SmartBrain】
    http://smartbrain.info/
    PC、iPhone対応のeラーニングシステム。ユーザ数無制限のASPコースをご用意。


    eラーニングポータルサイト【elearning.co.jp】
    http://elearning.co.jp/
    eラーニング専門企業(株)キバンインターナショナルの製品を紹介しています。


    コンテンツビジネス支援パック
    http://contentsbank.jp/

    Ustream配信、動画コンテンツ制作、セミナーにご利用いただけるレンタルスタジオ
    Ustreamレンタルスタジオ「パンダスタジオ」
    http://pandastudio.tv/

    eラーニング専門企業(株)キバンインターナショナルのスタッフが、eラーニングに関する情報・最新事情をBlogでご紹介。月50本程度の情報発信を行っています。
    ブログ「blog.eラーニング.co.jp」
    http://blog.elearning.co.jp/

  • アーカイブ
  • カテゴリー
  • Amazon
  • タグ