メニューまで移動する

とりココBlog - 福島県郡山市のITブログ

CSSで複数のクラスを適用する*

2005年07月27日

CSSで複数のクラスを適用する*

管理させてもらっているサイトに携帯からのオーダー。物販では前からあったけど企業間取引は初めて。いやはやすごい時代になったものだ。Yahoo!、Google、楽天、livedoorとこぞって携帯に力を入れているのもうなずける。友人にメールするくらい手軽にオーダーができてしまうんだもんなぁ。

意外と知らない「複数のクラス指定」

少しこのブログの本流のひとつのはずである「Webデザイン」ネタを久々に。

CSSによるデザイン指定は

  • HTMLタグの再定義
  • IDによる指定
  • CLASSによる指定
  • タグ埋め込みによる直接指定

の四種類に分類されるが、「CLASSによる指定」のみ複数の要素を適用できる。

百聞は一見にしかず。サンプルコード

CSSによるCLASS定義

.bold { font-weight:bold; }
.italic { font-style: italic; }
.big { font-size: 120%; }

HTMLからの複数のクラス指定

<span class="bold italic big">太字+斜体+サイズ大</span>

ブラウザ表示

太字+斜体+サイズ大

備考

  • クラス名は半角スペースで区切る
  • デザインの優先順位は後方指定が優先される

CLASS定義を細かくすれば効率があがりそうだけど、HTMLにCLASS名をだらだら連ねるのも大変。どう活用するかは使う人次第かな。ちょこっとデザインを変えたいときには有用かも。

ブラウザ対応状況

ソフト名Ver対応備考
InternetExplorer6★★★★★-
Firefox1.06★★★★★-
Opera8.01★★★★★-

※8月5日更新

オーサリングソフト対応状況

ソフト名Ver対応備考
DreamWeaverMX★★☆☆☆編集画面からの設定・表示は不可。勝手にタグは弄らない。

※8月5日更新

#テーブルレイアウトを整えたりは後ほど。

どうしてもブログのネタがない時に

便利だけどそこまでして更新する意義があるかどうかは不明。

Winny裁判関連発言でジャーナリストとひろゆき氏がブログ対談

  1. 続・Winny裁判
  2. 佐々木さんのブログにコメント欄がないので、
  3. 前回のエントリーに関して

内容はともかくブログ対ブログによる議論は新鮮。

ファイル管理の効率化

個人的にはマイドキュメントは使う。ただマイドキュメントは別ドライブにある。実は場所変更が可能なのだ。そのほうがアプリケーションから呼び出しやすい。

あと環境変数を使ったりとか、なんでもかんでもProgramFilesにインストールしないとか便利Tipsはいっぱいある。そのうち紹介したい。

ついに!というかやっと512MBのmac mini

欲しい。

高校野球(福島県)日大東北、安積にまさかのコールド負け

うそん。「ずっと、あいつの球を受けていたかった」泣ける。てことは学法石川か聖光学院かな。あづま球場は遠いよ。

一発ねた

