• ベストアンサー

html5にて水平線の引き方は？

こんにちは。 html5での水平線の引き方を調べていましたら<hr>を水平線として装飾目的で使用するのは非推奨という事が書いてありました。 そこでどうやって水平線を引くか調べてみましたが、とあるサイトでCSSにて下記のようなサンプルを見つけました。 hr { height: 3px; background-color: #ff0000; border: none; color: #ff0000; } 上記はhtml5に則った正しい表現なのでしょうか？もし正しくないなら水平線を引く方法をご教示願えないでしょうか？ 以上、よろしくお願いいたします。

  • HTML
  • 回答数6
  • ありがとう数7

質問者が選んだベストアンサー

  • ベストアンサー
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.5

＞これはORUKA1951さんご提示の<aside></aside>に別途CSSファイルにて修飾すればよろしいでしょうか？ 　そうなのです。あなたが記事内の特定部分に罫線を用いて、その前後と区別したいということは、文書構造上も異なるはずです。 　たとえば、本文とは直接関係しない記事である場合は、<aside></aside>で囲みますし、それが本文から参照すべき記事（--書籍で言うと参考記事とか挿絵とか--）であれば<figure></figure>で囲むでしょう。 　また、それが注意すべき事項でしたら<div class="note"></div>とかでしょう。 ※HTML5の仕様書では、さらにsectionの境目には書かない!!とまで書いてあります。なぜならsectionの終了で異なることが明白だからと・・。 HTML5でのHR要素は、複数の同レベルの段落が続く場合にその話題が変わるときなどに使用すると解釈が変わりました。 　他にも廃止の方向だった<U>や<I>は意味が変わって存続しますし、<address><b><cite><dl><label><menu><s><small><strong>も、<hr>と同様にその用途からプレゼンテーション的なものがなくなり意味のある要素に変更されました。 　あなたが、<hr>を入れようとしたところが、何であるかを見直してみてください。そうすれば正しい解決方法が見えてくるでしょう。 　そうしてHTMLに文書構造だけしか書いていなければ、スタイルシートでのデザインの自由度は大きくなります。決して難しくなるわけではなく、楽になったと気づかれるでしょう。

shoshin01
質問者

お礼

ご回答ありがとうございます。 とても為になるお答えと思いますが、咀嚼がまだ出来るレベルではありません…。でもいつか仰る事が理解出来るようになった時、ORUKA1951さんに感謝出来ると思います。

その他の回答 (5)

  • think49
  • ベストアンサー率59% (285/482)
回答No.6

#4 です。#3のお礼を読みました。 なるほど、20世紀と21世紀で区切っているのでね。 意味が明確ですし、hr要素を使用していいのではないでしょうか。

shoshin01
質問者

お礼

本当に何度もご回答ありがとうございました。 自分の不勉強、イヤになりました。ありがとうございました。

  • think49
  • ベストアンサー率59% (285/482)
回答No.4

#3 です。 > この事から言って、この表現で間違いは無いでしょうか？ 「段落の区切り」を表しているならその表現で正しいと思います。 ただし、それが「段落の区切り」なのか「段落のボーダー線」なのかは内容によりますので現情報では判断できません。(#1 でも述べました) 実例を挙げられないのでしたらご自分で判断してください、としかいえません…。

shoshin01
質問者

お礼

ご回答ありがとうございます。 >例を挙げられないのでしたらご自分で判断してください、としかいえません…。 例としては、 1991 1992 1993 1994 1995 1996 1997 1998 1999 2000 --------------------- 2001 2002 ... どんなものでしょうか？私も判断が付きません。すみません。

  • think49
  • ベストアンサー率59% (285/482)
回答No.3

HTML Standard(通称HTML5)ではhr要素は「段落の区切り」を表しますので、区切りとして使用すればhr要素で間違いありません。 それが「段落の区切り」なのか「段落のボーダー線」なのかは内容によりますので現情報では判断できませんが。 hr要素は各ブロックレベル要素のborderよりも強い区切りを表しています。 論理構造上、ブロックレベル要素で区切るよりも強い区切りを表すときに使用してください。 http://www.whatwg.org/specs/web-apps/current-work/multipage/grouping-content.html#the-hr-element http://www.html5.jp/tag/elements/hr.html HTMLは装飾を定義しないので気をつけてください。HTMLは論理構造を定義するだけです。 HTML5になってアプリケーションとしての意義が加わりましたが、装飾はHTML4の時代と変わらずCSSの役割です。 ご掲示の例ではHTML5で論理構造(段落の区切り)を定義し、CSSで装飾(水平線)を定義しています。 http://www.mozilla.gr.jp/standards/webtips0003.html 水平線を引くだけならCSSで装飾し、対象ブラウザで同じ見え方になっていれば良く、HTMLをどうマークアップするかは重要ではありません。 HTMLで重要なのは「それが正しい論理構造として定義されているか」です。 段落の区切りではない部分にhr要素を使用していれば明らかな誤りとなります。 例えば、http://okwave.jp/qa/q7902457.html では回答内容を区切る為にhr要素を使用していません。 このことから「区切りを表す程には段落が分かれていない」というWeb製作者の意図が読み取れます。

shoshin01
質問者

お礼

think49さん、ご回答ありがとうございます。 >ご掲示の例ではHTML5で論理構造(段落の区切り)を定義し、CSSで装飾(水平線)を定義しています。 この事から言って、この表現で間違いは無いでしょうか？ hr { height: 3px; background-color: #ff0000; border: none; color: #ff0000; }

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.2

＞難しいですね。 　いえ、とっても簡単になったのです。 　なにせ、HTMLには文書構造しか記述する必要がなくなって、プレゼンテーションからは開放されるのです。例えば <body> 　<h1>ページのタイトル</h1> 　<p>簡単な説明</p> 　<nav> 　　<ol> 　　　<li><a href=""></a></li> ・・・【中略】・・・ 　　</ol> 　</nav> 　<sectin> 　　<h2>本文見出し</h2> 　　<section> 　　　<h3>項見出し</h3> 　　　<p>記事</p> 　　　<figure> 　　　</figure> 　　</section> 　<sectin> 　　<h2>本文見出し</h2> 　　<section> 　　　<h3>項見出し</h3> 　　　<p>記事</p> 　　</section> 　　<aside></aside> 　　<nav> 　　　<ol>目次</ol> 　　</nav> 　</section> 　<footer> 　</footer> </body> だと、本当に簡単でしょう。後で誰が見ても・・検索エンジンもどこが主文でどれが無関係の記事でどこがナビかが分かる。 ・・・プレゼンテーションから開放されるとHTML作りは、本当に簡単になるのですよ。 HTML4.01では 『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』 　のように抽象的でしたから分かりにくかったのが分かりやすくなりました。 　⇒HTML5 における HTML4 からの変更点( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements ) 『<hr>を水平線として装飾目的で使用するのは非推奨』は、HRに限ったことじゃないのです。すべての要素について、装飾目的での使用は禁止です。 　あなたが罫線を引きたいとしたら、文書構造上は何らかの意味があるわけですから、<section>を別にするなり、<aside>でマークアップすれば良いだけです。 　これって、慣れると驚くほど簡単であることに気がつきますよ。 　

shoshin01
質問者

お礼

ORUKA1951さん、ご回答ありがとうございます。 >あなたが罫線を引きたいとしたら、文書構造上は何らかの意味があるわけですから、<section>を別にするなり、<aside>でマークアップすれば良いだけです。 これはORUKA1951さんご提示の <aside></aside> に別途CSSファイルにて修飾すればよろしいでしょうか？

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

発想自体をHTML5的にしてください。 HTML5を策定するに当たって目標とされたことは ・新しい技術をプロプライエタリなソフトウェア( http://ja.wikipedia.org/wiki/%E3%83%97%E3%83%AD%E3%83%97%E3%83%A9%E3%82%A4%E3%82%A8%E3%82%BF%E3%83%AA )を使って実装すること 　VIDEO,CANVAS要素やINPUT要素の拡張 ・文書を構造化すること 　HEADER,SECTION,FOOTER,FIGURE,ASIDEなどの要素の追加 HTML5にとってHR要素の意味づけは 　⇒4.5.2 The hr element( http://www.w3.org/TR/2012/CR-html5-20121217/grouping-content.html#the-hr-element ) 　「段落レベルのテーマの変わり目」であり、sectionの境界にはそもそも不要・・・なぜならそれ自体が境界をすでに示しているからです。上記に例と共に詳しい説明があります。 　具体的には <section> 　<h2>このセクションの見出し</h2> 　<p>記事の段落</p> 　<p>記事の段落</p> 　<hr><!-- 前後が意味的に異なる段落であるがひとつのセクションである場合--> 　<p>記事の段落</p> 　<figure>挿絵的な図や記事</figore> 　<p>記事の段落</p> </section> <section> 　<h2>このセクションの見出し</h2> 　<p>記事の段落</p> 　<aside> 　　<p>本文とは直接関係ない記事</p> 　</aside> 　<p>記事の段落</p> </section> 　の場合、<hr>が挿入可能なのは例示の通り一箇所だけです。 　それ以外は、section+section{border-top:3px red solid;padding-bottom:1em;}のようにすべきです。 　デザインのためにHTMLは書いてはならない!!!! これがHTML5です。 ^^^^^^^^^^^^^^^^ 　HRは、試されたら分かるようにある程度の大きさを持つブロック要素で、ブラウザによって描画は異なります。多分その指定ではブラウザによっては異なる表示になるはずです。 ＞「html5での水平線の引き方を」 ＞上記はhtml5に則った正しい表現なのでしょうか？ は、明らかに誤りです。 ^^^^^^^^^^^^^^^^^^^^^ 　HTML5はすべての要素は(意味的な)文書構造を示す要素になり、文書構造を示すだけになります。プレゼンテーションは、すべてスタイルシートに任せます。 　『本文中の挿絵の前後に罫線を表示したいがスタイルシートは？』 と考えないとならないのですよ。 <p> 例えば、文書中に本文に直接関係ない記事があって、その前後を罫線で分かりやすくしたいなら、 </p> <aside> <p> ちょっと余談ですが、HTMLは4.01が最終による予定でした。しかし、複雑なXHTMLは受け入れられなく結局、WHATWGがW3Cに対抗して作られ始めたHTML5をW3Cが取り入れて、時期HTMLとして作られることになりました。 </p> </aside> だとしたら section aside{font-size:0.9em;margin:1em;border:solid 1px blue;border-width:1px 0;} と指定しなさい・・・ということです。 ★これがHTML5の最も重要なところです。 　・・・実は、HTML4.01でもそうでした

shoshin01
質問者

お礼

ORUKA1951さんありがとうございます。 難しいですね。ちょっと考えてみようと思います。ありがとうございました。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • この部分の画像を入れるには・・？？

    <!--＊　はじめ　＊--> <table><tbody><tr><td> <div style="border:1px solid #ff6699;width:400px"><div style="border-width:3px;border-style:solid;border-color:#fff #ffbbbb #ffbbbb #fff;background:#ffcccc;padding:4px"><div style="border:3px dotted #fff;padding:4px"><div style="border-width:3px;border-style:solid;border-color:#ffbbbb #fff #fff #ffbbbb"><div style="border:1px solid #ff6699;background:#fff;font-size:13px;color:#ff6699;padding:15px"> <img src="写真ＵＲＬ" width="幅(ピクセル)" height="高さ(ピクセル)" border="0" align="left" style="margin:0 7px 0 0"> <b>ＨＮ</b>　☆　プロフィール <hr style="border-style:solid;color:#ff6699;height:1px"> <b>職業／学校</b>　☆　プロフィール <hr style="border-style:solid;color:#ff6699;height:1px"> <b>住んでるとこ</b>　☆　プロフィール <hr style="border-style:solid;color:#ff6699;height:1px"> <b>性別</b>　☆　プロフィール <hr style="border-style:solid;color:#ff6699;height:1px"> <b>年齢</b>　☆　プロフィール <hr style="border-style:solid;color:#ff6699;height:1px"> <!--＊　おわり　＊--> すいません。上記のタグは、ＨＰ用のプロフィールなんですが、写真を入れることのできるプロフィールなんです。。 が、上のほうに、写真ＵＲＬというのが、あって、多分そこに写真を入れるんですが、写真ＵＲＬって何ですか？マイピクチャーに入れてる写真を使うのですがＵＲＬなんかないです。。 どうしたらいいんでしょうか？

  • IE6.0のバグ

    いつもお世話になっております。 IE6.0のブラウザでの表示についてお願いします。 htmlと外部cssでレイアウトしているのですが、 IE6.0の表示だけがずれてしまいます。 #hr 　{ 　position: relative; 　width: 700px; 　height: 5px; 　background-color: #000000; 　margin: 3px 0px 0px 0px; 　border-style: none; 　padding: 0; 　} を指定してある<hr>がうまくいきません。 <hr>の上下に空白(幅)ができてしまいます。 いろいろ検索して対処法を考えたのですが、 どれもうまくいきませんでした。 どなたかわかる方、宜しくお願い致します。

  • CSSでIEとFirefoxでの表示の違い

    IE6とFirefox2.0で試しています。 次のように、naviでborderを使うとIE6では普通に表示されるのですが、 Firefoxだと右側にborderのサイズの2倍分くらいはみ出てしまいます・・・ 両方に正常（希望通り）に表示されるようにするには どのような記述にすれば良いのでしょうか？ 「sample.css」 .wrapper { background-color: #ccffcc; margin: auto; width: 600px; height: 100%; } .navi { background-color: #aaffaa; border: 3px solid #ff4500; width: 600px; height: 150px; position: relative; } 「a.html」 <html> <head> <link rel="stylesheet" href="sample.css" type="text/css"> </head> <body> <div class="wrapper"> <div class="navi"> </div> </div> </body> </html>

    • ベストアンサー
    • HTML
  • W3C CSSで文法解析エラーが発生しました

    W3C CSS 検証サービスで 文法解析エラーが発生しました というエラーメッセージが出ます。 cssは次のとおりです。 .qa { color: #ffffff; /* 文字色 */ font-size: 17px; /* 文字サイズ */ font-weight: bold; /* 文字を太く */ text-align: left; .q { background: linear-gradient(-80deg, #ff65ff, #65ffff); /* グラデーションの背景色 */ border: 2px solid #ff0000; /* 線の太さ 線のタイプ 線の色 */ border-radius: 20px; /* 角を丸く */ height: 60px; padding: 15px 40px 15px 15px; position: relative; cursor: pointer; &:before { position: absolute; content: ""; display: block; width: 10px; height: 2px; background-color: #ffffff; right: 15px; top: 50%; transform: translate(0, -50%); } &:after { position: absolute; content: ""; display: block; width: 10px; height: 2px; background-color: #ffffff; right: 15px; top: 50%; transform: translate(0, -50%) rotate(90deg); } } .q.active { &:after { display: none; } } .a { background-color: #999999; border-radius: 20px; /* 角を丸く */ height: 60px; display: none; padding: 15px; } } 検証したスタイルシートを以下に示します の表示は .qa { color : #ffffff; font-size : 17px; font-weight : bold; text-align : left; } です。 どこをどのようにすれば良いでしょうか？

    • 締切済み
    • CSS
  • ＣＳＳを消して表に色を付けたい！！！

    参考サイトのソースをそのまま使って編集してたら、表を挿入して、色を付けようとしたら「ＣＳＳが設定されているため・・・」と出て表に色がつけられません。 <!-- BODY { MARGIN-TOP: 3px; COLOR: #000000; BACKGROUND-COLOR: #e6eee6; TEXT-ALIGN: center ;} TABLE { BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; MARGIN: 0px; WIDTH: 900px; BORDER-COLLAPSE: collapse; BORDER-RIGHT-WIDTH: 0px ;} TD { FONT-SIZE: 11pt; MARGIN: 0px; WIDTH: 140px; BORDER-COLLAPSE: collapse; BACKGROUND-COLOR: #48D1CC; TEXT-ALIGN: center ;} DIV { BORDER-RIGHT: #999999 1px solid; BORDER-TOP: #999999 1px solid; BORDER-LEFT: #999999 1px solid; WIDTH: 900px; BORDER-BOTTOM: #999999 1px solid; BACKGROUND-COLOR: #ffffff ;} .menu { BORDER-RIGHT: #66cc99 0px solid; PADDING-RIGHT: 3px; BORDER-TOP: #66cc99 0px solid; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; BORDER-LEFT: #66cc99 0px solid; WIDTH: 100%; COLOR: #ffffff; PADDING-TOP: 3px; BORDER-BOTTOM: #66cc99 0px solid; BACKGROUND-COLOR: #1E90FF; TEXT-DECORATION: none ;} .menu:hover { COLOR: #004411; BACKGROUND-COLOR: #FFF8DC ;} .close { BORDER-RIGHT: #ff0000 1px solid; BORDER-TOP: #ff0000 1px solid; FONT-WEIGHT: bold; FONT-SIZE: 11pt; BORDER-LEFT: #ff0000 1px solid; COLOR: #dd0000; BORDER-BOTTOM: #ff0000 1px solid; BACKGROUND-COLOR: #ffffff; TEXT-DECORATION: none ;} .close:hover { COLOR: #ffffff; BACKGROUND-COLOR: #ff0000 ;} --> １．ＣＳＳを全て解除しなければいけないのですか？ ２．メニューにカーソルをあてたら色が変わるようにしています。表に色をつけるようにするには、どこを削除すればいいのですか？

  • 見出しーCSS表示方法についてお願い致します

    　 　お世話になっております。 　以下のサイトが便利だと思い、リボンタイプの”見出し”の生成を試みました。 http://web-dou.com/tool/css_gen_h.php [CSSコード] h6.{ 　 sample2     position: relative;     color: #ffffff ;     background: #FF0000;     font-size: 16pt ;     line-height: 1;     margin: 20px -10px 20px -10px;     padding: 10px 5px 10px 20px;     box-shadow:1px 3px 7px 0px  #663300 ;     border-top:3px solid #ff6347; } .sample2:after, sample2:before {     content: "";     position: absolute;     top: 100%;     height: 100;     width: 700;     border: 5px solid transparent;     border-top: 5px solid #333; } .sample2:after {     left: 0;     border-right: 5px solid #333; } .sample2:before {     right: 0;     border-left: 5px solid #333; } [HTMLコード] <h6 class="sample2">メニュー４</h6> 　ですが、ブラウザーで開いてみますと、 　メニュー４ 　とだけ、表示されるのみで、目的のリボン型見出しは、表示されな状況にあります。 　なお、ブラウザーは、Safari　バージョン 5.1.10　を使用しております。 　何が問題なのか、もしくは、解決策をご教示いただければ、幸いです。

    • ベストアンサー
    • CSS
  • モバイルサイト構築 - CSS/Class/IDの使用について

    初めて携帯サイトを作っています。 モバイルサイトに詳しい方、教えてください。 CSSは外部ではなくHEADのスタイル部分に記述しています。IE等のPCブラウザでは普通に表示されるのですが、エミュレーターで表示してみるとスタイル（ID)がまったく適用されません。 Classで指定している部分はそのスタイルが適用されているのですが、ID＃で指定すると適用されません。書き方に問題があるのでしょうか・・・。 まずはAUを対象に作っているのですが、何かAUどくとくの記述ルールがあるのでしょうか。教えてください。 以下ソースです。（CSSだけ）↓↓↓↓ <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//OPENWAVE//DTD XHTML 1.0//EN" "http://www.openwave.com/DTD/xhtml-basic.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <!-- XHTML宣言 ここまで --> <!-- ここから上は固定 --> <head><title>いまよむトップ</title> <meta http-equiv="content-type" content="text/html;charset=shift_jis" /> <!-- CSS --> <style type="text/css" media="メディアタイプ"> body {margin:0; padding:0;} .marquee { font-size:xx-small; /* 変更不可 */ color: #ffffff; background-color: #FF0066; } .top_logo {text-align: center;} .div_bace { font-size: x-small; /* 変更不可 */ background-color: #FFCCCC; } .div_bace#top {border: solid 1px #000000;} .title { font-size: medium; color: #ffffff; text-align :center; margin-top :0; } .title#001 {background-color: #ff0066;} .title#002 {background-color: #FF9900;} .title#003 {background-color: #33CCFF;} .title#004 {background-color: #000000;} .title#005 {background-color: #99CC00;} .title#006 {background-color: #FF9900;} .title#007 {background-color: #990099;} .title#008 {background-color: #FFFFB5;} .title#009 {background-color: #FF6699;} .title#010 {background-color: #000000;} .title#011 {background-color: #000000;} .div_bace#shinkan {border: 2px solid #ff0066; margin: 3px;} .div_bace#osusume {border: 2px solid #FF9900; margin: 3px;} .div_bace#tokushu {border: 2px solid #33CCFF; margin: 3px;} .div_bace#shoseki {border: 2px solid #000000; margin: 3px;} .div_bace#comic {border: 2px solid #99CC00; margin: 3px;} .div_bace#shashinshu {border: 2px solid #FF9900; margin: 3px;} .div_bace#boyslove {border: 2px solid #990099; margin: 3px;} .div_bace#magazine {background-color: #FFFFB5; margin: 3px;} .div_bace#ranking {border: 2px solid #FF6699; margin: 3px;} .div_bace#imayomu_room {border: 2px solid #000000; margin: 3px;} .div_bace#search {border: 2px solid #000000; margin: 3px;} .footer {border: 2px solid #000000; margin: 3px;} .bottom_base {font-size:xx-small; /* 変更不可 */} .hr_color { color:#808080; /* 変更不可 */ width:100%; /* 変更不可 */ size:1px; /* 変更不可 */ } .smallest {font-size: xx-small;} .smallest#orange {color: #ffcc00;} .smallest#red {color: #ff0000;} .smallest#pink {color: #FF00FF;} .smallest#gray {color: #C0C0C0;} .smallest#blue {color: #3300CC;} .border { width :100%; height :90px; margin :5px; border-top: 2px solid #ff0066; border-bottom: 2px solid #ff0066; text-align: center; } .largest {font-size: medium;} .largestt#orange2 {color: #ffcc00;} .largest#red2 {color: #ff0000;} .largest#pink2 {color: #FF00FF;} .largest#gray2 {color: #C0C0C0;} .largest#blue2 {color: #3300CC;} </style> <!-- CSS ここまで--> </head>

    • ベストアンサー
    • HTML
  • monacaで使うcssの釦の色を変えたい

    現在monacaのiOSのアプリ作成の練習しています。掲載したようなボタンのCSSを並べてみました。 <a class="button--large" href="mentenance_index.html">テスト1</a> <a class="button--large" href="mentenance_index.html">テスト2</a> <a class="button--large" href="mentenance_index.html">テスト3</a> このときにこのボタンの色を変えたいと思うのですが、 "css/style.css" このファイルのbutton--largeクラスのどの部分を修正すれば色は変わりますでしょうか？ ちなみに、 .button--large { .....（中略）...... background-color: #1284ff; .....（中略）...... } この部分だと自分は思い、 background-color: #00008b;　　というダークブルーのような設定に変更してiphoneでデバッグしてみたのですが、色が変わってくれませんでした。 この button02--large クラスの内容も掲載させて頂きます。 どうぞ、ご教示の程よろしくお願い致します。 .button--large { text-align: center; position: relative; display: inline-block; vertical-align: top; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-background-clip: padding-box; background-clip: padding-box; padding: 0; margin: 0; font: inherit; color: inherit; background: transparent; border: none; font-family: 'Helvetica Neue', Helvetica, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 400; cursor: default; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; height: auto; text-decoration: none; padding: 4px 20px; font-size: 16px; line-height: 36px; letter-spacing: 0; color: #fff; text-shadow: 0 1px none; vertical-align: middle; background-color: #1284ff; -webkit-box-shadow: none; box-shadow: none; border: none; -webkit-border-radius: 4px; border-radius: 4px; -webkit-transition: background-color 0.2s linear, color 0.2s linear, opacity 0.2s linear; -moz-transition: background-color 0.2s linear, color 0.2s linear, opacity 0.2s linear; -o-transition: background-color 0.2s linear, color 0.2s linear, opacity 0.2s linear; transition: background-color 0.2s linear, color 0.2s linear, opacity 0.2s linear; font-weight: 400; font-size: 16px; font-weight: 500; line-height: 36px; padding: 4px 20px; display: block; width: 100%; } .button--large:active { background-color: #1284ff; -webkit-box-shadow: none; box-shadow: none; color: #fff; -webkit-transition: none; -moz-transition: none; -o-transition: none; transition: none; opacity: 0.6; -webkit-transition: none; -moz-transition: none; -o-transition: none; transition: none; } .button--large:disabled { opacity: 0.3; cursor: default; pointer-events: none; } .button--large:hover { -webkit-transition: none; -moz-transition: none; -o-transition: none; transition: none; } .button--large:focus { -webkit-box-shadow: none; box-shadow: none; outline: 0; }

    • ベストアンサー
    • CSS
  • HP全体を左寄せ配置するCSSの記述について。

    HP全体を左寄せ配置するCSSの記述について。 CSS付きで中央表示の無料テンプレートを頂きました。 これを左寄せ配置で表示させる方法を教えて下さい。 (base.css) @charset "Shift_JIS"; /* 基本設定 */ *{ margin:0px; padding:0px; font-size:12px; font-family:Verdana, Helvetica, sans-serif; } body{ color:#333; text-align:center; } br{ letter-spacing:normal; } a{ color:#333;text-decoration:none; } a:hover{ color:#fff;text-decoration:none; } img{ border:0px; } /* テンプレート */ #temp{ width:500px; 　text-align:center; 　line-height:18px; letter-spacing:1px; margin:10px auto; } #header{ background:#fff url(img/cat.gif) no-repeat 0px 0px; width:500px;height:120px; text-align:left; border:1px solid #333; } #menu{ background-color:#333; width:500px;height:24px; color:#fff; margin:10px 0px; border:1px solid #333; } #main{ background:#fff; width:480px; text-align:left; padding:10px; border:1px solid #333; } #footer{ background:#fff; width:500px;height:30px; color:#333; line-height:30px; margin:10px 0px; border:1px solid #333; } /* タイトル部分 */ #header h1{ padding:30px 0px 0px 190px; } /* メニュー部分 */ #menu ul{ list-style-type:none; height:24px; margin-left:30px; } #menu li{ display:inline; padding:0px } #menu a{ color:#fff; line-height:24px; float:left; text-decoration:none; padding:0px 5px; } #menu a:hover{ color:#DB9400; text-decoration:none; } /* メインコンテンツの見出し */ #main h2{ background:url("img/mark.gif") no-repeat; padding:1px 0px 3px 25px; color:#DB9400; よろしくお願いします。

    • ベストアンサー
    • HTML
  • HTML、CSSについて分からないことがあります

    下記の2パターンのコードを書きました。 一番目のコードのように、CSSファイルでdivの中に、text-decoration: noneと書いたのですが、うまく実行されませんでした。しかし2番目のCSSファイルのように、＜a＞で指定するとうまくできました。 質問ですが、 (1)<a>で区切らずに、<div>ではできないのでしょうか？ ーーーーーーーーーーーーーーーーーーCSS－－－－－－－－－－－－－－－－－ img { display: block; height: 100px; width: 300px; margin: auto; } p { text-align: center; font-family: Garamond, serif; font-size: 18px; } /*Start adding your CSS below!*/ div{ height: 50px; width: 120px; border-color: #6495ED; background-color: #BCD2EE; border-radius: 5px; margin:auto; text-align:center; text-decoration: none; color: red; } div { height: 20px; width: 200px; border-color:#6495ED; background-color: #BCD2EE; border-radius:5px; margin: auto; text-align:center; } a { text-decoration:none; font-family:Arial; display: block; } span{ color: red; } ーーーーーーーーーーーーーーーーーーCSS－－－－－－－－－－－－－－－－－ img { display: block; height: 100px; width: 300px; margin: auto; } p { text-align: center; font-family: Garamond, serif; font-size: 18px; } /*Start adding your CSS below!*/ div{ height: 50px; width: 120px; border-color: #6495ED; background-color: #BCD2EE; border-radius: 5px; margin:auto; text-align:center; text-decoration: none; color: red; } div { height: 20px; width: 200px; border-color:#6495ED; background-color: #BCD2EE; border-radius:5px; margin: auto; text-align:center; text-decoration:none; font-family:Arial; display: block; } span{ color: red; } ーーーーーーーーーーーーーーーーーーHTML－－－－－－－－－－－－－－－－ <!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="stylesheet.css"/> <title>About Me</title> </head> <body> <img src="http://s3.amazonaws.com/codecademy-blog/assets/46838757.png"/> <p>We're Codecademy! We're here to help you learn to code.</p><br/><br/> <div> <a href="https://facebook.com">Join us<span>Facebook<span> </a> </div> </body> </html>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する