外出自粛中でも楽しく過ごす!QAまとめ>>

とあるサイトのCSSを見ていたら次のような記述がありました。
font:normal normal normal 14px/1.4 "MS Pゴシック", "Osaka", "sans-serif";
normalが3つ続くのも謎ですが、フォントのサイズと思える部分で分数のようにして使われています。
14px/1.4で10pxのこと?
このような記述はできるのでしょうか?
そのサイトはCSSを使いこなせるような人が作っているようでデザインや文字などはとても読みやすくできています。

このQ&Aに関連する最新のQ&A

A 回答 (3件)

こういう書き方は、



セレクタ名略 {
font-style: normal;
font-variant: normal;
font-weight: normal;
font-size: 14px;
line-height: 1.4;
font-family: "MS Pゴシック",Osaka,sans-serif;
}

と同じ意味になります。
fontというプロパティでまとめて指定出来るので、そう記述していると思います。

14px/1.4というのは、フォントサイズ14px、行間がフォントサイズの1.4倍という意味になります。
    • good
    • 0
この回答へのお礼

回答ありがとうございます。
私が無知なだけですね。勉強します。

お礼日時:2006/10/04 10:44

解説はパスして参考URLだけ。


http://www.y-adagio.com/public/standards/tr_css2 …
    • good
    • 0
この回答へのお礼

回答ありがとうございます。
書式の理解不足でした。参考URLで勉強させていただきます。

お礼日時:2006/10/04 10:57

fontプロパティはfont関連プロパティの一括指定になります。



font-style font-variant font-weight font-size line-height font-family
をこの順に指定します。

font:style variant weight size/line-height family;
のように、font-sizeとline-heightの間には半角スペースでなく半角スラッシュを記述します。
なお、font-sizeとfont-family以外は記述を省略できます。
    • good
    • 0
この回答へのお礼

わかりやすい説明ありがとうございます。
これからはちょっと上級者的な使い方をしてみます。

お礼日時:2006/10/04 10:55

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

Q文字の位置、上下のマージンがずれる

仕事でHTML+CSSでコーディングをされる方、
または精通されている方に質問です。

pタグで2行の段落を続けて配置してみました。
IE6・7、FF、Chrome、Safariではぴったりレイアウトが合うのですが、
IE8・9で確認すると誤差が生じます↓

<p>あああああ</p>
<p>かかかかか</p>

★pに対する指定
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","MS Pゴシック","MS PGothic";
font-size: 14px;
line-height: 1;
margin: 0;
padding: 0;

各pタグにわかりやすく背景色をつけて確認してみると・・・

・IE8だと、2段目のテキスト位置が1px上に上がり、pの高さも1px縮む
・IE9だと、1段目と2段目のテキスト位置が1px上に上がり、2段目のpの高さが1px縮む

それぞれのpに高さを決めれば問題はないようですが、
高さを決めずにテキストを配置する場合、
この誤差については対応ができないものなのでしょうか?

pタグに限らず、ul、dlなんかでもずれることが多いです。
テキストをぴったりを合わせる技術ってないのでしょうか?

仕事でHTML+CSSでコーディングをされる方、
または精通されている方に質問です。

pタグで2行の段落を続けて配置してみました。
IE6・7、FF、Chrome、Safariではぴったりレイアウトが合うのですが、
IE8・9で確認すると誤差が生じます↓

<p>あああああ</p>
<p>かかかかか</p>

★pに対する指定
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","MS Pゴシック","MS PGothic";
font-size: 14px;
line-height: 1;
margin: 0;
padding: 0;

各pタグにわかりやすく背景色をつけて確認して...続きを読む

Aベストアンサー

まず、line-height:20pxのように、line-heightをpxで指定してみてください。
ブラウザの違いによる縦の誤差はなくなるはずです。

誤差が生じる原因としてはOSやブラウザの違いから、フォントやレンダリングの違いによるものです。
なので、font-size:14px;に指定していても、line-heightをemや%で相対的に指定している場合は、必ず誤差が生じます。

なお、文字列の横をそろえるのほぼ無理と考えてください。

>pタグに限らず、ul、dlなんかでもずれることが多いです。

こちらに関しては、ブラウザ間のデフォルトの差異をなくすため、リセットCSSがよく使われます。
リセットCSS、reset cssなどで検索してみれば色々出てくるでしょう。
最近はHTML5を考慮しているものもたくさんあるので、そちらを使った方が良いでしょう。
しかし、これも完全に誤差をなくせるというわけではありませんが、一度試してみると良いでしょう。

