- ベストアンサー
CSSについて勉強中のポイントと実現したいこと
ORUKA1951の回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
なぜリンク先をちゃんと書かないのですか？？(とても不便です。) ＞試したこと：g_navi、menu、gl_menuの名称を変えたコピーを 根本的な原因は明白で、基本ができていない状態で、デザイン目的でHTMLを書いてしまうからです。15年前の1999年のHTML4.01の勧告以来、強く強く言われている事は「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )」でしたね。 HTMLには文書構造しか書かないのです。プレゼンテーションは全面的にスタイルシートに任せます。 ＞1.ディスプレイがスマホサイズ表示（760未満）での上メニュー（メニュー一覧 表示する▼）を、 PCサイズ（950以上）のときのサイドメニュー（Site Menu）と同列に入れたい。 メニューの位置を変えたいだけですよね。 [例] <body> <div class="header"> ・・・ <div class="nav"> <ol> <li><a href="/">Top</a></li> <li><a href="/Books">Books</a> <ol> <li><a href="/Books/book1">book1</a></li> <li><a href="/Books/book1">book1</a></li> </ol> </li> ・・・【中略】・・・ というようにHTMLが文書構造だけでマークアップされていると思います。 なお、HTML5だと <body> <header> ・・・ <nav> <ol> <li><a href="/">Top</a></li> <li><a href="/Books">Books</a> <ol> <li><a href="/Books/book1">book1</a></li> <li><a href="/Books/book1">book1</a></li> </ol> </li> ・・・【中略】・・・ これを div.header{position:relatve;} div.header div.nav ol,div.header div.nav ol li{list-style:none;margin:0;padding:0;text-align:center;} div.header div.nav ol li{display:inline-block;width:20%;} でヘッダーブロックの下に横に並びますし div.header div.nav{position:absolute;top:100%;width:20%;left:0;} でヘッダーの下の左にぶら下がるはずです。 デザインのためではなく、HTMLでは文書構造だけを徹底的にマークアップすること、そして差の文書構造を元にセレクタを書いて、プレゼンテーションを指定するという基本をまず身につけましょう。そうすると自由自在にデザインできるようになります。 サンプル ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HTML/nav/navigation1.html ) このサイトで、ブラウザの[表示]⇒[スタイルシート]でスタイルシートを色々選んだり、ウインドウ幅を変えたり、印刷プレビューで印刷を確認してみると良いでしょう。HTMLには文書構造しか書いてありませんから、デザインの自由度が高くなります。視覚障害者がスクリーンリーダーを利用して読むことも点字プリンターで点字にしても・・・もちろん検索エンジンにも内容が正確に伝わります。
関連するQ&A
- CSSが動かない
http://www.stylish-style.com/csstec/ultimate/css-roll-2.html このサイトにCSSのプルダウンメニューが紹介されていますが、プログラムをコピーしてHTMLファイルにペーストしても、動作しません。 具体的には、最初のメニューは表示されますが、マウスを乗せてもプルダウンメニューが出てきません。 まったく同じような http://www.stylish-style.com/csstec/ultimate/css-roll-1.html これは動作するのですが、なぜ上のほうは動作しないのでしょうか？ 原因など分かる方、教えてください。
- ベストアンサー
- その他（プログラミング・開発）
- cssはpタグの中にかけるのか。
http://www.htmq.com/css/overflow.shtml 上記サイトを見ていると、overflowプロパティをHTMLのｐタグの中に書き込んでいますが、こういう書き方って実際に可能なのでしょうか。
- 締切済み
- CSS
- cssのみでメガメニューの作成について
http://webdesign.tutsplus.com/tutorials/site-elements/big-menus-small-screens-responsive-multi-level-navigation/ のぺーじにある Big Menus, Small Screens: Responsive, Multi-Level Navigation というドロップダウンメニューをメガメニューに変更しようとしていますが 2階層目のリストがどうしても横並びにできません。 cssは下記の箇所のどこかに「float:right;」を入れればよいと考え、いろいろ触りましたが、 2階層目が表示されなくなったり、3階層目が表示されなくなったりします。 .nav > li > a { display: block; } .nav li ul { position:absolute; left: -9999px; border: 1px solid #ccc; background: #ffffff; } .nav > li.hover > ul { left: 0; } .nav li li.hover ul { left: 100%; top:0; } .nav li li a { display: block; background: #1d7a62; position: relative; z-index:100; } .nav li li ul { background:#249578; z-index:200; } .nav li li li a { background:#249578; z-index:200; } メガメニューはjqueryを使って作っている紹介ページがあり 試しましたが、そうすると、レスポンシブ（小さい画面）した際の 開閉式のメニューが動作しなくなりました。 どうかご教示ください。お願いします。
- ベストアンサー
- CSS
- 【CSS】ヘッダ固定
CSSを使ってヘッダを実現したいです。 検索サイトで探したところ、以下URLが実現したい事に近いです。 http://css.alsacreations.com/modeles/modele13.htm 上記サンプルはヘッダとボディーの比率をheight: 20%; height: 80%;で指定してますが、私が実現したい事は、ヘッダのサイズを一行（文字の高さ）としたいのです。 どうしたらよいでしょうか？
- 締切済み
- HTML
- ｃｓｓについて質問です。
ホームページ作成の勉強をしている者です。 分からないことがあるので質問させてもらいます。 http://www.htmq.com/csskihon/401.shtmlこのサイトのｃｓｓのソースに float:left; /*リスト項目を横に並べる*/ display:inline; /*リスト項目をインライン表示にする*/ こう書かれていました。 display:inline;ですでにリストが横になるので、float：ｌｅｆｔ；で横に並べる必要があるのですか？ 調べてもいまいち納得いく答えが見つからないので分かる人教えてください。
- 締切済み
- CSS
- CSS Dock Menu[jQuery]について
WEBサイトで「MacOS X風ドックメニュー」を実現させる[CSS Dock Menu]についての質問です。 http://www.ndesign-studio.com/blog/mac/css-dock-menu Demo通りの動きを実現する事はナビ通り行えば問題ないのですが、 Demo以外の機能として、何かフラグが立ったときに アイコンをぴょんぴょん飛び跳ねさせる事(これもOSX風に)は可能なのでしょうか。 お詳しい方、ご教授ください。よろしくお願いいたします。
- ベストアンサー
- JavaScript
- CSSファイルの分け方皆様はどのようにしています？
こんにちは、サンタともうします。 宜しくお願い致します。 Webを作る際に、CSSの読み込みを次のようにしています。 import.css ************************************************ @charset "UTF-8"; @import url("reset.css");/*ブラウザ間の差異を無くすYUI*/ @import url("fonts.css");/*フォントサイズを整えるYUI*/ @import url("base.css");/*CSS要素の基本の定義*/ @import url("common.css");/*CSS要素スタイルの定義（ポジショニング迄）*/ @import url("index.css");/*index.htmlにだけ適用用のCSSファイル*/ ************************************************************ base.cssとcommon.cssが似たような役割をさせているので、統一したほうが良いのかなあ？とも考えました。 違いは、 reset.css ブラウザ間の差異を無くすためのCSS(YUI３) fonts.css IEのバグ回避と、それぞれの要素の基本フォントサイズを指定します base.css アウトラインもない、h要素や、段落を分けるだけのみ用の、CSS comoon.css 各HTMLファイルの共通するレイアウトポジションを適用する、CSS index.css index.htmlだけにしか使用されない、CSS みなさんは、どのようにしておられますでしょうか？ 私の分け方で、必要のない物、纒められるものを何かありましたら、ご教授頂けましたら幸いです 宜しくお願い致します。 失礼致します。 教えて頂けましたら、幸いです。
- ベストアンサー
- CSS
- cssファイルがダウンロードできてしまう・・・
cssを外部ファイルに置いて、http://○○○.com/css/index.cssのようにしているのですが、以下の問題が発生しています。 ■http://○○○.com/css/index.cssでcssファイルがダウンロードできてしまう。 ■cssファイルがYahoo検索エンジンにインデックスとして大量に登録されてしまう。 上記の2点の問題で非常に困っています。htaccessに <Files ~ "\.css$">deny from all</Files> と記述しましたが、これではサイトにアクセスするとcssを読み込まずにレイアウトが総崩れしてしまいます。 どのように記述すればよいのでしょうか？
- ベストアンサー
- HTML
- 忍者ホームページにcssが反映されない
「忍者ホームページ」でサイトを作ろうとしています。 初心者なので下記サイトをみてほぼそのままやってみました⬇️ http://www.htmq.com/csskihon/401.shtml FTPはサーバーダックを使用しています。 htmlは反映されたのですが、cssをアップロードしても反映されません。 フォルダも分けてます。 因に、試しにDreamWeaverにこのhtmlとcssをコピペして入れてみたらプレビューのところには このサイトと同じように反映されてました。 ということは、サーバーダックにアップロードする時に問題があるのでしょうか？ 何か考えられる点があればご回答よろしくお願い致します。
- 締切済み
- CSS
- CSS playについて
http://www.cssplay.co.uk/menu/fast.html のサイトにあるように、サイズを揃えたいのですが、どこからこのようにできるのか、 参考のcssなどが見当たらないのですがどのように、このデモのようにできますか？
- ベストアンサー
- ブログ
お礼
早速のご回答、ありがとうございます。 明日の朝までに熟読し返信させていただきます。
補足
とても詳細に書いてくださってありがとうございます。内容、確認しました。 私の説明が悪く実現したいことに一部誤解を招いてしまったようです。 ベースにしているcssでのメニュー表示は以下のようになっています。 ■スマホ用表示 上メニュー：折り畳みメニュー 左メニュー：非表示 ■PC用表示 上メニュー：横並び表示 左メニュー：縦並び表示 今回実現したいことは、 PC用表示の左メニューをスマホ用上メニューの ような折り畳みメニューに変更したいと言うことです。 よろしくお願い致します。