webページ制作に関しては初級レベル程度の者です。今は手打ちで作っています。
ブログなどでもそうなのですが、photoshopなどを使って自分で画像を作り、それを背景にして
文章などを書いている方のページがありますよね。
あれはどのようにやっているのですか?
どうやってうまく文字を入れているのかなぁって思っています。
例えばMovableTypeのブログなら投稿してその背景とかぶっちゃったりしないのかなとか、記事が多くなってきた場合、底の方の背景が切れて
文字だけが下に延びてしまわないのだろうか等、どうやってうまく配置されるのだろうと思っています。
その辺はCSSでうまく指定できるのかなぁと思ったり・・・。
説明がわかりにくく申し訳ないのですが、わかる方がいらっしゃいましたらわかりやすく教えて下さい。
必要があれば補足いたしますので、お願いします。
No.3ベストアンサー
- 回答日時:
> 原稿用紙のような罫線
ということでしたら、文字サイズ固定、行の高さ固定に加え、文字間の指定も固定にする必要があると思います。
ちなみに文字と文字との間のスペースを指定するCSSは
「letter-spacing: ○px;」です。
CSSで細かくデザインを指定する際には、Internet Explorerだけでなく、Opera、Firefox、MozillaまたはNetscapeなど、最低でも二種類か三種類のブラウザで表示を確認することをおすすめします。
どうでも良いことですが、笑い上戸なので、「ソースを見ればいいというのはそーすね」に思わずぶっと吹き出しそうになりました(ダジャレに特に弱い)。
HTMLを保存して参考にする場合には(無料配布テンプレート以外のものは、画像もソースもそのまま流用しない方が良いです)、Internet Explorerで、元のソースコードとは違うIE独自のものに書き換わってしまうようなので、その他のブラウザで保存した方が良いのではないかと思います。
IEで保存したソースコードは非常に読みにくくなるので。
さらに詳しい説明ありがとうございます。
なるほど文字間の指定も行う必要があるのですね。
すごくわかりやすかったです。しかしそれにしても行数が増えてくれば微妙にずれてこないのかなぁと思うのですが
考えすぎなのかもしれません。今度一度やってみたいと思います。
IEのソースの件については初耳でした。参考になりました。
それからダジャレに気づいてくれてありがとうございます。
スルーされたらどうしようと思ってました(笑)
No.2
- 回答日時:
ブログで背景画像にノートのような罫線を表示しているようなデザインなどは、CSSで指定しています。
その場合は、文字サイズ(font-size: ○px;)や行の高さ(line-height: ○px;)などを固定で指定しないと、文字サイズなどを大きくしてしまった場合に、デザインが崩れてしまいます。
箱形みたいな画像をCSSで指定している場合には、上部と中間と下部の画像をそれぞれ別にわけて、その部分ごとに指定しています。
例えばHTML部分に
<div class="texthead">~</div><div class"textcenter">~</div><div class"textfoot">~</div>
などのように記述し、CSSで
.texthead { background: url(texthead.jpg) no-repeat; width: 400px; }
.textcenter { background: url(textcenter.jpg) repeat-y; width: 400px; }
.textfoot { background: url(textfoot.jpg) no-repeat; width: 400px; }
などと記述します。
手打ちで入力されているのならば、気になるサイトのソースを見た方が早いかもしれません。
ありがとうございます。
説明のしかたが悪くてすみません。
しかし何となくわかったような気がします。
原稿用紙のような罫線を模した、というのは正にそんな感じのものが気になっていました。
ソースを見ればいいというのはそーすね。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Photoshop(フォトショップ) 【至急】 ウェブサイトやアプリとかでよく見かける、添付画像のように背景にあるものをぼかしつつ透過する 2 2023/07/17 10:57
- Photoshop(フォトショップ) MacでPhotoshopに使い方 教えて! 2 2023/07/08 08:24
- HTML・CSS CSSでサイトの背景に画像を組み込みたいのですが反映されません 2 2022/11/22 16:21
- 美術・アート ある背景イラスト画集を探しています。 はじめまして。 以前、ヴィレッジヴァンガードで1度 売られてい 1 2022/11/09 02:22
- HTML・CSS svgクリップパスの応用コーディング方法 2 2022/04/09 09:07
- その他(映画) 背景がギュイーンとズームアウトするズームの名前と撮影方法を知りたい。 1 2023/04/15 16:00
- 音楽・動画 動画作成に詳しい方教えてください! リール動画で、このような文字だけ載せて背景を動画にするものって、 1 2023/08/05 16:21
- PowerPoint(パワーポイント) PowerPointの背景について 1 2023/03/12 15:22
- Windows 10 zoomで自分の顔の背景 3 2023/06/07 22:34
- 美術・アート デザインについての考察。 なぜ人の脳は、規則正しく連続した要素を「背景」と認識するのか、実験してみま 2 2022/04/11 21:08
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
<hr>の縦バージョンはありますか?
-
【Webサイト】画像が小さく表示...
-
htmlかcssで背景の白い枠をなく...
-
同じ画像 複数回使用
-
LightBoxの矢印の出し方
-
楽天ショップのデザイン
-
透過gif画像の上に文章を重ねる...
-
スタイルシート(CSS)で左にア...
-
見出しの複数行の対応について
-
background-sizeの背景で最小値...
-
画像で背景透明のテキストがに...
-
マウスオーバーするボタンの画...
-
HP作成 作成した画像を動画の上...
-
画像にオンマウスで暗くする方法
-
CSS使用時のDIVにおける背景指...
-
画像の上にテキスト配置で、拡...
-
background-repeat CSS で切れ...
-
マウスが乗ったとき斜め下に下がる
-
画像の上に文字を乗せたい!
-
レスポンシブWebデザイン習得へ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
<hr>の縦バージョンはありますか?
-
画像とその下にあるテキストの...
-
lightbox2で画像を天地左右中央...
-
画像の上にテキスト配置で、拡...
-
background-repeat CSS で切れ...
-
【Webサイト】画像が小さく表示...
-
IMGタグで画像の繰り返し使用は…
-
background-sizeの背景で最小値...
-
同じ画像 複数回使用
-
【至急お助け!】チェックボッ...
-
iframe内をクリックさせない方...
-
htmlかcssで背景の白い枠をなく...
-
background-sizeでcontainする...
-
CSSで背景画像をランダムに表示...
-
ページごとに背景画像を変更し...
-
画像上に文字を表示するとiPhon...
-
LightBoxの矢印の出し方
-
WEB上でディレクトリ内の画像を...
-
submitボタンの上に重ねた画像...
-
CSS マウスオーバーでテキスト...
おすすめ情報