Qaタグに直接style=""で:hoverをしたいしたい

お世話になります。
下記のaタグのCSS記述部分を直接<a href="" style="..."として記述するには
どのようにすればよいのでしょうか
hoverをaタグ内に直接指定しようとしていろいろ調べたのですが、解説しているサイトを見つけられなくて、質問させてもらってます。
A:link.menu {
text-decoration:none;
FONT-SIZE: 12px;
COLOR: #0000ff;
}
A:visited.menu {
text-decoration:none;
FONT-SIZE: 12px;
COLOR: #0000ff;
}
A:hover.menu {
FONT-SIZE: 12px;
color:#0000ff;
background-color:#66bce2;
}
A:active.menu {
FONT-SIZE: 12px;
COLOR: #0000ff;
}

お手数お掛けしますが、どなた様かご教授いただけますようお願い致します。

Aベストアンサー

<a href="http://www.yahoo.co.jp" style="text-decoration:none;FONT-SIZE:12px;COLOR: #0000ff;"
onmouseover="this.style.backgroundColor='66bce2'"
onmouseout="this.style.backgroundColor=''">やふう</a>

Q画像イメージの上下左右、欲しいところに好きな間隔を入れられますか?

こんにちは。タイトルの通りサイト作成で、
画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。

参考までに、DreamWeaver(ドリームウィーバー)2004MXです。

画像とテキストの兼ね合いで、画像の右側や左側に、
ところどころで間隔が欲しいと思っています。

間隔をいじれるところといえば縦間隔、横間隔になりますが、
縦間隔なら「上」と「下」、横間隔なら「右」と「左」、
これらが一度に動いてしまうのです。
片方には確かに欲しい間隔が得られるのですが、
ほう片方に要らない間隔ができてしまい困っています。

例えば右だけに間隔が欲しい。
左だけに間隔が欲しい。

こういう場合って、何かやり方があるのでしょうか。

もともと余白込みの画像を用意するという手も講じましたが、
その場合はその場合で、その画像が他のレイアウトに流用しづらい
という弱点を生んでしまい、レイアウトごとに画像を用意しなければならないので
対症療法としてはうまくいきませんでした。

また、画像ごとにセルを用意して任意の余白を作り出す手もありましたが、
セルがあまりにも絡まりあってしまい、
かなりぐちゃぐちゃなものになるためうまくいきませんでした。

やはりもうちょっと詳しい方にお訊きしようと思いまして
質問を立てさせていただきました。
素人質問で大変申し訳ありません。
どうぞ宜しくお願いいたします。

こんにちは。タイトルの通りサイト作成で、
画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。

参考までに、DreamWeaver(ドリームウィーバー)2004MXです。

画像とテキストの兼ね合いで、画像の右側や左側に、
ところどころで間隔が欲しいと思っています。

間隔をいじれるところといえば縦間隔、横間隔になりますが、
縦間隔なら「上」と「下」、横間隔なら「右」と「左」、
これらが一度に動いてしまうのです。
片方には確かに欲しい間隔が得られるのですが、
ほう片方...続きを読む

Aベストアンサー

HTMLの初歩です。具体的には、
-------------------------------------------
<img src="○○.gif" width="100" height="100" alt="*"
style="margin: 10px 20px 0 30px;">

上10px 右20px 下0 左30px の四方の隙間が開く。
数値は例なので適当に変更を。
-------------------------------------------

<img src="○○.gif" width="100" height="100" alt="*"
style="margin: 5px 20px;">
上下5px 右右20px の2方の隙間が開く。

Qfont-sizeが効かない

html5でHTMLソースを記述しています。

時々、font-sizeが効かない事がありますが、どうしてかわかりますでしょうか?

HTML>ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

<div class="mainContents">
<a href="#"><span class="r20 t30 b30 right"><戻る</span></a>
<div class="clear"></div>
</div>

CSS>ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
.right {
float:right;
}
.r20 {
margin-right:20px;
}
.t30 {
margin-top:30px;
}
.b30 {
margin-bottom:30px;
}
.mainContents {
width:320px;
background-color:#fff;
font-family:"ヒラギノ角ゴ Pro W6", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
font-size:12px;
}

確認ブラウザは、SafariとFireFoxです。

よろしくお願いいたします。

html5でHTMLソースを記述しています。

