- ベストアンサー
サイトを作る際、数値はどう決める？
今、htmlやcssなどを勉強しております。 サイトを制作する際、marginやpaddingなどの数値を入力する時に、どういうふうにその数値を決めて入力しているのでしょうか？ 感覚的に掴んでるものなのでしょうか？ pxやemなどの数値をどうやって把握しているのか気になります。 例えば、「これぐらいが15pxだな・・・」みたいな感じです。
- SI5
- お礼率60% (137/228)
- その他（インターネット・Webサービス）
- 回答数3
- ありがとう数1
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
実際の表示で調整するしか無いです。 慣れるというか、個人サイトである程度作ってしまったら あとはCSSファイルの流用だけで 個別のページごとにデザインしなおしたりする時代じゃ無いと思います。 表示確認には、IE,Firefoxのほか、Chromeや、可能であればSafariやOpera それにスマートフォンなどまで確認するのが理想ですが 画面の大きさ、表示ウィンドウの大きさで、同じ設定でも 見やすくなったり、そうで無くなったりします。 ですから、場合によっては%による指定が効果的なこともありますし… そのくらいの環境で見比べてみると ウェブが厳密な一意のデザインを実現するものでは無いことも明らかで… あんまり細かく考える必要は無いと割り切る人もいます。 技術系のサイトの人は、そういう理念で あんまりデザインにこだわらなかったりするんですよね。
その他の回答 (2)
- adb1990
- ベストアンサー率63% (263/412)
人にもよると思いますが（←特に個人サイト）、きっちりやりたいなら コーディングの前にIllustratorやPhotoshopなどのデザインソフト（フリーのものでも良いですし）で実際の見栄えを作成します。 その際、余白は○○px…のように決めて作れば、CSSで設定するときにその数値をそのまま採用できます。 とはいえ、ブラウザによって微妙に見え方が違ってくるので、最終的には実際にブラウザで確認しながら微調整することになると思います。 「これぐらいが15pxだな・・・」は、何度も値をいじって調整したりしているうちに感覚的にわかってくるようになるのではと思います。
エディターで打ち込んでるのかしら 実際にブラウザで見て修正しますけど後は慣れ そもそも専用ソフト使うので見たまま制作するけど
関連するQ&A
- CSSの記述でのクラスの定義で
CSSの記述の中で .yoko1 { padding : 0 0 5px 10px; border-bottom: 4px solid #00ffff; margin-top: 1em; margin-bottom: 2em; } とクラス名が付いています p.yoko1 { padding : 0 0 5px 10px; border-bottom: 4px solid #00ffff; margin-top: 1em; margin-bottom: 2em; } こっちはタグ名に応じたクラスを定義していますが タグ名に応じたクラスを使用するメリットはなんなのでしょうか？ 全てはじめに書いたクラスをしようしても問題はないように思うのですが、、まだ勉強始めたばっかりで疑問に思い質問させていただきました。 よろしくお願いいたします。
- ベストアンサー
- HTML
- プロのコーダーは、仕事の時長い文章を改行したり、イ
プロのコーダーは、仕事の時長い文章を改行したり、インデントを入れたりする時すべてCSSでやるものなのでしょうか？ それともbrや全角空白でやったほうが早いのでこちらで良いのでしょうか？ 私は下記のようにCSSでやっているのですが、下記のようなやり方でもWEB制作会社で働く場合問題にならないでしょうか？ p.indent,dd.indent,dt.indent { text-indent: 1em; margin-top: 0px; margin-bottom: 0px; } p.indentnewline,dd.indentnewline,dt.indentnewline { text-indent: 1em; margin-top: 0px; } dt.indentnewline { text-indent: 1em; margin-top: 0px; padding-bottom: 1em; } p.newline,dd.newline,dt.newline { margin-top: 0px; padding-bottom: 1em; }
- ベストアンサー
- CSS
- 枠線で全体を囲んだとき下の枠線が消えてしまう
kbd要素を枠線で囲って、その部分と「と入力してください。」の文字とバランスよく表示させたいのですが下のように記述したところ、下の枠線が消えてしまいます。 marginやpaddingを調整してもうまくいきません。 どうすればよいでしょうか？ 回答よろしくお願いします。 CSSソース kbd { margin: 0 0.3em; padding: 0.1em 0.3em; border: 1px solid black; } HTMLソース <kbd>keybord</kbd>と入力してください。
- ベストアンサー
- HTML
- docomo携帯サイトのボックスのマージン
携帯サイトで、ボックス(div)に対して マージンを適用させたいと思っています。 実際にそういうサイトがあったので、実現させたいのですが とあるサイトにあった以下のソース <div style="background-color:#ffcccc; margin:0px; padding:0px;">↵ きつきつ</div> <div style="background-color:#ccffcc; margin:1em; padding:1em;↵ border-width:1em; border-style:solid; border-color:#006600;">ゆったり</div> <div style="background-color:#ccccff; margin:0.5em; padding:0.5em;↵ width:2em;">はば指定</div> こちらではDocomoの実機でマージンが取れませんでした。 Docomoの仕様等あるとは思いますが 実際にマージンをとってるサイトがあったのですが あれはどのように実現しているのでしょうか？ なにかいい方法があればご教授下さい。
- 締切済み
- HTML
- CSSの優先順位について
うまく説明できるかわかりませんが・・・ XHTMLとCSSでページを作成しています。 デザインは全て外部CSSを参照しているのですが、 トップページだけ、一部個別設定したいと思っています。 リストメニューのデザインを現在このようにしています。（外部CSS） ul{ list-style-type:none; margin-left:0; padding-left:0; padding:0; margin-top:30px; width:120px; float:left } li{ padding-right:10px; font-size:0.75em; margin-bottom:10px; border-bottom:solid 1px #66aa66 } --------------------------------------- トップページだけ、 ul{ list-style-type:none; margin-left:0; padding-left:0; background-color:#efef77; padding:3px 20px; margin-top:0 } li{ display:inline; padding-right:10px; font-size:0.75em } ----------------------------------- この設定にしたいので、トップページヘッダーにこちらを入力しました。（外部CSSよりヘッダーを優先するとテキストに書いてありました） しかし、 li{ display:inline; } だけは、外部CSSを参照してしまいます。 なぜでしょうか？？ 優先させる為に li display:inline !important; } としてみましたが、ダメでした。 どなたかご教授願いますm(__)m
- 締切済み
- その他（プログラミング・開発）
- CSS IDごとのCLASS指定
以下のようなCSSがあった場合に、それぞれのIDに同じ名前で中身の違うCLASSを指定する事は出来るのでしょうか？ #main{ margin:0; padding:0; background: transparent; float : left; font-size : 0.8em; } #menu{ margin:0; padding:0; width:140px; float : left; font-size : 0.8em; background :url('img/back.gif') no-repeat left top; color:#17F600; } #mainにはこれ、 .txt { font-size : 1em; line-height : 120%; margin:0 0 5px 380px; padding:0 0 0 30px; text-align : left; color:#69788A; } #menuにはこれ .txt{ font-size : 1em; padding:0 0 0 10px; margin:5px 30px 5px 0; text-align : left; color:#69788A; border-bottom:1px solid #CFDEEF; } といったかんじなのですが…
- ベストアンサー
- HTML
- CSSの絶対配置と相対配置の違い
おはようございます。 閲覧していただいてありがとうございます。 タイトル通りなのですが、CSSの絶対配置と相対配置の 違いについて教えて下さい。 本やサイトを色々探してみましたが どれも書き方が微妙に違っていて分かりません； 完全に自己流の書き方ですが、サンプルとして ====================== body{ margin:0px; padding:0px; } #head{ margin:10px 0px 0px 0px; padding:0px; } #content{ margin:10px 0px 0px 0px; padding:0px; } ====================== 上記のような書き方をした場合、 これは絶対配置と相対配置のどちらに あたるのでしょうか？ 勉強不足で恥かしいのですが ご教授いただけると幸いです。m(__)m
- 締切済み
- CSS
- cssボックスでのリンクがうまくできません
css初心者です。表現が分かりにくかったら申し訳ありません。 現在Dream Weaver8でサイトを作成中です。壁に当たり、困っております。 cssで背景に画像を置いて、そこにボックスを作りリンクを貼っていて、最初の頃はプレビューでマウスを置いたら反応していたのですが、あるときからマウスを置いても反応しなくなりました。 本に載っている通にしているつもりですがどうしても解決しないため、よろしければご指導下さいませ。参考までにその部分のhtmlとcssを掲載させて頂きます。 <div id="mainnavi"> <h2><a href="#"><em>あああ</em></a></h2> <h2><a href="#"><em>いいい</em></a></h2> <h2><a href="#"><em>ううう</em></a></h2> <h2><a href="#"><em>えええ</em></a></h2> <h2><a href="#"><em>おおお</em></a></h2> </div> #mainnavi { margin: 3px 0px 0px; padding: 0px; width: 850px; background: url(image/mainmenu.jpg) no-repeat; height: 50px; #mainnavi h2 em { visibility: hidden; } #mainnavi h2 a { display: block; height: 50px; width: 170px; margin: 0px; padding: 0px; text-decoration: none; } お手数かけますが、よろしくお願い致します。
- ベストアンサー
- CSS
- jQuery、JSONの結合方法
いつもお世話になります。 jQuery.fn.hoge = function(options) { var defaults = { 'val1':'1', 'val2':'2', 'Css':{ 'padding':'3px', 'margin':'2px', 'background-color':'red' } } などとして、 hoge( 'val2':'222', Css':{ 'padding':'10px' } ) var setting = $.extend(defaults,options); とすると、 settingが 'val1':'1', 'val2':'222', Css':{ 'padding':'10px' } となります。 ここで、 settingが 'val1':'1', 'val2':'222', Css':{ 'padding':'10px', 'margin':'2px', 'background-color':'red' } となるようにするにはどうしたらよいのでしょうか。 つまり、 'val2':'2', －＞ 'val2':'222', 'padding':'3px' －＞ 'padding':'10px' と書き換えられるのは良いのですが、, Css':{ 'padding':'10px' } となってしまい 次の２つが削除されてしまうのは困るということです。 'margin':'2px', 'background-color':'red' よろしくお願いいたします。
- ベストアンサー
- JavaScript
- Operaで背景をリピートさせたくない
サイトをIE 6/Firefox 2/Opera9で確認をとっているのですが Opera9だけ背景の指定（リピートさせない）がうまくいきません。 H3に背景を指定したいのですが、繰り返してしまいます。 h3 {background:url("h3.gif") no-repeat} h3,h4 {padding:2px 5px;margin:0.5em 0 0.8em;font-weight:bold} CSSは↑こんな感じで書いています。 背景をbodyで指定した場合は、繰り返さないのですが 何が原因なんでしょうか。 ご助言お願いいたします。
- ベストアンサー
- CSS
お礼
回答ありがとうございます。 ％で効果的な場合があるなんて、なるほどですね。 慣れも必要のようですね。 参考になりました。 ありがとうございました。