- 締切済み
html、cssを使って文頭の位置を指定するには
html、cssを使ってホームページを作成しています。下記のような配置でタイトルや文章を書きたいのですが・・ タイトル～ 文章～ タイトルは左端からちょっと真ん中寄り、文章はタイトルよりも２文字分くらいあけて書き出し・・として、このスタイルが随所にあるので、まとめて設定できたらと思っています。 タイトルと文章の、フォントに関する設定は、別にcssファイルを作成してリンクさせています。試しに文章部分を「左から20pxずらす」と言う意味で下記のように書きましたが、左端に寄ったままです。 <head> （途中省略） <link rel="stylesheet" href="style_1.css" type="text/css"> <!-- .position1{ left: 20px; } --> </style> </head> <body> <div class="position1">文章～</div> ぜひ最適な方法を教えてください。何分html・css、超初心者なのでお手柔らかにお願いします。。
- HTML
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
みんなの回答
スタイルシートは、適当に打ち込めばOKということはありませんので、きちんとどういった内容のものがあって、どういう設定ができるのかを体系的に把握した方が良いですよ。 この場合、タイトルは見出し用要素のHn、文章は本文用の要素のpを使い、head内にstyle要素を <style type="text/css"><!-- p {margin-left: 20px;} --></style> のように記述し、body内の文章もp要素でマークするようにすればより良いのではないかと思います。 <p>文章～</p> HTMLファイル中でスタイルシートを定義する場合は、styleタグで囲まなければ意味をなしません。 また、現状、質問文中で定義しようとしているスタイルシートですが、leftプロパティはpositionプロパティをrelativeかabsoluteに設定しなければ有効になりません。 どうしてもleftで表示位置を指定するのであれば、「position: absolute;」等の指定を付け加える必要があるでしょう。 とりあえず、HTMLとスタイルシートについて、もう少し調べてみると良いと思いますよ。 重複になりますが、「とほほのWWW入門」などを読み込んでみることをお勧めします。 http://tohoho.wakusei.ne.jp/www.htm 参考まで。
- strife
- ベストアンサー率53% (112/209)
こんばんは。 外部スタイルシートは もし外部スタイルシートを使用したいのでしたら、スタイルシートファイル（style_1.cssの中）に記述してください。 平たく言うと、style_1.cssをメモ帳などで開き、 .position1{ left: 20px; } と記述します。 なお、その場合は <!-- --> の部分は必要ないです。 その後、html本文には <link rel="stylesheet" href="style_1.css" type="text/css"> だけで十分ですので、書いてください。 下に <!-- .position1{ left: 20px; } --> を書いても、意味を成しません。 （既に外部スタイルシートのほうで定義しているので。） 外部スタイルシートを使用せずに済ませるのならば、 <head></head>の間に <style TYPE="text/css"> <!-- .position1{ left: 20px; } --> </style> と記述してください。 なお、外部スタイルシートの方法をお勧めします。 複数の文章でスタイルシートを共有することができます。なお、スタイルシートをさらに勉強してみたい場合は、下のサイトが参考になりますよ。 http://tohoho.wakusei.ne.jp/css/
お礼
ご返答ありがとうございます。 丁寧に説明してくださってありがとうごさいました。 早速試してみます。またなにか疑問がありましたらよろしくおねがいします。
補足
こんばんは。早速試してみました。外部スタイルシートは div{ color: ○○; font-weight: ○○; font-size: ○○px; line-height: ○○% font-family: MS ゴシック; position: abusolute; } .position1{ left20px } にしたのですが、うまくいきませんでした。。そこでふと思ったのは、「position1」は私の方で決めた名前（適切な表現ではないですが）で、それを読みとる指定がないのでは・・・と思いました。そこで＃２・lead1976さんの回答と組み合わせてみたらできたのです。くわしくは＃２の補足欄に書かせていただきますので、アドバイスがありましたらよろしくお願いいたします。
お礼
ご返答ありがとうございます。 >体系的に把握した方が良いですよ ごもっともです。。。「習うより慣れろ」の勢いで突っ走ってしまいました。。。 早速試してみます。またなにか疑問がありましたらよろしくお願いします。
補足
こんばんは。早速試してみました。文章をｐにして、どうしても外部スタイルシートを使いたかったので、 <link rel="stylesheet" href="style_1.css"ype="text/css"> は、このまま使いました。そして p {margin-left: 20px;} を加えたのですが、うまくいきませんでした。（外部スタイルシートのpositionはabusoluteにしてあります） そこで、外部スタイルシートを＃１・strifeさんとlead1976さんのアドバイスを足して２で割ったような、 p{ color: ○○; font-weight: ○○; font-size: ○○px; line-height: ○○% font-family: MS ゴシック; position: abusolute; margin-left: 20px; にして、htmlの方を <p>文章</p> としたらうまくいったのです。結果がうまくいったので自分では納得しているのですが、アドバイスがありましたらよろしくお願いいたします。