見出しー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　を使用しております。


　何が問題なのか、もしくは、解決策をご教示いただければ、幸いです。

No.4 ベストアンサー 回答者： ORUKA1951 回答日時： 2013/10/04 09:34

h6.{

h6はタイプセレクタで適用文書がHTMLの場合、HTMLの要素名に該当します。
.はクラスセレクタです。続くclass属性の値のリストの値が書かれていません。
　適用するHTML文書内のh6要素(Element)のうち、class属性の半角スペースで区切られた値リストにその値が含まれているもの(h6要素)
　属性セレクタ [class~="[リスト値]"]と全く同値です。

　 sample2
{}(宣言ブロック)内には、[プロパティ名]:(コロン)[値]を;(セミコロン)で区切って書きます。
line-height: 1;
単位はつけるべきです。

.sample2:after, sample2:before {
CSS2.1ですと、基点となるセレクタを書くべきです。*である場合は省略できますが、それでも書いておいたほうがよい。*はCSS1との互換性確保のためにCSS2から追加された全称セレクタと呼ばれる一種の「タイプセレクタ」ですが、詳細度は0です。

<h6 class="sample2">メニュー４</h6>
　文書構造上意味のないclass名をつけるべきではありません。サンプルサイトは説明で必要なので書いていますが、自分のHTMLに使用する場合は、
『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』
　です。そうしないと、数年後に見直そうとした時に意味不明になっちゃいます。

　以上が詳しい説明です。

　それぞれの単語は分かっていることとして説明してあります。なぜなら、それぞれの用語が理解できないうちは、まだあなたには早すぎると言う事です。
No.2で示した(4～6)ものに加えて
1 CSS 2.1仕様について( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
2 CSS 2.1の手引き( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
3 適合性: 必要条件と推奨事項( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
　を読まれると、理解できるようになります。楽しみに励んでください。
　もちろん、HTMLの仕様書も・・

　私も、そして、みんな通ってきた道です。!!!!王道なんてありません。コツコツと基本に忠実に学んでいくのが結果的に最短な道です。
　頑張ってください。

この回答へのお礼

　回答どうもあrがとうございました。

　一応、解決はしました。

　すみません。いろんな参考サイトを挙げておられ、実際勉強になったのも事実なのですが、できれば、出版物としておすすめのものはないでしょうか？

　老眼鏡をかければいいだけじゃない？

　と思われるかもしれませんが、

　どうしてもまとまった書籍でなければ、読めない・理解できない、というコトもありまして（ここら辺はウェブ世代の方を羨ましく思っています）。

　もちろん、できれば、で結構であります。

お礼日時：2013/10/06 01:47

No.5 回答者： ORUKA1951 回答日時： 2013/10/06 08:25

No..4です。

＞老眼鏡をかければいいだけじゃない？
＞まとまった書籍でなければ、読めない・理解できない、というコトも
＞できれば、出版物としておすすめのものはないでしょうか？
　あれば良いのですが・・・私も勉強は基本的に書籍派なのですが、悲しいことにこの世界、日々の変化が激しく、「出版されるころには過去の物になってしまうこと」。仕様書を見ればすべて書かれていることを、あえて書籍にすると言う事は「著者自身が無知か、不正確でも構わないとき」になってしまう。
　私も、還暦はトウに過ぎましたし、多少下地があったのですがウェブは、はじめて15年少々です。本当に初期は本を見てましたが、結局は公開されている仕様書を一通り目を通して、全体を把握した後は、必要なときは必要な箇所を読み返しては深めていきました。
　ネットも書籍も、ハウツー物は、ほとんど役に立たなかったです。

　ウェブ開発には、safariじゃなく、Firefoxと開発者向けツール( https://addons.mozilla.jp/firefox/extensions/dev … )の組み合わせが良いです。他のブラウザは Open With( https://addons.mozilla.jp/firefox/details/11097 )とか FireMobileSimulator( https://addons.mozilla.jp/firefox/details/8519 )

　なお、各種仕様書をブックマークに整理して入れておいて必要なとき見れるようにしておけば良いでしょう。文字が小さければ、Ctrl+＋で拡大すれば良いです。 Default FullZoom Level( https://addons.mozilla.jp/firefox/details/6965 )つかってもよい。

この回答へのお礼

　どうもありがとうございました。

　当初は、友人と一緒にサイトを作ろうと思い、質問させていただいただけなのですが、簡単そうには行きませんね・・・

　とりあえず、入門書を読み、最新の知識を身につけて行きたいと思います。

　どうもありがとうございました。

お礼日時：2013/10/07 22:17

No.3 回答者： DrFell 回答日時： 2013/10/04 05:27

コピー＆ペーストを間違っていると思います。

それともnyan_nyanko さんでわけもわからずカスタマイズしようとしました？


しょっぱなのh6.これはどこにも適用がありません。「h6ドット」というタグはないですからね～。
2行目のsample2 これは、、、何がしたいのかブラウザはおろか私たちにも理解できません。
……

という具合に、コピー＆ペーストを間違っているか、カスタマイズしようとしたことに問題があります。まずは、ｃｓｓの基本を学ばれてからトライされてはいかがでしょうか？ｃｓｓはセレクタ｛プロパティ：値｝これだけ理解すればすべてですので、基礎知識をまず学ばれるのが近道かと思います。

この回答へのお礼

　回答、どうもありがとうございました。

　カッコが抜けていたのが、原因だったようです（回答１のお礼欄のコードから）。

　これで解決できました。

お礼日時：2013/10/06 01:41

No.2 回答者： ORUKA1951 回答日時： 2013/10/03 11:51

そんなツールを使う前に身につけておかない基礎知識が欠如している。

セレクタの書き方
　CSS2移行、基点となる(タイプ)セレクタに続いてセレクタを書くことになっています。
.class2　はCSS1との互換性確保のためで、本来はh6.class2とか書かなければなりませんが、*という全称セレクタも使えます。そして*は省略できるので
.calss は、*classと解釈します。全称セレクタは詳細度は0000です。

4 構文と基本データ型( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
5 セレクタ( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
6 プロパティ値とカスケーディング、継承の割り当て( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )

この回答へのお礼

回答どうもありがとうございました。

calss、*classなどの詳細、とても勉強になりました。

できましたならば、もう少し、ヒントをあたえてもらえないでしょうか？

もちろん、回答するかしないかは、ご自由ですので、お暇な時にでも結構でございますし、無視してくださってもかまいません。

お礼日時：2013/10/04 03:08

No.1 回答者： play_with_you 回答日時： 2013/10/03 11:05

本当にそれは自動生成したコードですか？

＞h6.{
＞sample2
こんな訳の分からんものが本当に出ているなら、バグなのでそのサイトに報告してあげてください。

上記2行がなぜ駄目なのかはCSSの基礎なので自分で理解してほしいから詳しくは言いません(場所は教えたんだから自力で調べてください)が、
・セレクタは「タグ」「.から始まるclass」「#から始まるid」のみ
・プロパティは必ず「属性　：　値」という書き方
ということです。

この回答へのお礼

回答ありがとうございます。

<h6 class="sample2">メニュー４</h6>

class="sample2"と定義しているので、sample2の前に”.”を記述する必要があるのは分かりました。

つまり、HTMLコードはそのままでいいとして、CSSコードは、ピリオドを付け、以下のようにする費用がると。

ですが、結果は同じく、見出し自体は表示されませんでした。

また、プロパティの記入方法に間違いはないと思うのですが・・・

何か他に理由があるのでしょうか？


.sample2
position: relative;
＜中略＞
}

.sample2:after, sample2:before {
content: "";
＜中略＞
}
.sample2:after {
left: 0;
＜中略＞
}
.sample2:before {
right: 0;
＜中略＞
}

お礼日時：2013/10/04 03:03