
No.8ベストアンサー
- 回答日時:
> 日本語50音を、ア行は12pt、カ行は14pt、サ行は16pt、…ワ行は30pt、母音がアは赤、イは青、ウは黄、エは緑、オは桃、と表現したい場合
うーん、そんなに難しいですかねぇ。
単純に、行と段をそれぞれ class として当てはめればいいわけで、例えば文字に直接設定するなら、
<span class="a-gyou a-dan">あ</span>
<span class="ha-gyou i-dan">ひ</span>
<span class="ra-gyou u-dan">る</span>
という感じです。一つの要素に複数の class を設定できるのは知っていますよね?
もちろんこれはあくまでも一例で、例えば五十音表を作るのなら table を使って各行と各列にそれぞれ class 設定した方がいいでしょうね。
回答ありがとうございます。
>うーん、そんなに難しいですかねぇ。
いえ、難しくはないです。
ただ他の方はどうやってやるのかなー、と思って質問しました。
またご教示ください。
では失礼します。
No.7
- 回答日時:
> 理解できてきた上で、ひとつ質問なんですが、
> 日本語50音を、ア行は12pt、カ行は14pt、サ行は16pt、…ワ行は30pt、
> 母音がアは赤、イは青、ウは黄、エは緑、オは桃、と表現したい場合、
> どのようにHTML、CSSを記述したらベストなんでしょうか。ご教示、よろしくお願いします。
答えはすべてこのQ&Aにありますね!
さあ、あたまを使って考えましょう!
ついでなのでHTMLの記述方法について書いてあるページを、いくつか並べておきますので、がんばっていちからよ~く読んでくださいねっ(^^)/
http://homepage.mac.com/toda/html/11_what.html
http://members.jcom.home.ne.jp/pctips/www/introd …
http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401 …
http://msugai.fc2web.com/web/CSS/
参考URL:http://www.asahi-net.or.jp/~bd9y-ktu/
No.6
- 回答日時:
いや、絶対に class 属性を使うなということではなくて、《デザインのために》 class 属性を使うなということです。
単に div 要素に置き換えたのでは、結局デザインのために HTML をいじくっているところは変わらないでしょ?で、先ほど「まずはデザインのことは抜きにして正しいHTML文書を完成させる。」といいましたが、実はこれは結構難しいんですよね。デザインすることに慣れていると、どうしても HTML を書いているときからデザインのことを考えてしまいます。
でも、そこでそのまま class="red" と書いてしまうのではなくて、そのデザインが思い浮かんだ理由を考えてみるんです。
「見出しだから大きくしたい」とか、「重要だから太字にしたい」とか、なんでもデザインには理由があると思うんです。で、HTML にはデザインそのものではなくて、その理由を書いてやる、と。
つまり、見出しは <h1>-<h6> を、重要なところは <em> や <strong> を、という風に書いていって、普通の HTML の書き方では足りないと思ったら class 属性を使うんです。
例えば、A さんが発言した内容と B さんが発言した内容を色を変えて区別したい、と思ったら、単に発言内容を <p> でくくるだけじゃなくて、こんな風に class 属性をつけておくんです。
<p class="a-san">[A さんの発言内容 1]</p>
<p class="b-san">[B さんの発言内容 1]</p>
<p class="a-san">[A さんの発言内容 2]</p>
<p class="b-san">[B さんの発言内容 2]</p>
そうすると後から A さんと B さんで色を変えるというようなことができるわけです。
この場合は、色を変えるというデザインの理由は「異なる人物の発言を区別するため」なので、異なる人物だということを示すような class を設定しています。
人間は感覚的な動物だから、HTML を書くときにデザインのことは一切忘れて文書に集中するというのはやっぱり難しいことです。でも、HTML を書いているときにふとデザインのことが思い浮かんでしまったとしても、上に書いたようにちょっと立ち止まって考えるようにすれば、正しい HTML を書くことは難しいことじゃありませんよ。
もちろん、理想はデザインのことは 100% 考えずに正しい HTML を書けることなんですけどね。
ありがとうございます。理解できてきました。
なぜこのような質問をしたかというと、きっかけは、classに複数のCSSを設定する事が出来ると知ったからでした。
いままでは、No.1のtabideさんのようにパターンごとに記述していました。
以前から、なるべくCSSの記述を減らしたい、効率的にしたいなと思っていたので使い始めたのですが、
はたしてこれは使い方としてあっているのかな、と疑問を持っていました。
okwebの中で「http://okwave.jp/kotaeru.php3?q=1473352」や「http://okwave.jp/kotaeru.php3?q=1444936」などの
回答を見ているうちに、やっぱりおかしいのだろうな。では他の人はどうやっているのだろうと思い、質問しました。
今では正しい記述の仕方は、どちらなのかというのは理解できたのですが、
では実際に、下記No.5のyusuke_1977さんへ質問した、50音の表現など多岐のパターンがある場合は
どうしたら正確な記述で、かつ効率的なのか、というのはまだよくわかっていません。
またご教示ください。
では失礼します。
No.5
- 回答日時:
> 単純に、下記のように無理矢理名前を変えて変えてしまえば、HTMLの記述的には合っているのかな、とも思っています。
横やりで申し訳ありませんが、No.2さんの回答を理解されていないようです。名前を変えただけで、本質的に何も変わっていません。
過去のHTMLに装飾効果があり、現在でも使えるために、このような間違いをされるのだと思います。
まず、「テキストデータの構造」に注目しましょう。
「全文」の中に、「章」があって、その中に「段落」があって、さらにその中に「行」があって、その中に「字」があるといった、階層構造があります。
そして、その各階層ごとに「全文の名前」、「章の名前」、「段落の名前」として見出しがついていきます。
さらに、段落には「引用」された箇所があったり、段落夜業の中で途中で「強調」される箇所があったり、「注釈」されたりする箇所があります。
現在のHTMLで使用される<h1>や<p>といったタグは、
「ここは章のレベルの見出しだ。」とか「ここは本文レベルの段落。」とか、「この固まりは強調。」など、文章部品に階層レベルを与えていく役目をになっています。
そして、HTMLによって与えられたレベルに対して、CSSが表示される形を与えていくということになっています。
これがNo.1のいわれた「構造とデザインの分離」です。
重要なのは「同じレベルの構造がいくつかあった場合に、それらに全く違う形は与えない」というレイアウトデザインの基本概念です。
デザイン的例外はあるにせよ、これに全く当てはまらないHTML構文は誰も読んでくれないでしょう。
> 特に問題なく動作はしていますが、HTMLの記述としてはまずい気がするので…
このコメントは、感覚的にこの問題をとらえた良い言葉だと思います。
が、どう記述するべきかは、やはりNo.1をはじめとした皆さんの回答の中にあります。
あなたが気に入っている記述の仕方ですが、それこそコピー&ペーストで持っていけるのですから、なぜidやclassで名前が付けられるのか、もっとよくお考えになった方がよろしいのではないでしょうか。
http://oshiete1.goo.ne.jp/kotaeru.php3?q=1444936
記述が短くなることより、スタイルがまとまって記述されている方が、構造的な構文には有効だとご理解ください。
最後に、せっかく皆さんが好意をもって教えてくださっているのに、キチンと考えて読まないと質問する意味がありません。
HTMLやスタイルシートを一生懸命つくった人たちに対しても、失礼だと思います。
参考URL:http://w3j.org/articles/MTstructuraldesign/MTstr …
>記述が短くなることより、スタイルがまとまって記述されている方が、構造的な構文には有効だとご理解ください。
ありがとうございます。
なるほど、そうですね。理解できてきました。
理解できてきた上で、ひとつ質問なんですが、
日本語50音を、ア行は12pt、カ行は14pt、サ行は16pt、…ワ行は30pt、
母音がアは赤、イは青、ウは黄、エは緑、オは桃、と表現したい場合、
どのようにHTML、CSSを記述したらベストなんでしょうか。ご教示、よろしくお願いします。
>最後に、せっかく皆さんが好意をもって教えてくださっているのに、キチンと考えて読まないと質問する意味がありません。
>HTMLやスタイルシートを一生懸命つくった人たちに対しても、失礼だと思います。
キチンと考えて読んでないつもりもありませんし、失礼な態度を取ったつもりもありません。心外です。
もしそう感じたのでしたら、私のCSSの理解度が低いため、言葉足らずになってしまったからでしょう。

