現在位置は
です

発言小町

新しいトピを作成
本文です

HTMLとCSSの記述

PC初心者
2017年9月12日 20:12

トピを開いていただき、ありがとうございます。

いま、50歳を越えて、独学で、タイトルのことについて、覚えようとしています。

基本、入力文字は、半角英数を使用するのが良いということは覚えました。

今回、ご相談したいことは、fontーfamily の部分です。

「MS Pゴシック」というfontを使用しようとする場合の入力は

「MS P」(全角大文字)と「MS P」(半角大文字)どちらで入力するのでしょうか?

いろいろ試してみたのですが、どちらで入力しても、また入力しなくても、

ブラウザ画面上での違いが良く分かりません。

ご教示よろしくお願いいたします。

ユーザーID:7671023741  


お気に入り登録数:34
  • 携帯に送る
  • このエントリーをはてなブックマークに追加
古いレス順
レス数:9本


タイトル 投稿者 更新時間
全角でOKです。
tachibana
2017年9月12日 22:50

HTML

<div class="element">サンプル</div>



CSS

.element {
font-family: 'MS Pゴシック'
}


これでいけるかと。

ユーザーID:2911001545
順番
同じく50代
2017年9月12日 22:56

フォントファミリーは書かれた順番で表示されます。閲覧するOSが異なるためです。
従って違いがわからないのは、変更箇所の前に別のフォントが指定してあると思います。
(例えばメイリオ等)
変更の違いを実感するには一番左側に指定して変更しないといけないかと思います。

ユーザーID:2687919276
'MS Pゴシック'(記号とスペースのみ半角。他は全角)
秋の訪れ
2017年9月13日 1:23

●書き方
下記の2つです。
'MS Pゴシック'(記号とスペースのみ半角。他は全角)
'MS PGothic'(すべて半角)

「font-family 一覧」で検索すると、フォント名の正確な名称が記載
されたページを見つけることができます。
そこからコピペして記述しましょう。
''で囲む必要があるフォント名と、必要ないフォント名があります。

●トピ主さんのパソコンは、Windowsでしょうか?
MS Pゴシックは、
マイクロソフト プロポーショナル ゴシック の意味です。
マイクロソフト社のOSにしか基本的に入っていません。
トピ主さんの利用しているパソコンのOSがmacの場合、
macに、わざわざインストールしてやらないと表示できません。

●単語について
fontーfamily では認識しません。
font-family と入力していますか?

●文字が変わらない理由
Internet Explorer の日本語の標準文字が、MS Pゴシックです。
デフォルトでMS Pゴシックで表示されているので、
htmlやcssで設定してやっても表示は変わりません。

ユーザーID:1210515423
そもそも・・・
webデザイナー
2017年9月13日 1:39

CSSの記述は他の方が書いてくださるので省きます。

まず、ブラウザは何を使用していますか?

たとえばIEを使っているなら、デフォルトのフォントがすでに'MS Pゴシック'なのではないですか?

CSSでフォント指定していなければ、ブラウザのデフォルトフォントが使われるのです。

なので、あなたのブラウザのデフォルトフォントが何なのかを先にチェックしてみてください。

ブラウザの設定にあるはずです。

元々'MS Pゴシック'なのに、CSSで'MS Pゴシック'を指定しても、そりゃ見た目は何も変わらないでしょうからね。

CSSを勉強するためにフォント指定するのなら、あえて違うフォントを指定するといいでしょう。

それと、winとmacによってCSSの解釈は違います。

ブラウザによっても違います。

なので、本当の意味でフォント指定を学ぶのでしたらもっと深い理解が必要です。

もし指定したフォントを持っていない人が見たらどうなるか?

フォント指定は複数できますが、その順番によってどう違うのか?

それらを調べてみるといいでしょう。

CSSの記述については、ネットで検索すればどんなことでもわかります。

「font-family ブラウザ 違い」

「font-family mac win 違い」

「font-family 順番」

などで検索してみると、色々と勉強になりますよ。

ユーザーID:8212095915
エディタのフォント
ひるあんどん
2017年9月13日 9:43

>>基本、入力文字は、半角英数を使用するのが良い...

「良い」ではなく、HTMLタグ(<>で括られる部分)やCSSのスタイル名やCSS規定の設定値は「半角英数文字」必須と思っておくべきです。

あと「MS Pゴシック」で大丈夫だと思いますよ。

該当するフォントがない場合、代替フォントが使用されるとは言うものの、個人的には固有フォント名称を記述するのにはあまり賛成できませんね。

>>ブラウザ画面上での違いが良く分かりません。

それは恐らくお使いのブラウザのデフォルトフォントがMSPゴシックになっているからだと思います。CSSでフォント名が指定されたものの、該当するフォントが見つからない場合、前述のように代替フォント(大抵の場合ブラウザのデフォルトフォント)が使用されるため、全角半角いずれで記述しようが合っていようが間違っていようが、結果的に同じフォントが使用されるためではないでしょうか。

