[返信する]
文字が切れる
By 楓
2011-05-21 07:30:09
初めまして
私の検索の仕方が悪いのか
検索しても無かったので質問させていただきます｡


拍手をTOPにつけたのですが
縦幅が大きかったので
コメント入力欄とボタンの縦幅を変えたら
文字が切れてしまいました｡

自分なりに色々頑張ったのですが
駄目でした｡

どうしたら文字が切れなくなりますか？

ど素人丸出しの質問ですみません…｡

よろしくお願いします｡
SH02B
[編集]
By 匿名
2011-05-21 14:32:36
＞ｺﾒﾝﾄ入力欄とﾎﾞﾀﾝの縦幅を変えたら
どう変えられましたか？
変えた後のタグを記載していただくと回答が得やすいですよ。
それと、切れたのはどこの文字でしょうか。ボタンの文字ですか？　送信されたコメントですか？　入力中のコメントですか？

＞自分なりに色々頑張ったのですが
どんなことを試されたのですか？
何をされたのか書かれていないと、アドバイスをしても、それはもう試した、となりかねません。
ムダを省くためにも具体的に試されたことを書かれてくださいね。
pc
[編集]
By 楓
2011-05-21 15:43:14
返事ありがとうございますっ

ﾀｸﾞは
<style type="text/css">input[type=text]{height:15px}</style>
<style type="text/css">input[type=submit]{height:15px}</style>です
切れる文字
入力中の文字とﾎﾞﾀﾝの文字です｡

ﾀｸﾞとかあんまわかんないので
とりあえず<font size="-8"></font>をいろんなとこにはっつけました…｡
馬鹿丸出しですみません…｡
SH02B
[編集]
By 匿名
2011-05-21 22:55:40
切れる、とは下半分が切れるということでしょうか。
そうなら、文字の入る部分が小さすぎるということなのでfont-size:8px;を足してください。
PCで確認しましたら8pxでフォーム内に文字が収まりました。携帯での見栄えはご自身で確認されてください。
pc
[編集]
By 楓
2011-05-22 00:23:03
なんとか上手くできました！
匿名様
いろいろと
ありがとうございました！
SH02B
[編集]
By たすけあい
2011-05-22 02:19:26
匿名61K様
>>…（height:15px;のような要素の中身を指定する際には「ここ高さに関する指定は終了です」というようなことを宣言する「;」が必要となります）…
についてですが、そのご説明は誤りですから修正をお願いします。

CSS仕様書4.1.8 Declarations and propertiesに
略…A declaration is either empty or consists of a property name, followed by a colon (:), followed by a property value. Around each of these there may be …略
と記載されてるように、
プロパティ:値のように宣言が一つの場合、最後のセミコロン「;」は省略可能です。省略しても不具合が起こるブラウザはないです。
省略できない場合というのは、プロパティ:値;プロパティ:値というように、複数の宣言を指定した時に次のプロパティ･値と区切る場合です。
そして、複数の宣言を指定した場合でも最後のセミコロンは省略出来ます。
ですから
height:○px
height:○px;font-size:○px
のどちらも、最後のセミコロンを省略しても正しい書式です。

最後のセミコロンを省略しないで書く多くの理由は、後に再編集で宣言を追記をする際、うっかり忘れてしまうのを防ぐためです。
再編集の際に追記宣言font-size:16pxを指定した時、以下のように区切るセミコロンを忘れ
width:230px;
height:300px
font-size:16px;
のようにするとエラーになりますので。

ちなみに、宣言の度セミコロンが必要になるのはjavascriptなどのプログラム言語の場合です。

▲属性セレクタを複数指定するなら
input[type="text"][type="submit"]{
プロパティ:値;
}
で出来ます。(対応ブラウザなら)

▲引用付について
input[属性・値]の属性セレクタの使い方は、inputに指定された属性・値に該当するものにスタイルを適用する時に使いますが、[type="text"]というように引用付があったほうがいいです。
無しでも表示するブラウザはありますが、CSS2仕様書の例では属性セレクタの属性名がclassの場合は引用符なしになっています。
Appendix Gの構文規則には、属性セレクタの値は《IDENT | STRING》であることから、class・idの場合は識別子として引用符なしにして、それ以外は文字列として引用符付きにするという規則となっているようです。
各ブラウザベンダーは、CSS仕様に準拠する方向ですから、仕様書通りが無難だと思います。

▲また、ご質問の拍手のテキストフィールドと送信ボタン両方に同じスタイルを適用するなら、指定は
input{プロパティ:値;}
のようにinputのタイプセレクタだけでいいです。
また、そのほうがCSSを実装してるPCブラウザ･スマートホンとdocomoブラウザ1.0以外の携帯ブラウザも対応します。
ご提示なさった属性セレクタは、携帯だとsoftbankだけが対応ですから。

▲余談ですが、デザイン上のためだと思いますが
font-size:8px
は、環境によっては小さ過ぎて読めない人もいると思います。
height:15px
も、このサイズでは文字が切れてしまうのは当然のことなのです。
PX指定で読みにくいと、閲覧者側が読みやすくするために端末の設定でサイズを無効にすることはよくあり、そうなるとせっかくのデザインも崩れてしまいますから、そうならないように小さくし過ぎないサイズでデザインすることをおすすめします。

追記のため編集しました。

943SH
[編集]
[1-10表示]
[返信する]
[新規トピ]
[戻る]
無料HPエムペ！