No.4
- 回答日時:
こちらも言葉足らずでした。
すみません。CSSを使いのは「構造とデザインの分離」が目的です。
なので、できればclassも極力使わないほうがいいんです。
(デザインのためにHTMLに追記するのは、デザインが構造に干渉しているので)
どうしても使うのであれば、
>.youso1-1 {font-size: 14px;}
>.youso2-1 {font-weight: bold;}
>.youso3-1 {color: #FF0000;}
この方法にするしかないでしょうね。
この回答への補足
なるほど、そういう意図で回答をいただけたのですね。ありがとうございます。
そうですね。HTMLへの追加記述は少ない方がより良いですね。
でも、class使わないのは現実的には難しいですよねぇ。
下記のようにやれば減らせると思いますが…、こんどは<div>が増えますね。
#hoge h2{○○}
#hoge p{○○}
#hoge2 h2{○○}
#hoge2 p{○○}
<div id=hoge>
<h2>あいうえお</h2>
<p>かきくけこ</p>
</div>
<div id=hoge2>
<h2>あいうえお</h2>
<p>かきくけこ</p>
</div>

No.3
- 回答日時:
こんにちは。
<p class="f14 bold red">あいうえお<div>は
見出し もしくは 文章中で強調したい文字ではないですか?
見出しの場合は<h1>や<h2>などで、
強調したい場合は<strong>や<em>でくくってください。
そして、そのタグにCSSを指定してください。
------------------------------
例:
<h1>見出し1</h1>
<p>この文章の中で<em>ここ<em>を強調したい</p>
h1 {
font-size: 14px;
font-weight: bold;
}
em {
color: red;
font-style: normal;
}
☆注意
ブラウザの初期設定のスタイルがあるので、それが気に入らない時は
CSSで上書きしてやる必要があります。
・h1やh2は太字になってしまう
→ h1やh2に { font-weight: normal; } を指定する
・emは斜体になってしまう
→ em に { font-style: normal; を指定する}
私はいちいち指定するのが面倒なので、CSSの最初に
* {
margin: 0;
padding: 0;
font-style: normal;
font-weight: normal;
}
と指定しています。
(* は全称セレクタといって、全てのタグを指します)
この回答への補足
今気づいたのですが「<p class="f14 bold red">あいうえお<div>」ではなく、
「<p class="f14 bold red">あいうえお</p>」ですね。失礼いたしました。
すみません、質問の仕方が悪かったのかもしれません。
私が問題にしているのは、ANo.2のUKYさんが答えてくれたように、
「class 名が bold や red というのは結局 <b> や <font> で直接デザインを書くのと意味的には何も変わっちゃいないですよね」という事です。
特に問題なく動作はしていますが、HTMLの記述としてはまずい気がするので、何かよい記述の仕方はないでしょうか。
単純に、下記のように無理矢理名前を変えて変えてしまえば、HTMLの記述的には合っているのかな、とも思っています。
.youso1-1 {font-size: 14px;}
.youso2-1 {font-weight: bold;}
.youso3-1 {color: #FF0000;}
<p class="youso1-1 youso2-1 youso3-1">あいうえお</p>
No.2
- 回答日時:
というか、class 名が bold や red というのは結局 <b> や <font> で直接デザインを書くのと意味的には何も変わっちゃいないですよね?
質問タイトルは「CSSの正しい記述の仕方」ですが、むしろこれは「HTMLの正しい記述の仕方」の問題ですね。
まずはデザインのことは抜きにして正しいHTML文書を完成させる。そして後からじっくりデザインを考える。
この鉄則を守る限り、class="f14 bold red" なんてものは絶対に出てきません。
この回答への補足
>というか、class 名が bold や red というのは結局 <b> や <font> で直接デザインを書くのと意味的には何も変わっちゃいないですよね?
疑問に思っているのは、まさにそれです。
>質問タイトルは「CSSの正しい記述の仕方」ですが、むしろこれは「HTMLの正しい記述の仕方」の問題ですね
そうですね、「HTMLの正しい記述の仕方」の方がタイトル合ってますね。
でも「HTMLの正しい記述の仕方」だと、見に来てくれる人が変わってきそうですね。
>この鉄則を守る限り、class="f14 bold red" なんてものは絶対に出てきません。
では、例えばどんな書き方をしたらよいでしょうか?
No.1
- 回答日時:
同じ強調パターンをあちらこちらで使ってる場合(大抵はそう)、
「やっぱり、この強調は青に変えよう」
と思ったとき、修正が大変ですよ。
そのための「構造とデザインの分離」なんだし。
私なら、確実にこうしますね。
.kyocho1 { font-size: 14px; font-weight: bold; color: #FF0000; }
.kyocho2 { font-size: 14px; font-weight: bold; color: #FFFF00; }
<p><em class="kyocho1">あいうえお</em></p>
<p><em class="kyocho2">かきくけこ</em></p>
<p><em class="kyocho1">さしすせそ</em></p>
<p><em class="kyocho2">たちつてと</em></p>
<p class="kyocho1">……でもいいですけど。
この回答への補足
同じ強調パターンを修正したい場合は、「f14 bold red」指定で
置き換えバッチをかければいいと思うので、修正の手間はそんなに変わらないと思います。
.kyocho1 { font-size: 14px; font-weight: bold; color: #FF0000; }
.kyocho2 { font-size: 12px; font-weight: bold; color: #FFFF00; }
.kyocho3 { }
.kyocho4 { }
…
…
.kyocho10 { }
と、全部のパターンのCSSを作るより、記述が短くてすみますし、
この書き方は、CSSを短くする事にメリットを感じています。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- HTML・CSS htmlの文字が縦書きになる 2 2023/03/01 21:31
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS HTML、cssのatomつぅーやつで 課題Ex1ってやつを表示させたいのですが、 私は課題Ex1が 2 2022/12/15 16:56
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- HTML・CSS htmltとcssの連携をして画像縮小について 1 2022/11/15 20:32
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
関連するカテゴリからQ&Aを探す
今、見られている記事はコレ!
-
弁護士が語る「合法と違法を分けるオンラインカジノのシンプルな線引き」
「お金を賭けたら違法です」ーーこう答えたのは富士見坂法律事務所の井上義之弁護士。オンラインカジノが違法となるかどうかの基準は、このように非常にシンプルである。しかし2025年にはいって、違法賭博事件が相次...
-
釣りと密漁の違いは?知らなかったでは済まされない?事前にできることは?
知らなかったでは済まされないのが法律の世界であるが、全てを知ってから何かをするには少々手間がかかるし、最悪始めることすらできずに終わってしまうこともあり得る。教えてgooでも「釣りと密漁の境目はどこです...
-
カスハラとクレームの違いは?カスハラの法的責任は?企業がとるべき対応は?
東京都が、客からの迷惑行為などを称した「カスタマーハラスメント」、いわゆる「カスハラ」の防止を目的とした条例を、全国で初めて成立させた。条例に罰則はなく、2025年4月1日から施行される。 この動きは自治体...
-
なぜ批判コメントをするの?その心理と向き合い方をカウンセラーにきいた!
今や生活に必要不可欠となったインターネット。手軽に情報を得られるだけでなく、ネットを介したコミュニケーションも一般的となった。それと同時に顕在化しているのが、他者に対する辛らつな意見だ。ネットニュース...
-
大麻の使用罪がなかった理由や法改正での変更点、他国との違いを弁護士が解説
ドイツで2024年4月に大麻が合法化され、その2ヶ月後にサッカーEURO2024が行われた。その際、ドイツ警察は大会運営における治安維持の一つの方針として「アルコールを飲んでいるグループと、大麻を吸っているグループ...
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlのid属性って必要なの?
-
CSS classの場合とidの場合の指...
-
擬似クラスの子要素を指定する...
-
スタイルシートのドットが#に...
-
css:positionの挙動について
-
CSSのツールチップにアニメーシ...
-
webデザイン 疑問点
-
親エレメントに含まれる子エレ...
-
CSSでテキストリンクの色を複数...
-
特定の画像リンクだけhover時の...
-
CSSについて
-
IE7とfirefox2.0でcssによって...
-
CSSの>はどういう意味でしょう?
-
CSSについて質問です (IDセレ...
-
CSS内で使われる山括弧の意味が...
-
TEXTAREAのスクロールバーの色...
-
マススポインタがリンクの上に...
-
IE9でCSS3が機能しない
-
アメブロのCSSについて
-
タグのcellPaddingとCSSのpaddi...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
個別にリンクの色を変える方法
-
idの中のid指定
-
サイトにjQueryが使用されてい...
-
liリストタグの背景色に色がつ...
-
brにクラスをつけてcssでdispla...
-
HTML要素のid/class名の長さに...
-
inputタグのテキストBOXだけ右...
-
リンク文字の 一部だけ色を変...
-
CSSのクラス名・ID名の指定でワ...
-
特定の見出しのみ前後の空白を...
-
同ページ内でリンクの色を変え...
-
スタイルシートで、id属性の中...
-
[HTML] selectの線を非表示に...
-
CSSの適用を一部だけ除外したい。
-
HP作成(ワッパーを中心に)
-
<span>で2重にかけているものを...
-
オンマウス時の背景色を個別に...
-
Bootstrap 訪問済みテキストリ...
-
最近、HTMLのヘッダーをIDで定...
-
子孫セレクタの読み方をおしえ...
おすすめ情報