私は9年前に、初めてhttps://www.amazon.co.jp/%E3%81%93%E3%82%8C%E4%B …でHTMLのを学び、ホームページ作ってきました。
 今度絵は
「スタイルシートとCSS」を勉強しようと思います。
 そこで、おすすめのCSSの著書がありましたら教えていただけないでしょうか?
Amazonで以下を見ましたがたくさんあり迷っています。
 よろしくお願いします。
https://www.amazon.co.jp/s/ref=nb_sb_noss?__mk_j …

このQ&Aに関連する最新のQ&A

A 回答 (1件)

本屋さんで見たほうが良いですよ。


色々揃っています。Amazonじゃ、パラパラっと、中身、確認出来ない。
    • good
    • 1
この回答へのお礼

ご回答くださいましてありがとうございました。
 了解です。
本屋さんでこの前見よさそうな本がありましたが、種類を忘れました。

お礼日時:2017/04/16 18:59

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aと関連する良く見られている質問

QHTTPSのとき":"が"%3A"ではなく"%253A"とエンコードされるのは?

URLエンコードについて教えていただきたいことがあります。

<a href=http://hoge.com/hoge?http%3A%2F%2Fhuga.com>hoge</a>
というリンクは、当然
http://hoge.com/hoge?http%3A%2F%2Fhuga.com
というURLに対して張られますよね?

しかし、プロトコルがHTTPSの場合、
https://hoge.com/hoge?http%253A%252F%252Fhuga.com
というように、":"や"/"のエンコードされた値に"25"が付加されたURLにリンクが張られてしまうようなのです。

これはなぜなのでしょうか?

ご存じの方、教えていただけると幸いです。

Aベストアンサー

%25 は % と言う文字のURLエンコード表現です。
どこで再変換しているのかまでは解らないけど、2重にURLエンコードされているようです。

そのリンク用文字列は、cgiなどからのページ出力時にそうなっていると言うことでしょうか?
であれば、cgiの問題でしょうし、

静的ページ(html)のリンク用文字列にも変換が掛かるのはちょっと考えられないけど。

また、ブラウザのurl欄に直接入力しても、変換されてしまうということではないですよね。
もし、そうならサーバーの設定あたりを見直してみては?

QIE9でa:hoverが効かない

IE9でa:hoverが効かなくて困っています。
droppy.jsというJavaScriptを使ってドロップメニューにしているのが原因でしょうか?
以下ソースです。
html

<div id="navi">
<div class="inner">
<ul>
<li><a href="サイトトップのURL">トップ</a></li><!-- ←ここのa:hoverは正常に動作する -->
<li>
<a href="メニュー1のURL">メニュー1</a><!-- ←ここのa:hoverは正常に動作する -->
<ul>
<li><a href="メニュー1-1のURL">メニュー1-1</a></li><!-- ←ここのa:hoverが効かない -->
<li><a href="メニュー1-2のURL">メニュー1-2</a></li><!-- ←ここのa:hoverが効かない -->
</ul>
</li>
</ul>
</div>
</div>

css

#navi {
background: url(naviの背景画像のURL) repeat-x left top #000000;
border-bottom: 1px solid #000000;
-moz-box-shadow: 0 0 3px #484848;/* Firefox用 */
-webkit-box-shadow: 0 0 3px #484848;/* Safari,Google Chrome用 */
box-shadow: 0px 0px 3px rgba(0,0,0,0.5);
}
#navi .inner {
margin: 0 auto;
width: 940px;
}
#navi .inner ul li {
float: left;
margin: 15px 0;
padding: 0 10px;
position: relative;
}
#navi .inner ul li a {
padding: 5px 11px;
color: #ffffff;
text-decoration: none;
}
#navi .inner ul li a:hover {
border: 1px solid #ffffff;
padding: 5px 10px;
color: #333333;
background: #ffffff;
background:linear-gradient(#eaeeee, #e2e3e3);
background: -moz-linear-gradient(top, #eaeeee, #e2e3e3);/* Firefox用 */
background: -webkit-gradient(linear, left top, left bottom, from(#eaeeee), to(#e2e3e3));/* Safari,Google Chrome用 */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startcolorstr=#eaeeee, endcolorstr=#e2e3e3);/* IE6,7 */
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startcolorstr=#eaeeee, endcolorstr=#e2e3e3)";/* IE8 */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px;
behavior: url(/PIE.htc);
}

#navi .inner ul li ul {
position: absolute;
top: 39px;
left: 0;
zoom: 1;
display: none;
background: #dae4d7;
border: 1px solid #8db0a0;
border-top: none;
border-bottom: none;
font-size: 85%;
width: 150px;
}
#navi .inner ul li ul li {
float: none;
padding: 0;
margin: 0;
background: none;
}
#navi .inner ul li ul li:hover {
background: none;
}
#navi .inner ul li ul li a {
color: #2d595f;
text-align: left;
display: block;
background: url(icon画像のURL) no-repeat 5px center;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #8db0a0;
padding: 5px 5px 5px 20px;
}
#navi .inner ul li ul li a:hover {
background: url(hoer用icon画像のURL) no-repeat 5px center #2d595f;
color: #ffffff;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
border-top: 1px solid #2d595f;
border-bottom: 1px solid #2d595f;
border-left: none;
border-right: none;
padding: 5px 5px 5px 20px;
margin: 0;
}

