• ベストアンサー

cssの使用方法

furucchの回答

  • ベストアンサー
  • furucch
  • ベストアンサー率27% (3/11)
回答No.1

以下のようなサイトを参考にされてはいかがでしょうか。 http://www.1000percent-web.com/ http://nekoshiki.poke1.jp/index.html http://www.din.or.jp/~hiro-/barrierfree/

関連するQ&A

  • HPビルダー CSSの読み方 

    ページごとにフォントの大きさや行間がバラバラなので統一したいのですが CSSでサイトの細かいことは指定してあるはずなので そこにいって確認しようと思うのですが CSSを見ても意味が全くわかりません。 HPビルダーなのですが どこにフォントや行間の指定がされているのか 教えてください。 CSSの読み方を自分で勉強するのですが なかなか難しく 理解できません。 そのへんの勉強方法も教えて頂ければ嬉しいです。

  • CSSでマージンを残しつつ中央そろえにする方法について

     こんにちは、Phoenix001と申します。  趣味でホームページ製作をしている者です(ただし割と初心者です)。  先日、ネットサーフィンをしてホームページ作成の参考になるサイトを探していた所、 http://www.gardenxgarden.com/ というサイトを発見いたしました。  このサイトはサイトのサイズが横800pxだと思うのですが、1200pxで開くと左右に均等にマージンがあり、ウィンドウを小さくするとマージンからなくなり、さらにウィンドウを小さくしてもページが崩れないように出来ています。  私はこのようにマージンを作りつつ中央にサイトがあり、ウィンドウを小さくするとマージンからなくなるページは始めて見たので是非自分でもやってみたいのですが、CSSの設定はどうやるのでしょうか?  練習用にHTMLとCSSのソースを作りましたので、これでやり方を示していただけると幸いです。  HTML、CSS内容がメニューとコンテンツの(参考サイトのページ3分割ではなく)2分割です。マージンのやり方なので問題はないと思います。  なるべく間違いがないように骨組みは(マージン以外)作ったつもりですが、間違えていたらご容赦ください。  どうぞ、よろしくお願いいたします。 ■練習用HTML <head> <title>マージンがあり、ウィンドウを小さくするとそこからなくなっていくサイトを作るには?</title> <link rel="stylesheet" type="text/css" href="index.css" media="screen,print"> </head> <body> <div id="main">■■←Mainで全体を覆いますよね?使用しない場合は消してください。 <div id="head"> <h1>マージンのあるサイト</h1> </div> <div id="menu"> <h2>リンク</h2> <ul> <li>マージン</li> <li>作りたいです</li> </ul> </div> <div id="content"> <p>マージンがあるのに中央にそろえられて、ウィンドウを小さくするとマージンから消えていくサイトは始めてみました。是非創ってみたいです。解答しやすくなるようにコンテンツのデータを入れてあります。</p> <h2>案内</h2> <p>HTML、CSSが分かる方、解答をお願いいたします。</p> <dl> <dt>マージン</dt> <dd>ページの余白のこと</dd> <dt>やり方</dt> <dd>分からないです</dd> <dt>作る意欲</dt> <dd>沢山あります。</dd> </dl> </div> </div> ■HTML終了 ■練習用CSS(いらないものは消して、いるものは追加してください。h1、h2は分かりやすくなるように入れています。) body { background-color: white color: black; margin-left : auto ; margin-right : auto ; } h1 { font-size: 1.6em; background-color: #480; color: white; padding: 0.2em; } h2 { font-size: 1.0em; border: 1px solid #480; padding: 0.2em; } p { line-height: 1.6em; } div#main { float: middle; width: 800px; } div#menu { float: left; width: 9em; background-color: white; margin-right: 1em; padding: 0.4em; } div#menu h2 { font-size: 1em; } div#menu ul { font-size: 0.9em; list-style-type: none; margin-left: 0; padding-left: 0.5em; } div#menu li { margin-bottom: 0.4em; } div#content { float: left; width: 80%; } div#content h2 { font-size: 1.2em; border: 1px solid #800; padding: 0.2em; } div > *:first-child { margin-top: 0; } ■CSS終了

    • ベストアンサー
    • HTML
  • CSSを使用したページレイアウト

    今までtableを使用してページを作成してきたんですが、tableをできる限り使用せずHTML+CSSのみでページを作成してみたくなりました。 しかしCSSに関しては、基礎的な仕組みと書き方がわかるくらいで、どのように構成すればいいのかわかりません。 あるサイトのソースを見たらDIVにclassを指定しているようでしたが、実際どのように記述されているのでしょうか? 書籍でもサイトでも何でも良いので、参考になりそうなものがありましたら教えてください。

    • ベストアンサー
    • CSS
  • BRのCSSをつかって行間を統一

    HTMLのBRを使用して改行を行っていますが、 FireFoxとIEとで行間が違ってきてしまいます。 行間をそろえるためにline-heightで統一したいのですが、 BRのCSSをつかって行間を統一することは可能でしょうか? よろしくお願いします。

    • ベストアンサー
    • HTML
  • GoLiveのCSSが機能しません

    MacOS9.2、GoLive6.0でサイトを作成し、全ページでレイアウトグリッドを 使用しています。 テキストボックスを使って何十行にもなる長文を書く事があるのですが、 CSS<p>で行間の調整をしようにも機能しません。テーブルを使っても同様です。 試しに、グリッドを外してダイレクトに入力すると、きちんと反映されます。 グリッド上のものに対してはCSS機能は無効なのでしょうか? よろしくお願いします。

  • 外部cssについて

    外部cssからスクロールバーの色を変えたくて色々な参照サイトを見てはコピペするなどして試したのですが、どうも上手くいきません。 拡張子も.cssになってます。 cssの呼び出しURLもトップページに正確に記述しています。 下記参照サイトの例です。 body { scrollbar-base-color:#;****** scrollbar-arrow-color:#******; } 他にも違ったタグで紹介してるサイトがありましたが一番簡単そうだったので決めたのですが、上手くスクロールバーの色を変えるにはどうすればいいでしょうか? 詳しい方教えてください。

    • ベストアンサー
    • CSS
  • HTML、CSSに関して

    HTMLの初心者です。いくつかご質問させていただきます。 ①段落と段落の間に行間を空けたい場合、必ずCSSを使わなければなりませんか?行間を空けたい場合、HTMLの本文中で段落と段落の間に行間を空けて記述するのは間違っていますか?例えば以下のような例文です。 〈p〉ここでは私が旅先で撮影した写真を掲載しています。日本列島津々浦々、特に温泉巡り、行く先々の海の幸、山の幸には目がありません。〈/p〉 〈p〉それでは当サイトをお楽しみください。〈/p〉 このようなHTMLでもブラウザ表示は行間が空いて表示されると思うのですが。 ②CSSの書式として以下のような書式があります。 p{font-size: 1.3em;} このpというのは何ですか?CSSの書式を記述するときに使うものということで深く考える必要はありませんか?また字間についてですが、:と1.3emの間に半角スペースを必ず入れるということは知っていますが(手持ちのホームページ作成入門本にそう書いてあります)、pと{の間にスペースを入れる必要はありませんか? ③行間を調整するCSSを記述した以下のファイルを例文として記載します。上記の手持ちのホームページ作成入門本から抜粋しています。 〈html〉 〈head〉 〈title〉序文に変えて〈/title〉 〈style type="text/css"〉 p{line-height 150%;} 〈/style〉 〈/head〉 〈body〉 〈h1〉序文に変えて〈/h1〉 〈p〉ようこそ、このサイトではラーメンマニアの私が食べ歩いたラーメンを写真付きで紹介しています。 〈/body〉 〈/html〉 この150%という値ですとファイルをブラウザにドロップしたとき〈p〉タグの内容の行間が少し広くなります(と入門本に記載があります)。普通に本文の文字の大きさで1行分空けたい時はどうすればいいですか?つまり現在知恵袋で記載しているような1行分です。150%ではなく1emと記述すればいいですか?また、このCSS書式のp{line-height 150%;}ではline-heightと150%の間に質問②で記載したCSS書式のような:がありません。設定名と値の間は:で区切っても半角スペースでもどちらでもいいのですか? 宜しくお願いします。( `・∀・´)

  • 上下マージンの取り方(CSS)

    スタイルシート(CSS)に携わる方々へ、 皆様の知恵を拝借したく、質問させていただきます。 段落間(P,UL等)の上下マージンの取り方についての質問です。 (A)予め段落の上マージンをゼロにリセットし、段落間は下マージンで操作  例:  p,ul { margin-top:0; margin-bottom:1em; } /* リセット */  .hoge { margin-bottom:0.5em; } /* 上の段落に指定 */ (B)予め段落の下マージンをゼロにリセットし、段落間は上マージンで操作  例:  p,ul { margin-top:1em; margin-bottom:0; } /* リセット */  .hoge { margin-top:0.5em; } /* 下の段落に指定 */ サイト構築において、(A)か(B)で悩んでいます。 皆様の意見を「具体的な理由」もあわせてお教え下さい。

  • cssで文字間、行間設定。

    cssで文字間、行間設定。 dreamweavercs4でサイトを作っています。 本で勉強しただけの素人です。 文字について質問です。 サイズ、行間と文字間を設定したのですが、 たとえば、文字10pt、行間11pt、文字間0ptとすると、文字間(横)はあまり詰まりません。 さらに試しに、文字10pt、行間12pt、文字間0ptにすると、行の間(縦)だけがひらくと思ったら、文字間もあきます。 ptで設定しないほうがいいでしょうか? 文字と文字の間はやや詰めた感じで、行間を少し開けたいのですが、うまくいきません。 行間を設定すると、文字の間もあいてしまうのは、なぜなんでしょうか?? いまいちよくわかりません。 担当のかたから、いつも、サイトの文字が読みにくい、といわれているのですが、微妙な設定がうまくいきません。 http://www.disney.co.jp/character/winnie_the_pooh/ プーさんの説明文のような、文字間隔にしたいです。(cssがみれませんでした。) どなたか、よろしくお願いします。

    • ベストアンサー
    • HTML
  • CSSについて

    外部スタイルシートを使ってホームページを作ろうと考えているのですが、どのように記述をすればよいか分かりません。CSSの記述例が載ってるサイトや、これを書けば十分、という例などがあったら是非教えてください。

    • ベストアンサー
    • HTML