- ベストアンサー
CSSでリボン型見出しを表示する方法
ORUKA1951の回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
No..4です。 ＞老眼鏡をかければいいだけじゃない？ ＞まとまった書籍でなければ、読めない・理解できない、というコトも ＞できれば、出版物としておすすめのものはないでしょうか？ あれば良いのですが・・・私も勉強は基本的に書籍派なのですが、悲しいことにこの世界、日々の変化が激しく、「出版されるころには過去の物になってしまうこと」。仕様書を見ればすべて書かれていることを、あえて書籍にすると言う事は「著者自身が無知か、不正確でも構わないとき」になってしまう。 私も、還暦はトウに過ぎましたし、多少下地があったのですがウェブは、はじめて15年少々です。本当に初期は本を見てましたが、結局は公開されている仕様書を一通り目を通して、全体を把握した後は、必要なときは必要な箇所を読み返しては深めていきました。 ネットも書籍も、ハウツー物は、ほとんど役に立たなかったです。 ウェブ開発には、safariじゃなく、Firefoxと開発者向けツール( https://addons.mozilla.jp/firefox/extensions/developer_tools/ )の組み合わせが良いです。他のブラウザは 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 )つかってもよい。
関連するQ&A
- Cssで
次のようなHTMLとCssを作成し、見出しを表示しようとしています。 1つ目の見出しと2つ目の見出しは全く違うものにしたいので、2つ目の見出しにはh2にクラス名を指定しています。 しかし2つ目の見出しは1つ目の見出しの属性を引き継いでいるようで、 border-left: 5px solid #0086b9;などは有効になり2つ目の見出しでも左側に線が表示されてしまいます。 1つ目のcssの情報を完全に消した後、2つ目の見出しを表示する方法をご教授下さい。 ▼HTML <h2>見出し２</h2> <h2 class="sample1">見出し２</h2> ■Css h2 { font-size: 145%; margin-top: 10px; margin-bottom: 10px; padding-left: 10px; border-left: 5px solid #0086b9; border-right: 1px solid #0086b9; border-top: 1px solid #0086b9; border-bottom: 1px solid #0086b9; line-height: 1.4; background-color:#F7F7EF; } h2.sample1{ border-right:solid 2px #808080; border-bottom:solid 2px #808080; background-color:#c0c0c0; padding-top:3px;padding-left:3px; width:300px; }
- 締切済み
- HTML
- CSS見出し 文字大きさ
CSSまったくの素人です。 こちらのサイトからコピペした https://jajaaan.co.jp/css/css-headline/ 上下線グラデーションの見出しの文字の大きさを変更したいのですが 方法がわかりません。 HTML <h3>CSS見出しデザイン</h3> CSS h3 { position: relative; padding: 1.5rem 2rem; color: #000000; text-shadow: 0px 15px 10px #ff8c04; -webkit-box-shadow: 0 2px 14px rgba(0, 0, 0, .1); box-shadow: 0 2px 14px rgba(0, 0, 0, .1); } h3:before, h3:after { position: absolute; left: 0; width: 100%; height: 4px; content: ''; background-image: -webkit-linear-gradient(315deg, #704308 0%, #ffce08 40%, #e1ce08 60%, #704308 100%); background-image: linear-gradient(135deg, #704308 0%, #ffce08 40%, #e1ce08 60%, #704308 100%); } h3:before { top: 0; } h3:after { bottom: 0; } font-size:をどこへ記載すれば良いのでしょうか？ よろしくお願いいたします。
- ベストアンサー
- CSS
- このHTMLとCSSをひとつにするのはどうすれば？
WordpressのAddQuickTagを使うために別れたままでは使うことができません＞＜ https://saruwakakun.com/html-css/reference/box ちなみに１９番のカギカッコを使いたいと思っています。 何卒よろしくお願いいたします！！ HTMLが・・・ <div class="box19"> <p>ここに文章</p> </div> CSSが・・・ .box19 { position: relative; padding:0.25em 1em; } .box19:before,.box19:after{ content:''; width: 20px; height: 30px; position: absolute; display: inline-block; } .box19:before{ border-left: solid 1px #5767bf; border-top: solid 1px #5767bf; top:0; left: 0; } .box19:after{ border-right: solid 1px #5767bf; border-bottom: solid 1px #5767bf; bottom:0; right: 0; } .box19 p { margin: 0; padding: 0; }
- 締切済み
- HTML
- CSSで設定した見出しが反映されない
Wordpressを使用しています。 CSSでクラス設定した見出しが、記事に反映されません。 この1時間かけて10個以上のサイトを見て回り、何度も何度も試しましたが、どうしても予め用意されているツールバーから選ぶ「見出し２」になってしまいます。 どのサイトも書いている事は同じですし間違えていないと思うのですが…。 ・CSSに下記タグを書いて保存 .midasi01{ background:#fff8dc; border-top:1px dotted #ccc; border-right:1px dotted #ccc; border-left:7px solid #ff7f50; border-bottom:1px dotted #ccc; padding:.8em .9em } ・wordpressで記事作成 「ビジュアル」ではなく「テキスト」を選び、下記タグを挿入。 <h2 class="midasi01">あいうえお</h2> 以上、宜しくお願い致します。
- 締切済み
- CSS
- CSSのボックスのブラウザごとの解釈の違いについて
見出し（h3）と内容をそれぞれ罫線で囲んだものをCSSで作るため、以下のCSSを作りました。 IEでもFirefoxでも思ったように表示されました。 見出しと内容部分のwidthとborderとpaddingを足した数値を同じにしたので、IEで見出しと内容部分の幅が同じに表示されるのはいいのですが、Firefoxでも幅が同じにに表示されるのはなぜでしょうか？widthだけの幅は違うので、見出し(h3）の方が2px狭く表示されると思ったのですが・・・ そもそもの考え方が間違っているのでしょうか。 ご教授のほど宜しくお願い致します。 h3 { font-size: 13px; padding: 3px 3px 3px 5px; border-top: 1px solid #009933; border-right: 1px solid #009933; border-left: 5px solid #009933; margin: 0px; width: 286px; } p { font-size: 11px; border: 1px solid #009933; margin: 0px; padding: 5px; width: 288px; line-height:130%; }
- 締切済み
- HTML
- CSSのdivのposition:relative;で位置がずれない
IE6を使用しています。 次のような 「sample.css」 .sample {height:90px; background-color:#00ff00; font-weight:bold; position:relative; top 40px; } .sample2 {color:#ff0000; position:absolute; top:10px; left:10px } .sample3 {color:#ff0000; position:absolute; top:30px; left:30px } 「a.html」 <html> <head> <link rel="stylesheet" href="sample.css" type="text/css"> </head> <body> <div class="sample"> position:relative <div class="sample2"> sample2 </div> <div class="sample3"> sample3 </div> </div> </body> </html> を実行した場合に、ブラウザのトップから40pxだけ下にclass="sample"にある内容を 表示させたいのですが、どうも下にずれてないようなのです・・・ 何が原因なのでしょうか？
- ベストアンサー
- HTML
- css3でボタンの中にアイコンを表示するには？
css3でリンクボタンのデザインを作っています。 グラデーションや角の丸め、影の付け方はわかりました。 しかしボタンの中にアイコンを入れる方法がネットを探しても全く見つかりません。 アイコン画像を用意して、どのようにしてボタンの中に表示させればよいのでしょうか？ （画像の赤い矢印で示した部分です） 作っているcssは以下のような感じです。 a{ border-top: 1px solid #57b4ff; border-left: 1px solid #57b4ff; border-right: 1px solid #0d78ff; border-bottom: 1px solid #0d78ff; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 1px 1px 2px #a2c1dc; -moz-box-shadow: 1px 1px 2px #a2c1dc; background: -moz-linear-gradient(top, #fff, #ccc); background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ccc)); } よろしくお願い致します。
- ベストアンサー
- CSS
- css
こんにちは、CSSの勉強をしています。 書籍に下記のようなCSSが書かれてありました。 .photoBoxL .photoSpace, .photoBoxR .photoSpace{ position: relative; left: 0px; top: 0px; border-left: solid 1px #999999; border-bottom: solid 1px #999999; background-color:#FFFFFF; padding: 5px; } これはどのように読めばいいのでしょうか？ 「.photoBoxLというクラスの中にある.photoSpace」と、「.photoBoxRというクラスの中にある.photoSpace」の二つに対して設定するという意味なのでしょうか？ 何かお分かりの方がいましたら教えてください。 よろしくお願いします。
- ベストアンサー
- その他(業務ソフトウェア)
- CSS検証サービス
ヘッダーと本体の部分のCSSをこの前教えてもらった CSS検証サービスにかけたらエラーが返ってきました。 div { position : relative ; color : white ; } #header {position : fixed ; top : 0px ; left : 0px ; overflow : auto ; width : 100% ; height : 8% ; z-index : 2 ; border-bottom : 1px red solid } #navi{ position : absolute ; left : 50 px ; top : 10 % ; height : 88% ; overflow-x : hidden ; overflow-y : auto ; z-index : 1 ; } #headerではエラーで出ず、#naviのtopとleftで構文的におかしいと出ます。 やっぱりおかしいですか？ちなみにブラウザ上は想定した通りに行っています。
- ベストアンサー
- CSS
- css position:fixed でヘッダとフッタを固定したい
画像のようなページを作りたいと思っています。 使用するのはテキストエディタで、htmlとcssのみです。 cssで、 #header{ background-color: #cc99ff; position:fixed; top : 0; left : 0; width:100%; height:55px; z-index:3; } #inner {background-color: #cc9900; margin: 0em 3em 3em 3em; padding: 1em; width:90%; height:90%; z-index:1; border-top:solid 2px #004427; border-bottom:solid 2px #004427;} のように書いても、IE、firefoxともに固定が無視されます。 これ以外にも、少々書き方を変えたり色々してみたのですが、固定はされても位置が崩れる（ほとんどが、ヘッダが下がって来ます。）等、上手く行きません。 原因も分からず、解決策が見つかりません。 良い方法等、お教え下さい。 よろしくお願い致します。
- ベストアンサー
- HTML
お礼
どうもありがとうございました。 当初は、友人と一緒にサイトを作ろうと思い、質問させていただいただけなのですが、簡単そうには行きませんね・・・ とりあえず、入門書を読み、最新の知識を身につけて行きたいと思います。 どうもありがとうございました。