HTMLとCSSの記述

レス9

（トピ主 0 ）

🙂

PC初心者

2017年09月12日 21:13

話題

トピを開いていただき、ありがとうございます。いま、５０歳を越えて、独学で、タイトルのことについて、覚えようとしています。基本、入力文字は、半角英数を使用するのが良いということは覚えました。今回、ご相談したいことは、fontーfamily の部分です。「ＭＳＰゴシック」というfontを使用しようとする場合の入力は「ＭＳＰ」(全角大文字）と「MS P」(半角大文字）どちらで入力するのでしょうか？いろいろ試してみたのですが、どちらで入力しても、また入力しなくても、ブラウザ画面上での違いが良く分かりません。ご教示よろしくお願いいたします。

トピ内ID：7671023741

これポチに投票しよう！

ランキング

このトピを見た人は、こんなトピも見ています

その他も見るその他も見る

前のトピ

次のトピ

レス

レス数9

このトピックはレスの投稿受け付けを終了しました

全角でOKです。

🙂

tachibana

2017年09月14日 17:30

HTML <div class="element">サンプル</div> CSS .element { font-family: 'ＭＳＰゴシック' } これでいけるかと。

トピ内ID：2911001545

...本文を表示

順番

🙂

同じく50代

2017年09月14日 17:30

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

トピ内ID：2687919276

...本文を表示

'ＭＳＰゴシック'（記号とスペースのみ半角。他は全角）

秋の訪れ

2017年09月14日 23:29

●書き方下記の２つです。 'ＭＳＰゴシック'（記号とスペースのみ半角。他は全角） 'MS PGothic'（すべて半角）「font-family 一覧」で検索すると、フォント名の正確な名称が記載されたページを見つけることができます。そこからコピペして記述しましょう。 ''で囲む必要があるフォント名と、必要ないフォント名があります。 ●トピ主さんのパソコンは、Windowsでしょうか？ＭＳＰゴシックは、マイクロソフト　プロポーショナル　ゴシック　の意味です。マイクロソフト社のＯＳにしか基本的に入っていません。トピ主さんの利用しているパソコンのＯＳがmacの場合、 macに、わざわざインストールしてやらないと表示できません。 ●単語について fontーfamily　では認識しません。 font-family　と入力していますか？ ●文字が変わらない理由 Internet Explorer の日本語の標準文字が、ＭＳＰゴシックです。デフォルトでＭＳＰゴシックで表示されているので、 htmlやcssで設定してやっても表示は変わりません。

トピ内ID：1210515423

...本文を表示

そもそも・・・

🙂

webデザイナー

2017年09月14日 23:29

ＣＳＳの記述は他の方が書いてくださるので省きます。まず、ブラウザは何を使用していますか？たとえばＩＥを使っているなら、デフォルトのフォントがすでに'ＭＳＰゴシック'なのではないですか？ CSSでフォント指定していなければ、ブラウザのデフォルトフォントが使われるのです。なので、あなたのブラウザのデフォルトフォントが何なのかを先にチェックしてみてください。ブラウザの設定にあるはずです。元々'ＭＳＰゴシック'なのに、CSSで'ＭＳＰゴシック'を指定しても、そりゃ見た目は何も変わらないでしょうからね。 CSSを勉強するためにフォント指定するのなら、あえて違うフォントを指定するといいでしょう。それと、winとmacによってCSSの解釈は違います。ブラウザによっても違います。なので、本当の意味でフォント指定を学ぶのでしたらもっと深い理解が必要です。もし指定したフォントを持っていない人が見たらどうなるか？フォント指定は複数できますが、その順番によってどう違うのか？それらを調べてみるといいでしょう。 CSSの記述については、ネットで検索すればどんなことでもわかります。「font-family　ブラウザ　違い」「font-family　mac win 違い」「font-family　順番」などで検索してみると、色々と勉強になりますよ。

トピ内ID：8212095915

...本文を表示

エディタのフォント

ひるあんどん

2017年09月15日 11:01

>>基本、入力文字は、半角英数を使用するのが良い... 「良い」ではなく、HTMLタグ（<>で括られる部分）やCSSのスタイル名やCSS規定の設定値は「半角英数文字」必須と思っておくべきです。あと「ＭＳＰゴシック」で大丈夫だと思いますよ。該当するフォントがない場合、代替フォントが使用されるとは言うものの、個人的には固有フォント名称を記述するのにはあまり賛成できませんね。 >>ブラウザ画面上での違いが良く分かりません。それは恐らくお使いのブラウザのデフォルトフォントがMSPゴシックになっているからだと思います。CSSでフォント名が指定されたものの、該当するフォントが見つからない場合、前述のように代替フォント（大抵の場合ブラウザのデフォルトフォント）が使用されるため、全角半角いずれで記述しようが合っていようが間違っていようが、結果的に同じフォントが使用されるためではないでしょうか。あと余計なことですが、HTMLやCSS、JavaScript等を記述するときはフォントをMSPゴシック等のプロポーショナルなフォントではなく、MSゴシック等の等幅フォントを使用されることをお勧めします。プロポーショナルフォントだと文字種によっては全角半角の区別が付き難いものがあるので思わぬ落とし穴になることがあります。今回のトピ文の記述でも「fontーfamily」の部分に長音（ー）が使用されていますよね。長音（ー）はハイフン（－）とは全く別の文字ですし、そもそも「font-family」のように半角文字で無ければいけません。人間が文字を認識する場合、この程度のことは理解して読んでもらえますが、HTMLやCSSではこれらの間違いは致命的ですので注意されたほうが良いですよ。

トピ内ID：1504741192

...本文を表示

お使いのブラウザにもよるのですが、

🙂

ひろひろ

2017年09月15日 14:21

IEをお使いの場合、もともとの「標準フォント」がMSPゴシックなので、設定してもしなくても表示されるのはMSPゴシックになります。 IEをお使いでしたら、MS明朝などでお試しになるとわかりやすいと思います。入力は、全角でいけるはずです。 HTMLとcssの書き方について、無論いろいろなサイトをご覧になっていると思いますが、こちらはちょっと古いサイトですが、わかりやすいと思うので一応貼っておきます。ご存知でしたら申し訳ありません。「TAG　index」

トピ内ID：7722693291

...本文を表示

クオーテーションで挟む

🙂

はるはる

2017年09月15日 22:47

font-family:'MS ゴシック'; が正解です。が、突っ込みどころがいくつかあって… 半角英数がいい、ではなく必ず半角英数でないとダメです。スペースや記号もです。トピの記載、font-familyのハイフンが全角になってます。独学は結構ですが、「CSS font-family」等で検索するとか、本を買うとか…わりとすぐわかるのではないかと思いますけど、最後にフォント指定は、ユーザー側の閲覧環境になければ指定しても表示されませんので…

トピ内ID：0992927429

...本文を表示

クオーテーションで囲む

🙂

2017年09月16日 10:04

全角、半角関係無く記述できます。ダブルまたはシングルクォーテーションでフォント名を囲みます。 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年09月17日 15:02

webデザイナーしてます。フォントの指定については、他の方もたくさん書いていらっしゃるので割愛します。ブラウザ上での違いをトピ主さんが確認するには、少なくとも複数のブラウザで確認する必要が大前提ですが、トピ主さんはいくつくらいのブラウザでご覧になったのでしょうか？一つだけで確認しただけでは、指定した記述がうまく機能しているかどうかを確認するのは難しいと思います。こっちのブラウザでは問題ないけど、あっちのブラウザでみたら文字がなんだかおかしい…というふうに。仕事でやっていると、複数台のOSの違うパソコンでも検証します。 webデザイナーさんのコメントにあるように、お使いのブラウザのデフォルトのフォント設定も関わってきます。いろいろと、指定した内容をその目で確認するのは、失礼ながらまだトピ主さんには敷居が高いのかな…と感じます。もちろんフォントの指定は重要です。見え方が変わってきます。でも、ここはあえて…トピ主さんがhtmlやcssを学び始めたばかりの初心者なら、あまり細かいことに頭を悩まさず１つサイトを全部作ってみてから理解を深めていったほうがいいんじゃないかと思います。すべてのページのファイルを作り、サーバーにあげるところまで一連の作業をやってみて、ご友人や他の方のパソコンからも自分の作ったページを見てみるといいです。あれ！？こんなつもりなかったのに、他の方のパソコンからは違って見える…どうしてだろう、というところで初めて、それぞれのブラウザの指定の違いや、OSの違いなど学んでいかれたほうがいいと思うんです。それからもう一つ、htmlやcssを学ぶのであれば絶対に磨いたほうがいいこと、それは「検索スキル」です。自分の必要な情報をうまくネットで探せていますか？ AND検索、使ってますか。わからないことはすぐ検索。頑張ってください！

トピ内ID：7969383905

...本文を表示