読みたい。しかも2巻(w

今日の地元ブログ

郡山を中心に福島県のブログを勝手に紹介&トラックバック。

In today today』さん
日常の出来事や、撮影の日記などを載せているウェブログです。
最新記事:尾瀬

いつも日常と共に素敵な写真を掲載されているブログです。写真を撮るテクニックと編集・切り出しのテクニックはもうプロとしか思えないです。というかそんな気がします。

最新記事の尾瀬の写真はほんときれいです。そういえば遠くもないのに行ったことないなぁ。

スポンサードリンク

コメントとトラックバックを読む

この記事へのコメント

うわ、やべぇ、クラスの複数指定初めて知った。
こりゃ便利だ…。
ふくふく21さんによる [2005年07月27日 21:23] の投稿。No.1
はじめまして、こんにちは。
トラックバックと、もったいないくらいの紹介文をありがとうございます!

私は福島市に住んでいるのですが、実は郡山には、仕事以外で立ち寄ったことがありません。
今年こそは仕事以外で郡山行こう、、と思っています。
またこちらに寄らせていただきます〜よろしくおねがいします。

あ、私もミスチル好きです^^
さんによる [2005年07月29日 10:26] の投稿。No.2
>香さま

勝手な紹介・トラックバックにコメントありがとうございます。

福島にお住まいなんですね。今年こそは郡山ですか(笑)
もちろん一市民として歓迎しますよ。ずっと住んでいる所だと
なにが魅力なのか量りかねるものもありますが、ぜひぜひ一度
気軽に足を運んで下さいませ。

>あ、私もミスチル好きです^^

うわ、奇遇ですね。なんかうれしいです。
ミスチル好きに悪い人はいない…ようなそんな気はします(笑)
これからもよろしくです。

#写真は本業ではないんですね。カンが外れました…
とりココさんによる [2005年07月29日 19:17] の投稿。No.3
>ふくふく21様

あ…無視してごめん(笑)
たしかに便利な手法なんだけど、DreamWeaverとかWISYWIGに
読み込ませるとエラーになるとか無視されるとかそんな気がする…

一方、ロシアは鉛筆…でなくてメモ帳を使った。
とりココさんによる [2005年07月29日 19:28] の投稿。No.4
>たしかに便利な手法なんだけど、DreamWeaverとかWISYWIGに
>読み込ませるとエラーになるとか無視されるとかそんな気がする…

早く言ってくださいよ〜(焦)
複数指定、知らなかったんでさっそくやったけど、できなくてめっちゃ一人で焦ってました・・・。メモ帳で打ち込んでDWでもう一度開いたらどうなるんだろ?やってみよーっと。
RedLineさんによる [2005年07月30日 10:30] の投稿。No.5
>RedLineさま

あ、やっぱりそうでしたか(笑)
使い方によっては便利な手法なので大手ソフトさんには対応していただきたいですね。

>メモ帳で打ち込んでDWでもう一度開いたらどうなるんだろ?やってみよーっと。

う、たぶん「すべて適用されない」オチのような気がします…
とりココさんによる [2005年07月30日 21:43] の投稿。No.6
とりココ先生〜。確認しました。
>メモ帳で打ち込んでDWでもう一度開いたらどうなるんだろ?やってみよーっと。
答え・・・「反映された!」
もしかしたら特定のクラスのみ反映されるのかもしれないけど、とりあえず複数指定技、立証しました(笑)
RedLineさんによる [2005年07月30日 21:51] の投稿。No.7
>答え・・・「反映された!」

本当ですか!よかったです。
ぜひぜひ今度使ってみてくださいませ〜
とりココさんによる [2005年07月30日 22:03] の投稿。No.8
いや(笑)
DW MX(ただのMX)では反映されないっぽい(?)
常時ブラウザ3種類くらい開いているので、問題ナス!
ふくふく21さんによる [2005年08月03日 12:38] の投稿。No.9
> ふくふく21様

情報提供サンクスです。
DreamWeaverで反映されないとすると他オーサリングソフトも全滅かな。

せっかく情報が集まってきたので、後ほどいただいた情報を元記事にフィードバックさせてもらいます。
とりココさんによる [2005年08月03日 16:25] の投稿。No.10
あ、あの〜私もふくふく21様と同じくただのMXなんですが、一旦メモ帳で編集してからDWで開くと反映されてますよ。DWの編集画面では反映されてないように見えますが、ブラウザでプレビューしたら反映されたまま残ってます。あれ、そういう問題じゃない??
RedLineさんによる [2005年08月03日 21:33] の投稿。No.11
>>RedLine様
あら?
DWのWISYWIGでの編集画面上では反映されないけど、ブラウザ上ではきちんと反映される。メモ帳などの他のエディタで編集せずとも、ブラウザ上ではきちんと反映される(DWからプレビュー"F12キーなど"で開くブラウザ上でもOK)かと思います。
なんかこんがらかってきましたw
ふくふく21さんによる [2005年08月04日 11:44] の投稿。No.12
>ふくふく21様
えと、まぁ「結果としてうまくいく」ということで(笑)きっと後日とりココさんがうまくまとめてくれると信じて・・・。人様のブログで何をやっているんだ私は・・・すいません。
RedLineさんによる [2005年08月04日 12:17] の投稿。No.13

コメントまたはトラックバックを投稿する

コメントを投稿する





トラックバックを送信する

この記事へのトラックバックURL:
http://trackback.blogsys.jp/livedoor/disctop/29026949

メニューとコンテンツ