ドットインストールのCSS3入門で文字色を黄色にする方法
- ドットインストールのCSS3入門のレッスン１５で、文字色を黄色にする方法が分かりません。
- テキストエディタでコードをコピペしたのですが、リンクの文字色が黄色になりません。
- HTMLのa要素にcolorプロパティを設定することで文字色を変えることができるはずです。
- ベストアンサー
プログラミング
ドットインストールのCSS3入門のレッスン１５の動画の１分ほどの文字色を黄色にする事が出来ません。 自分のテキストエディタのコピペです。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>CSS3の勉強</title> <style> a{href="http://dotinstall.com"} { color: yellow; } </style> </head> <body> <h1>リンク集</h1> <ul> <li><a href="http://dotinstall.com">dotinstall.com</a></li> <li><a href="http://google.com">Google</a></li> <li><a href="http://yahoo.co.jp">Yahoo!</a></li> <li><a href="mailto:taguchi@dotinstall.com">mail me!</a></li> </ul> </body> </html> 何かおかしな点があればご指摘お願いします。
- torotoro1110
- お礼率100% (1/1)
- HTML
- 回答数1
- ありがとう数8
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
a[href="http://dotinstall.com"] { color: yellow; } 属性に対して指定をする場合は{}じゃなくて[]です。 http://weboook.blog22.fc2.com/blog-entry-268.html ここの17ですね。
関連するQ&A
- HTMLのulタグで表示される「・」を消したい
ネットで調べて下記二通りを試しましたが消せませんでした。 １．HTMLで<ul class="doterase">とし、CSSで .doterase li { list-style: none; } とした。HTMLでClass="doterase"としているのにCSSで.doteraseと先頭に「.」を追加した理由は 判りません。 ２．HTMLでulタグに <ul style="list-style: none;">としても同じでした。 HTML,CSSのコードは下記のとおりです。 HTML <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>日本の将来る</title> <meta name="discriptio" content="八十路の提言"> <link rel="stylesheet" href="homestyle.css"> </head> <body> <h1><center>日本の将来</center></h1> <h2><center>八十路の提言</center></h2> </body> <ul > <li> <a href="https://google.co.jp">aaaa</a> </li> <li> <a href="https://google.co.jp">bbbb</a> </li> <li> <a href="https://google.co.jp">cccc</a> </li> </ul> <div style="border: 3px none;"> 枠線を実線で装飾１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１ </div> </html> CSS @charset "UTF-8" ; body { background-color : #adcc33; font-size: 40px; width: 200; height:200; position: relative; /* 日本の将来に期待する */ top: 10px; /* 上から10px */ p { font-size: 40px; } <style> .doterase li { list-style: none; } </style> <ul class="doterase"> <li>aaa</li> <li>bbb</li> <li>ccc</li> </ul> li { color: #000000; font-size:30px } 参考書を理解しないままコピペでつくっています。HTML/CSSは最近始めたばかりなので超初心者です。よろしくお願いいたします。Windows11なのでHTML,CSS.共最新バージョンだと思います。 なお、これと同じ内容で他のQ&Aサイトに投稿しましたが質問の仕方が拙かったようで内容の訂正でなく取り消し後再質問したら回答がなくなったためこちらに質問しています。
- ベストアンサー
- HTML
- 「横並び」にする方法→HTML&CSS
HTMLでは、 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>KUJIRA cafeへようこそ</title> <link rel="stylesheet" type="text/css "href="css/style.css"> </head> <body> <div class="wrapper"> <!-- ヘッダー --> <h1 id="logo"><a href="index.html"><img src="images/logo1.png"width="400"height="200"alt="KUJIRA cafe"</a></h1> <ul id="nav"> <li><a href="index.html">ホーム</a></li> <li><a href="about.html">店舗案内</a></li> <li><a href="access.html">アクセス</a></li> <li><a href="menu.html">メニュー</a></li> <li><a href="contact.html">お問い合わせ</a></li> </ul> CSSでは #nav li { display:inline; list-style-type: none; padding-right: 30px; } と書きましたが「横並び」になりません。何が間違っているのでしょうか？ 非常に困っております。 回答よろしくお願いします。
- ベストアンサー
- HTML
- <ul>から</ul>の間をjavascriptで
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head> <body> <div id="images"> <ul> <li style="width: 354px"><a href="javascript:;">ああ</a></li> <li style="width: 354px"><a href="javascript:;">いい</a></li> <li style="width: 354px"><a href="javascript:;">うう</a></li> <li style="width: 354px"><a href="javascript:;">ええ</a></li> </ul> </div> </body> </html> の<ul>から</ul>の間の<li></li>を1個にしたり5個にしたり、<ul>から</ul>を無くしたり javascriptで動的に変更するスプリクトが知りたいです。
- ベストアンサー
- JavaScript
- Operaのバージョン９でa:hover { text-decoration: underline; }が動作しない
Operaのバージョン９で以下のCSSが正常に動作しません。 症状：リンクにマウスオーバーしても下線が表示されない。 使用OS：Windows XP SP2 <html> <head> <style type="text/css"> a { text-decoration: none; } a:hover { text-decoration: underline; } </style> </head> <body> <ul> <li><a href="#">sample</a></li> <li><a href="#">sample</a></li> <li><a href="#">sample</a></li> </ul> </body> </html> この問題を解決するにはどうすればよいのでしょうか？ ご存知の方がおられましたらご回答をよろしくお願いします。
- 締切済み
- HTML
- float+IE8で形が崩れます。
float+IE8で形が崩れます。 Webクリエイターの模試をやっていたら以下のHTML <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" type="text/css" href="base.css"> <title>模擬</title> </head> <body> <div class="menu"> <h1>番号</h1> <ul> <li>トップ</li> <li><a href="spring.html">１</a></li> <li><a href="summer.html">２</a></li> <li><a href="autumn.html">３</a></li> <li><a href="winter.html">４</a></li> </ul> </div> <div class="season"> <p>ああああああああああああああああああああああああああああああああああああああああああああ</p> </div> </body> </html> を以下のcssと関連付けるものがあったのですが、 @charset "Shift_JIS"; body{ border:solid 1px #993366; width:800px; } h1{ color:#ffffff; background-color:#993366; font-size:140%; } h2 { font-size:120%; } ul{ line-height:200%; list-style:square; } .menu{ border-right:solid 1px #993366; width:150px; float:left } .season{ padding:10px; width:620px; } IE8で見るとまったく形が崩れてしまいます。 何故でしょうか？ これをIE6などで見るときちんとした形になると思うのですが、同じように表示するにはどうしたらよいのでしょうか？ なかなかうまくいきません。 よろしくお願いいたします。
- ベストアンサー
- HTML
- リストのCSSでのflort時の背景
ulに幅と背景色を設定しているのですが、リストを横に並べるために、floatさせると希望の表示になりません。リストを横に並べて、かつ、ulで指定している幅と背景色にしたいのですが、どのようにすればよいでしょうか？ <html lang="ja"> <head> <style type="text/css"> ul#menu {background-color: red;width: 1024px;} ul#menu li {float: left; width: 100px;} </style> <ul id="menu"> <li><a href="#">メニュー1</a></li> <li><a href="#">メニュー2</a></li> <li><a href="#">メニュー3</a></li> <li><a href="#">メニュー4</a></li> <li><a href="#">メニュー5</a></li> <li><a href="#">メニュー6</a></li> </ul> </body> </html>
- ベストアンサー
- HTML
- css リストを右揃えにできません。。。
非常にシンプルなことができず、頭を抱えています。 縦に並んだリストを、右揃えにしたいです。 ulに便宜的にborderをつけていますので、 そのボックスの右にピッタリ並べたいのですが … text-align、margin 二通りの指定で試したものの 左揃えになってしまいます（Mac safari firefox）。 なんで～～？？ どなたかドウゾ助けてください。よろしくお願いします。 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style><!-- *{ margin:0; padding:0; } ul.align { list-style:none; text-aling:rignt; width:200px; border:1px solid #000;} ul#margin li { list-style:none; margin-left:auto; margin-right:auto;} --></style> </head> <body> <ul class="align"> <li><a href="" title="">AA</a></li> <li><a href="" title="">BBBBB</a></li> <li><a href="" title="">CCC</a></li> <li><a href="" title="">DDDD</a></li> </ul> <ul class="align"> <li>AA</li> <li>BBBBB</li> <li>CCC</li> <li>DDDD</li> </ul> <ul id="margin"> <li><a href="" title="">AA</a></li> <li><a href="" title="">BBBBB</a></li> <li><a href="" title="">CCC</a></li> <li><a href="" title="">DDDD</a></li> </ul> </body> </html>
- ベストアンサー
- HTML
- ulインラインブロックの文字数オーバーの非表示
<html> <body> <head> <style> li { float: left; width: 100px; font-size: 13px; text-align: center; padding: 4px; background: #ccc; margin-right: 10px; margin-bottom: 10px; border-radius: 4px; text-shadow: 0 1px 0 #fff; } </style> </head> <ul> <li><A href="http://www.google.co.jp" TARGET="_blank">グーグルへリンク</A></li> <li><A href="http://www.google.co.jp" TARGET="_blank">グーグルへリンク</A></li> <li><A href="http://www.google.co.jp" TARGET="_blank">グーグルへリンク</A></li> <li><A href="http://www.google.co.jp" TARGET="_blank">グーグルへリンクグーグルへリンクグーグルへリンク</A></li> <li><A href="http://www.google.co.jp" TARGET="_blank">グーグルへリンク</A></li> </ul> </body> </html> ULブロック要素をスタイルシートでインラインブロック要素にして、 横に並べたて表示しているのですが、表のように表示した時に、 そのliの一つ一つのブロックから文字がはみ出すことがあります。 overflow:hidden;を設定しても文字数の数だけ、liブロックを拡大して表示されてしまうのですが、 どのように表記すれば、うまくいくでしょうか？よろしくお願いします。
- 締切済み
- CSS
- リスト項目でのメニュー作成
リスト項目を使いcssでメニューを作成しているのですが、下記のような記述でメニュー1の部分だけ違う色を指定したい場合、どのように記述すればよいのでしょうか？ <html lang="ja"> <head> <style type="text/css"> ul#menu li { list-style-type: none; float: left; padding: 0px; line-height: 22px;font-size:14px;width: 110px; margin-left: 2px;} ul#menu li a { text-decoration: none; display: block; / padding: 5px; color: #black; background-color: #8BCFDE } ul#menu li a:hover { background-color: #ff9999; color: #black; } </style> </head> <body> <ul id="menu"> <li><a href="#/">メニュー1</a></li> <li><a href="#/">メニュー2</a></li> <li><a href="#/">メニュー3</a></li> <li><a href="#/">メニュー4</a></li> <li><a href="#/">メニュー5</a></li> <li><a href="#/">メニュー6</a></li> </ul> </body> </html>
- ベストアンサー
- HTML
- この２つのソースを50ページに配置したいのですが？
（1）head内 ----------- <link href="css/navi.css " rel="stylesheet" type="text/css"> ---------- （2）body内 ----------- <div class="nv"> <ul> <li><a href="purchase.shtml">1</a></li> <li><a href="torihiki.shtml">2</a></li> </ul></div> ------------ この（1）（2）のソースを50枚のページに入力したいのですが、少しでも速い方法ないでしょうか？
- 締切済み
- その他([技術者向] コンピューター)
お礼
何度も確認しましたが気付けませんでしたorz とても助かりました！便利なサイトまでありがとうございます。