以下のスタイルシートタグで、長さを調整する事が出来ません。
お手数をおかけしますが、私が掲載したタグを、
長さを調整できるようなタグに書き直していただけませんか?
宜しくお願いします。
<span style="width:100%;color:#FFFFFF;padding:30px;font-size:45px;writing-mode:lr-tb;text-align:center;height:20px;background-color:#008000;border-color:#FFFF00;border-width:10px;">”自分を知る”SITEから</span>
No.2
- 回答日時:
display:inline-block;
を足してみてください。#1さんの言うように、spanタグはインラインへの汎用タグですので、高さや幅を持てません。そこで、inline-block要素のように表示させるプロパティと値です。ただし、css2を解するブラウザでないと効きません。
widthが100%なら、それはspanではなく、ブロックレベルへの汎用タグであるdivの方が適しているかもしれません。つまり、spanをdivに取り替えるだけです。こっちなら、css1から使えます。
有難う御座います。
アドバイスの通り(divの取替え)で解決しました。
が、もう一つ問題がありまして。
それは、作成したスタイルシートが”左より”で任意の場所に移動させる事ができません。
重ね重ねで恐縮ですが、スタイルシートを任意に移動させる方法について教えてください。
宜しくお願いします。
No.3
- 回答日時:
そこだけ見る限りでは、小見出しっぽいから
<span>じゃないですよね。
<h3 style="width:100%; color:#FFFFFF;padding:30px;font-size:45px;writing-mode:lr-tb;text-align:center;height:20px;background-color:#008000;border-color:#FFFF00;border-width:10px;><q>自分を知る</q>SITEから</h3>
<p>以下の文章 ~~~</p>
<p>以下の文章 ~~~</p>
元々ブロック要素は、幅100%だから、width:100%; すら不要だけど・・・
No.4ベストアンサー
- 回答日時:
任意の場所がどこかわからないのですが、divでその場所を囲みます。
その時点で、widthは100%になります。初期値です。箱をイメージしてください。ブラウザ画面に対して100%の箱があります。すると、右にも左にも動かせませんよね?中身は文字で、箱に合わせて折り返しがされます。
width:80%にすると、箱の周りに残り20%の遊びが出来ます。これをどうするかにより任意の位置に移動することができます。
右に移動させたいなら反対側のmarginをautoや残り全部にします。
●右にしたい場合
<div style="width:80%;margin-left:auto;">または<div style="width:80%;margin-left:20%;">
●左右中央にしたい場合
<div style="width:80%;margin:0 auto;">または<div style="width:80%;margin-left:10%;margin-right:10%;">
他にもmarginやpaddingやborderが設定されていれば、上記では上手くいかないかも知れません。箱は中央に置いたけど、中身は左右非対称とか、margin・padding・border・widthの合計が100%をこえていればスライダーがでて、見えない範囲を含めて配置しますので、感覚的には任意の場所にいってないように見えると思います。
cssは単純なことの組み合わせです。width80%とmargin10%が2つとborderを10pxを2つなら、20pxがはみ出ます。じゃあ、10%にしないで、autoにしようなどとなるわけです。いろいろ相互の組み合わせとなってきますので、意味を理解しながら適用していってください。
自分で教えておいてなんですが、このまま行くと、divだらけspanだらけのhtmlが出来てしまいます。#3さんもおっしゃっていましたが、見出しには見出しタグをつけ、段落には段落タグをつけてください。divは見出しとか段落とかの意味のないブロックに使うタグです。divにできる表現はh1、h2やpなどのブロック要素への表現でも必ずできます。それぞれにいろいろな初期値をもっていますが、cssで指定することにより、初期値より指定値で表示されます。見出しなら見出しなどと、適したタグを使うようにしていくと、のちのち管理やページの作り方が楽になります。最初が肝心ですので、がんばってください。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
- HTML・CSS HTMLで特定の文字だけ色を変えたいのですが、指定した色と違う色が反映してしまいます。 下記、「前」 5 2023/06/27 12:08
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ホームページの画面文字を濃く...
-
ホームページビルダーを複数の...
-
友達にドッキリをしたくて、ホ...
-
ワードプレスで、画像の横に文...
-
メールフォームで送信すると「...
-
既存画像(gif または png)の背...
-
ホームページビルダー
-
横にリンク先を3つ並べたいのです
-
FFFTPでサーバに新規フォルダが...
-
XREA使用で作成したHTMLファイ...
-
アニメ公式サイト風なWebページ...
-
ビルドとリビルドの違いを教え...
-
ネットについて質問です。 ホー...
-
HTMLで、ホームページが作れる...
-
ページの内容コピペ 範囲が広い...
-
ビフォアーアフターのページは...
-
無料でホームページを作成した...
-
ホームページビルダー21で作成...
-
入社1年半目です。自習でシェア...
-
ホームぺージの検索
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
既存画像(gif または png)の背...
-
ホームページ作成
-
HTMLで、ホームページが作れる...
-
ホームページの画面文字を濃く...
-
ホームページビルダー
-
ホームページビルダーを複数の...
-
ビルドとリビルドの違いを教え...
-
友達にドッキリをしたくて、ホ...
-
ホームページビルダー22でリン...
-
ホームページビルダー15で作っ...
-
今さらですがHPを作成するに当...
-
FFFTPでサーバに新規フォルダが...
-
Adobe FLASH に代わるソフトは...
-
XREA使用で作成したHTMLファイ...
-
FC2ホームページの変更に仕方
-
ホームページビルダーおすすめ?
-
ワードプレスで、画像の横に文...
-
ホームページ作成について。「...
-
ホームページビルダー19文字化け
-
個人のホームページは
おすすめ情報