時々、font-sizeが効かない事がありますが、どうしてかわかりますでしょうか?

HTML>ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

<div class="mainContents">
<a href="#"><span class="r20 t30 b30 right"><戻る</span></a>
<div class="clear"></div>
</div>

CSS>ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
.right {
float:right;
}
.r20 {
margin-right:20px;
}
.t30 {
margin-top:30px;
}
.b30 {
margi...続きを読む

Aベストアンサー

fon-sizeの指定方法はあってますから、その前(font-familyなど)の記述にエラーがあるとか、文字コードがあってないとかだと思います。プロパティの宣言の順番を変えて確認してみる。

HTML5だと
<section>
 <nav>
  <p><a href="#"><戻る</a></p>
 </nav>
 <section>
  <h1></h1>
 </section>
</section>
 でなきゃ変ですね。<div class="main"><div class="clear">なんて、TABLEを使うのと同じ穴の狢(ムジナ)のマークアップへの反省から改定されるのがHTML5ですから。<div class="clear">なんてHTML5を否定している。ましてやclass="right"なんて酷すぎます。
 基本的にdivは使わないと考えたらよいです。

 .rightなんて書き方は、CSS1への後方互換で、本来は単純セレクタ(全称セレクタとタイプセレクタ)につなげて書く。

【引用】____________ここから
全称セレクタが単純セレクタの唯一の構成条件ではない時、アスタリスクを省略することができる。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[セレクタ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html#universal-selector )]より
 ↑CSS1との後方互換のために設けられたルール

 当然、
.right {float:right;}
.r20 {margin-right:20px;}
.t30 {margin-top:30px;}
.b30 {margin-bottom:30px;}
な書き方はしない
 このマークアップのままだと
div.mainContens a span.right.r20.30.b30 {float:right;margin:30px 20px 30px 0;}
でよい。 

<section>
 <nav>
  <p><a href="#"><戻る</a></p>
 </nav>
 <section>
  <h1></h1>
 </section>
</section>
と、文書構造を!!明確!!に書くのが【HTML5】の基本中の基本、そのために多くの構造化要素やセマンティク要素が追加された!!!

よってスタイルシートはCSS2で書けば
section nav {width:100px;float:right;margin:20px 30px 30px 0;clear:right;}
section section{width:100%;}
body section{font-family:・・・・;font-size:12px;width:320px;}
/* 下のように書くと section section{width:100%;}は要らない */
body>section{font-family:・・・・;font-size:12px;width:320px;}



★HTML5は、まだドラフトの段階です。HTML4と違い、ブラウザの対応が完了してから勧告となるのでまだしばらくは使えない。まだまだ頻繁に変更されている。
 その前に、資料の豊富なHTML4.01strictとCSS2を徹底的に身に着けること。そのときに注意するのは、
1) divのclass名はHTML5で採用される構造化要素名やセマンティック要素名(header,footer,section,article,hgroup,nav,figure,aside)を使うこと
 例)
  <body>
   <div class="header" id="TOP">
    <h1></h1>
    <div class="nav">
     <p><a href=""></a></p>
    <div class="article summary">
    </div>
   </div>
    <div class="section">
・・・・・・・・・
 class名にrightとかleft、あるいはr20なんて意味のないものは使わない。セマンティック(意味のある一般的なもの)を使うこと。「<FONT COLOR="red">がだめなら<span style="color:red">を使う」はだめ・・というのと同じです。
 すくなくとも上記calss名は検索エンジンは理解している。

2) HTML4.01【strict】を身に着けておくと(HTML5は4.01strictの改訂版)
HTML5 differences from HTML4 ( http://www.w3.org/TR/2011/WD-html5-diff-20110525/ )
(邦訳)HTML5 における HTML4 からの変更点 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/ )
だけ読めばOK

3) 4.01strictの「非推奨」はブラウザが対応すべき要素や属性を含む。著者はstrict以外使えないと読み替える。

4) これはHTML4.01でも書かれているがHTMLは文書構造だけを記述するものを徹底すること
  clas="right red "などは書かないと言うこと

 HTMLやCSSだけ読んでもなにをしたいか、してるかわかるでしょ!!それがHTML5の本当の意味です。


 

fon-sizeの指定方法はあってますから、その前(font-familyなど)の記述にエラーがあるとか、文字コードがあってないとかだと思います。プロパティの宣言の順番を変えて確認してみる。