あと余計なことですが、HTMLやCSS、JavaScript等を記述するときはフォントをMSPゴシック等のプロポーショナルなフォントではなく、MSゴシック等の等幅フォントを使用されることをお勧めします。

プロポーショナルフォントだと文字種によっては全角半角の区別が付き難いものがあるので思わぬ落とし穴になることがあります。

今回のトピ文の記述でも「fontーfamily」の部分に長音(ー)が使用されていますよね。長音(ー)はハイフン(−)とは全く別の文字ですし、そもそも「font-family」のように半角文字で無ければいけません。

人間が文字を認識する場合、この程度のことは理解して読んでもらえますが、HTMLやCSSではこれらの間違いは致命的ですので注意されたほうが良いですよ。

ユーザーID:1504741192
お使いのブラウザにもよるのですが、
ひろひろ
2017年9月13日 15:31

IEをお使いの場合、もともとの「標準フォント」がMSPゴシックなので、
設定してもしなくても表示されるのはMSPゴシックになります。
IEをお使いでしたら、MS明朝などでお試しになるとわかりやすいと思います。
入力は、全角でいけるはずです。

HTMLとcssの書き方について、無論いろいろなサイトをご覧になっていると思いますが、
こちらはちょっと古いサイトですが、わかりやすいと思うので一応貼っておきます。
ご存知でしたら申し訳ありません。
「TAG index」

ユーザーID:7722693291
クオーテーションで挟む
はるはる
2017年9月14日 4:11

font-family:'MS ゴシック';
が正解です。

が、突っ込みどころがいくつかあって…
半角英数がいい、ではなく必ず半角英数でないとダメです。スペースや記号もです。
トピの記載、font-familyのハイフンが全角になってます。

独学は結構ですが、「CSS font-family」等で検索するとか、本を買うとか…わりとすぐわかるのではないかと思いますけど、

最後にフォント指定は、ユーザー側の閲覧環境になければ指定しても表示されませんので…

ユーザーID:0992927429
クオーテーションで囲む
be
2017年9月14日 7:37

全角、半角関係無く記述できます。
ダブルまたはシングルクォーテーションでフォント名を囲みます。

css を別途のファイルで記述する場合もしくは<head><style type="text/css">ここに記述する</style></head>場合
.xxx{font-family:"MS Pゴシック"};
HTML または <body>
<div class="xxxx">なにか</div>

css を HTML文章タグ内属性として記述する場合(style ="" と属性指定にダブルが既に使用されているので)
<p style="font-family:'MS Pゴシック'">なにか</p>

ついでに英語の一文字フォント名(Arial, Helvetica...)などはクォーテーションが不要ですが、
”Times New Roman”など2単語以上になる場合はクォーテーションが必要です。

頑張ってね

ユーザーID:8234570772
ブラウザ上での違い
ヨーゴ
2017年9月15日 14:32

webデザイナーしてます。
フォントの指定については、他の方もたくさん書いていらっしゃるので割愛します。

ブラウザ上での違いをトピ主さんが確認するには、少なくとも複数のブラウザで確認する必要が大前提ですが、トピ主さんはいくつくらいのブラウザでご覧になったのでしょうか?
一つだけで確認しただけでは、指定した記述がうまく機能しているかどうかを確認するのは難しいと思います。こっちのブラウザでは問題ないけど、あっちのブラウザでみたら文字がなんだかおかしい…というふうに。

仕事でやっていると、複数台のOSの違うパソコンでも検証します。
webデザイナーさんのコメントにあるように、お使いのブラウザのデフォルトのフォント設定も関わってきます。

いろいろと、指定した内容をその目で確認するのは、失礼ながらまだトピ主さんには敷居が高いのかな…と感じます。もちろんフォントの指定は重要です。
見え方が変わってきます。でも、ここはあえて…トピ主さんがhtmlやcssを学び始めたばかりの初心者なら、あまり細かいことに頭を悩まさず1つサイトを全部作ってみてから理解を深めていったほうがいいんじゃないかと思います。

すべてのページのファイルを作り、サーバーにあげるところまで一連の作業をやってみて、ご友人や他の方のパソコンからも自分の作ったページを見てみるといいです。
あれ!?こんなつもりなかったのに、他の方のパソコンからは違って見える…どうしてだろう、というところで初めて、それぞれのブラウザの指定の違いや、OSの違いなど学んでいかれたほうがいいと思うんです。

それからもう一つ、htmlやcssを学ぶのであれば絶対に磨いたほうがいいこと、それは「検索スキル」です。
自分の必要な情報をうまくネットで探せていますか?
AND検索、使ってますか。わからないことはすぐ検索。頑張ってください!

ユーザーID:7969383905
 


現在位置は
です