どこがおかしいのかわからないのでnaviv部分全体を載せます。
宜しくお願いします。

IE9でa:hoverが効かなくて困っています。
droppy.jsというJavaScriptを使ってドロップメニューにしているのが原因でしょうか?
以下ソースです。
html

<div id="navi">
<div class="inner">
<ul>
<li><a href="サイトトップのURL">トップ</a></li><!-- ←ここのa:hoverは正常に動作する -->
<li>
<a href="メニュー1のURL">メニュー1</a><!-- ←ここのa:hoverは正常に動作する -->
<ul>
<li><a href="メニュー1-1のURL">メニュー1-1</a></li><!-- ←ここのa:hoverが効...続きを読む

Aベストアンサー

親要素のliにもhoverが効いてますね。
a要素をdisplayblockにして、
スタイルを統合したほうがいいのかもしれません。

Qテーブルの高さを100%にしたけど表示では100%になっていない

<table width="600" height="100%" border="0" cellpadding="0" cellspacing="0">~</table>

と記述しているのですけど、高さが100%になりません。
どのようにすれば高さが100%になってくれるのでしょうか?

Aベストアンサー

僕のサイトで同じようにテーブル高さ100%にして、上から下までいっぱいに敷きつめられています。

ソースの一番上(<html>の上)に次のソースを入れるとできるかもしれません。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Q%(パーセント)での3カラム構成・・・飛び出ます。

現在、画面いっぱいに表示させる為のページを%で指定してcssにて作っております。

とても単純な様に安易に考えていたのですが旨く表示できません。

まず、左、中央、右のボックスを作りました。指定した幅は、25%、50%、25%となっていますが、一番右のボックスだけが飛び出してしまいます!!

初めて%で作ったのですが、100%になっては駄目なのでしょうか??

出来れば中央のボックス左右に少しだけマージンが欲しいですが、全てフロートがかかっているため、均等に余白も作れません。(真ん中がどちらかに寄ります。)

%で作るときの基本などがあればアドバイスいただけたらと思います。

どうぞ、宜しくお願いいたします。

Aベストアンサー

25%、50%、25%ってwidthの値ですよね。
widthは内容の幅ですからmarginやpaddingの分だけ全体が広がってしまうと思います。
__________________________________
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>copy</TITLE>
<style type="text/css">
#left,#rigth{width:25%;border:solid 1px;}
#left{float:left;}
#rigth{float:right;}
#center{margin-left:25%;margin-right:25%;border:solid 1px;padding:15px;}
</style>
</HEAD>
<BODY>
<div id="left">左</div>
<div id="rigth">右</div>
<div id="center">中</div>
</BODY>
<HTML>
真中の幅を指定せずに両脇の余白を左右のボックス幅にして真中に回り込ませたら如何でしょうか。

25%、50%、25%ってwidthの値ですよね。
widthは内容の幅ですからmarginやpaddingの分だけ全体が広がってしまうと思います。
__________________________________
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>copy</TITLE>
<style type="text/css">
#left,#rigth{width:25%;border:solid 1px;}
#left{float:left;}
#rigth{float:right;}
#center{margin-left:25%;margin-right:...続きを読む

Qwidth 100% で縦に3段のレイアウト

上から top, middle, bottom の3つの段があって、
横に100%伸びるものを作ろうとしてます。

middle の中には width=700 で center 寄せの middle_inside があり、
さらにその中に section1 と section2 があります。

ややこしくて申し訳ないのですが、以下のようなコードでして
グレーと黄色の背景を うまく表示させる方法ありますでしょうか?

IE6 では希望通りに表示されるのですが
Firefox 2.0 では背景が真っ白になってしまいます。

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<title>[ css ]</title>
<style type="text/css">
<!--
* {
margin: 0; padding: 0; font-family: "Times New Roman", Times, serif; font-size: 24px;
}
#top {
height: 100px; margin: 0 auto; background: blue;
}
#middle {
margin: 0 auto; background: yellow;
}
#middle_inside {
width: 700px; margin: 0 auto; background: gray;
}
#bottom {
height: 100px; margin: 0 auto; background: red; clear: both;
}
#section01 {
float: left; background: green; width: 300px;
}
#section02 {
float: left; background: brown; width: 300px;
}
-->
</style>
</head>

<body>

<div id="top">top</div>

<div id="middle">
<div id="middle_inside">
middle_inside

<div id="section01">
section01<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>

<div id="section02">
section02<br><br><br><br><br><br><br><br><br><br><br><br>
</div>

</div><!-- #middle_inside -->
</div><!-- #middle -->

<div id="bottom">bottom</div>

</body></html>

上から top, middle, bottom の3つの段があって、
横に100%伸びるものを作ろうとしてます。

middle の中には width=700 で center 寄せの middle_inside があり、
さらにその中に section1 と section2 があります。

ややこしくて申し訳ないのですが、以下のようなコードでして
グレーと黄色の背景を うまく表示させる方法ありますでしょうか?

IE6 では希望通りに表示されるのですが
Firefox 2.0 では背景が真っ白になってしまいます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans...続きを読む

Aベストアンサー

floatしているので高さが決まらないのでは?
以下のようにして、floatをクリアしてあげてください

<div id="section02">
section02<br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<div style="clear:both"></div>


このQ&Aを見た人がよく見るQ&A

このカテゴリの人気Q&Aランキング

おすすめ情報