HTML5だと
<section>
 <nav>
  <p><a href="#"><戻る</a></p>
 </nav>
 <section>
  <h1></h1>
 </section>
</section>
 でなきゃ変ですね。<div class="main"><div class="clear">なんて、TABLEを使うのと同じ穴の狢(ムジナ)のマークアップへの反省から改定されるのがHTML5ですから。<div class="clear">なんてHTML5を...続きを読む

Q大文字はできるだけ使わない方がいいですか。

時々、大文字はできるだけ使わない方が良いと聞きます。
でも、japanese.jpegとかあった場合、
Japanese.jpegでないと何となく違和感があります。

英語はJapaneseが正しいですが、
コンピューターやHTMLで扱う場合は避けた方がいいのでしょうか。

最近、色んなものの名前のつけかたで悩み始めました。

Aベストアンサー

 Windowsは、大文字小文字を区別できません。キーボードには昔から小文字なんてありませんが・・・同じ場所にjapanese.jpgとJapanese.jpgは置けません。
ですから、Windowsを使う限り何を使っても良いことになります。
 しかし、他の古くからあるOSは、大文字と小文字を区別しますから、同じディレクトリに、Japanese.jpg,Jananese.jpg,Japanese.JPG・・・をおくことができます。これは、ファイル名をつけるときにルールを決めておかないと困ったことになります。
 たとえば、HTMLに<img src="Japanese.jpg">と書いてあって、実際のファイル名がjapanese.jpgであってもWindows上で確認する限り、まったく問題なく表示されますが、サーバーにアップロードしたら表示されないけど原因がわからない・・・ってことになりかねません。このトラブルの質問は、「shadowbox3.0.3で画像が開きません - Webデザイン・CSS - 教えて!goo ( http://oshiete.goo.ne.jp/qa/7407297.html )」のように、この掲示板にも結構あります。
 
 UNIXでは、従来からファイル名は小文字で記述して、合成語の場合は二つ目の単語の頭文字を大文字にしたりするので、その慣習が残っています。すなわち、manualAll.jpgとか、manualMainBord.jpgとか・・

 また、多くのOSでは拡張子はそれ自体が特定の意味を持ちません。そのため拡張子を含めて自由にファイル名を変更できます。Windowsは拡張子が必須ですし、拡張子を帰ることが出来ません。もちろん、拡張子だけのファイル(.htaccessとか.passwordとか)も通常は使いません。new.tar.gzなんてのも通常は使いません。---UNIX由来のhostsのような拡張子のないファイルもありますが・・・

 HTMLでの要素ですが、HTMLの仕様では、大文字と小文字の区別はしません。
・要素名には、常に大文字小文字の区別はない。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/sgmltut.html#h-3.2.1 )--HTML4.01
・HTML5では、大文字小文字は区別しませんが、XHTML5で記述するときは要素名、属性名は小文字でなければなりません。HTML5には、HTMLとして書く方法とXHTMLとして書く方法がある。

 現在、HTMLにおいて小文字が主流なのは、HTMLは、HTML4.01が最後で今後はすべてXHTMLになると思われていた時代の名残です。(XHTMLはXMLなので、XMLのルールに従う)
 まあ、自分が見やすければどちらでもよいのですが、プログラム言語によると、プログラム内で大文字で始まる単語は特別な意味を持つことがあるので、その手のプログラムを扱う人は、ファイル名やHTMLは小文字で書くように統一されている人もいらっしゃいます。

 まあ、あまり自分自身の慣習ではなく、世間一般の慣習に従うのが良いでしょうね。

 Windowsは、大文字小文字を区別できません。キーボードには昔から小文字なんてありませんが・・・同じ場所にjapanese.jpgとJapanese.jpgは置けません。
ですから、Windowsを使う限り何を使っても良いことになります。
 しかし、他の古くからあるOSは、大文字と小文字を区別しますから、同じディレクトリに、Japanese.jpg,Jananese.jpg,Japanese.JPG・・・をおくことができます。これは、ファイル名をつけるときにルールを決めておかないと困ったことになります。
 たとえば、HTMLに<img src="Japanese.jpg">と...続きを読む

Qアップロードすると、スタイルシートが反映されない

外部にcssファイルを作り、
文字のみスタイルシートで制御します。
DREAMWEAVER上でスタイルシートは反映されています。
F12を押しても、スタイルシートは反映されています。
しかし、フォルダからhtmlファイルを直接ひらいたり、
アップロードしたファイルをみると、
スタイルシートが反映されていません、
もちろん、cssファイルも一緒にアップロードしてます。
DREAMWEAVER4を使っています。

なんでだか、わかりません。。。
お手数かと思いますが、よろしくお願いします。

Aベストアンサー

こんばんわぁ、Blackwinglsです。

ちょっと心配になって動作確認してみました。

あれ、確かに思った通りの動作しませんねぇ・・・

でソースを良くみてみたらパスがチョットおかしいかも(^^;)

ソースの
<link rel="stylesheet" href="/textStyle.css" type="text/css">
の部分を
<link rel="stylesheet" href="./textStyle.css" type="text/css">
に変更して試してみてください。

恐らくhtmlファイルと同じ階層(フォルダ)にcssファイルをアップしてるんですよね。
最初の記述だとルートにcssファイルがあることになってしまうので・・・・・

ではでは~☆彡

Q
内のFONT指定について。

<table></table>内のFONT指定で、毎回
<font size=2>をセルごとに入れていますが、セルの数が多く、サイトの負担が大きくなります。
tableごと、あるいは、ページごとに一括で指定はできないのでしょうか。
スタイルシートは、あまりなじみがありません。

よろしくお願いします。

Aベストアンサー

こんにちは


table要素全体に文字を調節する場合は、

 head要素に
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" href="style.css">
を追加します。

 table要素に
class="(1)"を追加します。
<table class="(1)">
(1)に適当な名前をつけてください。
/////////////////////////////////////////////
テキストエディタで、新しくファイルを作成して、
font-size: (2)

(2)にはフォントサイズを入れます。数字だけの指定はできません。おすすめはem単位です。現在のフォントの大きさを基準として、大きさを決めます。たとえば、2倍大きくしたいのならば、2emと書きます。

と書いて、HTMLファイルがあるフォルダに、style.cssとタイトルをつけて保存します。

/////////////////////////////////////////////

CSSについて、わかりやすいホームページは
http://www6.plala.or.jp/go_west/beginner/css/
1と2の間辺りからはじめるCSS講座
は、楽しいと思います。

こんにちは


table要素全体に文字を調節する場合は、

 head要素に
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" href="style.css">
を追加します。

 table要素に
class="(1)"を追加します。
<table class="(1)">
(1)に適当な名前をつけてください。
/////////////////////////////////////////////
テキストエディタで、新しくファイルを作成して、
font-size: (2)

(2)にはフォントサイズを入れます。数字だけの指定はできません。おすすめはem単...続きを読む

Qcssでclass名に大文字、アンダーバー使えない?

スタイルシートのクラス名やid名をつけるときにいつも悩むのですが、
アンダーバーはたしか使えない、もしくは特定のブラウザで不具合がある(たしかアンダーバーはネスケの古いのに問題あるようなこと聞きました)ようなことも聞きます。
どういったことが禁止というのはあるのでしょうか。

使えれば、大文字もハイフォンもアンダーバーも使いたいんです。

よろしくお願いいたします。

Aベストアンサー

クラス名、ID 名は大文字と小文字を区別して判読していたと思います。
従って、どちらも使えると考えてかまわないと思います。

ネスケが絡んでくる話でいえば(うろ覚えですが)、
・数字で始まるクラス名、ID 名は NG
・ハイフン以外は NG
というのを聞いた事があるような気がします。
万全を期すなら、記号なしの半角英数字のみのクラス名を使うようにした方が好いかも。

ただ、古いネスケは CSS 解釈そのものが不完全だったりもするので、
どのへんまで考慮してデザインするかによって悩み方が違ってくると思います。

Qテーブルタグの中にdivを含めてはダメ?

テーブルタグの中にdiv要素を入れるとダメなのでしょうか?
何か不都合でもあるのでしょうか?
何かご存知の方がいれば教えていただけませんか?

Aベストアンサー

以下、HTML 4.01での話です。(XHTMLでもほぼ同じだと思います)

tableタグ直下に書けるのは、caption,col,colgroup,head,tfoot,tbodyと定義されています。
特定の条件下でtbodyが省略できますので、実際はtrも書けます。これら以外は書けないことになっています。
tr直下にはth,tdが書けることになっています(それ以外は不可)。

th,tdの下にはブロック要素が書けるので、divも書けます。

このように、テーブル内でth,tdの中以外でdivが使えないのはHTMLの仕様でそう決まっているからです。


人気Q&Aランキング