スタイルシートタグについて

質問

以下のスタイルシートタグで、長さを調整する事が出来ません。

　お手数をおかけしますが、私が掲載したタグを、

　長さを調整できるようなタグに書き直していただけませんか？

　宜しくお願いします。

<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.4

DrFell · ベストアンサー

任意の場所がどこかわからないのですが、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で指定することにより、初期値より指定値で表示されます。見出しなら見出しなどと、適したタグを使うようにしていくと、のちのち管理やページの作り方が楽になります。最初が肝心ですので、がんばってください。

お礼

アドバイス、有難う御座います。
色々と試みてみます。
又のアドバイス、宜しくお願いします。

回答No.3

naokita

そこだけ見る限りでは、小見出しっぽいから
<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%;　すら不要だけど・・・

お礼

有難う御座いました。

2番の方のアドバイスで解決しました。

又、宜しくお願いします。

回答No.2

DrFell

display:inline-block;
を足してみてください。＃1さんの言うように、spanタグはインラインへの汎用タグですので、高さや幅を持てません。そこで、inline-block要素のように表示させるプロパティと値です。ただし、ｃｓｓ2を解するブラウザでないと効きません。

widthが100％なら、それはspanではなく、ブロックレベルへの汎用タグであるdivの方が適しているかもしれません。つまり、spanをdivに取り替えるだけです。こっちなら、ｃｓｓ1から使えます。

お礼

有難う御座います。

アドバイスの通り（divの取替え）で解決しました。

が、もう一つ問題がありまして。

それは、作成したスタイルシートが”左より”で任意の場所に移動させる事ができません。

重ね重ねで恐縮ですが、スタイルシートを任意に移動させる方法について教えてください。

宜しくお願いします。

回答No.1

SAYKA

長さ？　width の事？

もしそうなら width は inline である span では効果が無いよ。

お礼

有難う御座いました。

2番の方のアドバイスで解決できました。

又、宜しくお願いします。