Windows XP あるいは8
HTML 4.01
コピー ~ TOP.html copyTOP.css
あああああ と いいいいいの間隔はあいているのに
いいいいい と うううううの間隔はなぜか詰ってしまっています。
間隔を空けるにはどうしたらいいでしょうか?
コードは以下の通りです。
[ HTML 側 ]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/Transitional.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" Content="text/html;charset=Shift_JIS">
<META HTTP-EQUIV="CONTENT-STYLE-TYPE" CONTENT="~">
<title>aaaaaaaaaa</title>
<link rel="stylesheet" href="copyTOP.css" type="text/css">
</head>
<body>
<div id="zentai">
<div id="part">
<p class="title">あああああ</p>
<div id="partnerwaku">
<div id="partnerimage">
<a href="" alt="のロゴ" class=""></a>
<a href="" alt="のロゴ" class=""></a>
<a href=""><img src=".gif" alt="のロゴ" class=""></a>
<a href=""><img src=".jpg" alt="のロゴ" class="A"></a>
<a href=""><img src=".jpg" alt="のロゴ" class=""></a>
</div>
</div>
</div>
<div id="PR">
<PR>
<br>
<div id="PRsection">
<br>
<a href="">
<img src="" alt="" class="PRimage01"></a>
</div>
</div>
<div id="PR2">
<br>
<PR>
<br>
<div id="PRsection2">
<br>
<a href="">
<img src="" alt="" class="PRimage02"></a>
</div>
</div>
<div id="columnwaku">
<div id="columnbun">
<p class="title">いいいいい</p>
<div id="columncontents">
<p><a href=""><img src =".jpg" class="columnarticle01"></a></p>
</div>
</div>
</div>
<br>
<br>
<br>
<br>
<div id="PR3">
<br>
<PR>
<br>
<div id="PRsection3">
<br>
<a href=""><img src="" alt="" class="PRimage03"></a>
</div>
</div>
<br>
<br>
<br>
<br>
<br>
<div id="questionnairesection">
<div id="questionnaire">
<p class="title">ううううう</p>
<div id="questionnairecontents">えええええ</div>
</div>
</div>
<div id="PR4">
<br>
<ddd>
<br>
<div id="PRsection4">
<br>
<a href="">
<img src="" alt="" class="PRimage04"></a>
</div>
</div>
<div id="pagetop">
<br>
<br>
<a href="#logoimage">ページの先頭へ▲</a>
</div>
<hr class="beforefooter">
<div id="aboutus">
<div id="aboutussection">
<p class="aboutustitle">管理会社</p>
<p><a href="Aboutus.html"><img src ="Aboutus.jpg" class="aboutusimage"></a></p>
</div>
</div>
<br>
<br>
<hr class="beforefooter">
</div> <!--全体のdiv-->
</body>
</html>
[ css側]
@charset "Shift_Jis";
body {
overflow-y:auto
overflow-x:auto
text-align:center;
cursor:url("images/.png");
}
#allitem{
cursor:url("images/.png");
}
#zentai{
width:1000px;
margin-left:auto;
margin-right:auto;
}
.title{
margin-top:0px;
margin-bottom:0px;
font-size : 20px;
border-style:solid;
width:592px;
background-color:#FFFF99;
padding:3px;
}
#part{
clear:left;
float:left;
height:180px;
width:642px;
padding-right:147px;
font-size : 20px;
}
#partnerwaku{
height:140px;
width:600px;
border-style:solid;
border-color: #000099;
}
#PR{
float:left;
width:180px;
height:120px;
}
#PRsection{
border-style:solid;
border-color: #000099;
}
#PR2{
float:left;
width:185px;
height:150px;
}
#PRsection2{
border-style:solid;
border-color: #000099;
}
.PRimage01{
width:170px;
height:80px;
}
.PRimage02{
width:165px;
height:100px;
}
#kuhaku{
clear:left;
height:20px;
}
#columnwaku{
float:left;
clear:left;
height:130px;
width:790px;
}
#columnbun{
height:120px;
width:600px;
}
#columncontents{
height:140px;
width:600px;
border-style:solid;
border-color: #000099;
}
.columnarticle01{
height:70px;
width:400px;
background-color:#CC99CC;
}
#PR3{
float:left;
width:185px;
height:150px;
}
#PRsection3{
border-style:solid;
border-color: #000099;
}
.PRimage03{
width:165px;
height:100px;
}
#questionnairesection{
clear:left;
float:left;
height:130px;
width:1050px;
}
#questionnaire{
width:600px;
border-radius: 20px;
}
#questionnairecontents{
height:140px;
width:600px;
border-style:solid;
border-color: #000099;
}
#PR4{
float:left;
width:185px;
height:150px;
}
#PRsection4{
border-style:solid;
border-color: #000099;
}
.PRimage04{
width:165px;
height:100px;
}
文字制限のため省略
No.4ベストアンサー
- 回答日時:
スタイルシート部分です。
CSS2の本来の書き方に則しています。
CSS2では、基点となるセレクタに続いて「つなげるセレクタ」でつなげていきます。そのため*(全称セレクタ)が追加されています。
#PRとは、*#PRと感謝腐れます。idがPRの値のすべての要素と言う意味です。
しかし、基点となるセレクタを書く癖をつけたほうが後々楽です。他のページで別の箇所に同じPRidが使われていても適用されないので混乱しなくてすみます。
★子孫セレクタ、隣接セレクタ、属性セレクタなどを活用して、HTMLの文書構造にしたがってセレクタを書く技術を身につけましょう。ものすごく分かりやすくなります。極端に言うとHTMLを見なくてもデザインできるようになります。
[例]
div.section div.section p.Logo{
はsection(本文)ブロックの内=子孫(半角スペース)のsectionブロック内のclass属性にLogoを持つp要素と読みます。
div.section div.section+div.section{margin-top:50px;}
は、そのうちのdiv.sectionと隣接した(+)sectionについてのmargin-topの指定です。
div.section div.section{}で指定したmargin:0を上書きでます。
詳細度が大きいからです。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄
div.section div.section+div.section 詳細度 [0 0 3 3] ・・・33
div.section div.section 詳細度[0 0 2 2] ・・・22
div.section 詳細度[0 0 1 1] ・・・11
⇒5 セレクタ( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
⇒6 プロパティ値とカスケーディング、継承の割り当て( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
はスタイルシートを理解する時に必須です。これを知っていると知らないとでは、まるで違います。いちいちidやclassを書かなくて良くなるので楽です。メンテナンス性が劇的に改善される。
以下、スタイルシート部分
★タブは_に置換してあるので戻す。
_<style type="text/css">
<!--
html,body{margin:0;padding:0;}
/* ディスプレイ幅に影響されないようリキッドにしておく */
/* スマホでも超幅広ディスプレイでも利用可能 */
div.header,
div.section,
div.footer{
_width:90%;min-width:630px;max-width:890px;
_margin:0 auto;padding:5px;
}
div.header div#contentTable h3,
div.section div.section h3{
_margin:0;line-height:1.8em;
_border-bottom:2px gray solid;
_padding:0 0.5em;
_background-color:rgb(255,255,200);
}
div.header div#contentTable ol,
div.header div#contentTable ol li{
_list-style:none;margin:0;padding:0;
_text-align:ceter;
}
div.header div#contentTable ol li{
_margin:3px;
}
div.header div#contentTable ol li{
_display:inline-block;
_width:22%;
_position:relative;
}
div.header div#contentTable ol li img{
_display:block;/* 画像をblockにしてサイズ変更するように */
_width:90%;height:auto;
}
div.section{position:relative;}
div.header div#contentTable,
div.section div.section{
_min-width:0;width:auto;
_margin-right:170px;
_border:solid 2px gray;
_min-height:160px;/* 挿絵画像のサイズが大きい場合はHTML側で指定 */
_padding:0;
_position:relative;/* 子孫のサイズ基にするためrelative */
}
div.section p{
_margin:0 1em;
_text-indent:1em;
_line-height:1.6em;
}
/* 二つ目以降(隣接セレクタ)のsub sectionの上マージンを指定*/
div.section div.section+div.section{
_margin-top:50px;
}
div.header div#contentTable p.Logo,
div.section div.section p.Logo{
_margin:0;height:100%;/* relativeな親ブロックのサイズを基準 */
_position:absolute;
_top:0;right:-170px;
_width:160px;
_text-align:center;
}
p.Logo img{
_display:block;/* 画像をblockにしてサイズ変更するように */
_width:90%;height:auto;
_margin:5px auto;
}
div.guest h3:before{content:"Gest ";}/* ゲスト記事の目印 */
/* 分かりやすいように色をつけておく */
div.header{background-color:yellow;}
div.section{background-color:silver;}
div.footer{background-color:aqua;}
div.section div.section{background-color:white;}
div.header div#contentTable{background-color:lime;}
div.section div.section p.Logo{background-color:fuchsia;}
div.header div#contentTable p.Logo{background-color:orange;}
div.section div.column h3{background-color:red;}
-->
_</style>
No.3
- 回答日時:
遅くなって申し訳ない。
なかなか時間が取れなくて・・>イメージとしては
>コラム コラム記事パートナー枠が1つ
>ゲスト記事 ここにゲスト記事パートナー枠が1つ
>ゲスト記事 ここにゲスト記事パートナー枠が1つ
>ゲスト記事 ここにゲスト記事パートナー枠が1つ
との事ですから、勝手に解釈して、分かりやすいようにHTML5的に文書構造を整理すると
<body>
<header>
<div id="tableContent">
・・・ゲストパートナーの記事へのリンク(目次)
<div>
</header>
<section>
<section>
<h2>コラム</h2>
記事
<p><a href="">画像</a></p>
</section>
--- <section>
↑ <h2>ゲスト記事</h2>
1セット 記事
↓ <p><a href="">画像</a></p>
--- </section>
--- <section>
↑ <h2>ゲスト記事</h2>
1セット 記事
↓ <p><a href="">画像</a></p>
--- </section>
・・・・略
</section>
<footer>
</footer>
</body>
subSectionに、リンク先として画像がひとつ含まれているとします。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄
と勝手に判断してHTMLを書いてみました。
1)いずれにしても、文書構造をHTMLでしっかりとマークアップする。
結果的にそれが分かりやすいデザインに通じますが、この段階ではデザインは考えない。
2)そうして示された文書構造にしたがって、スタイルシートでデザイン
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄
これが、すべての基本です。文書構造しかHTMLに書かれていないため、将来内容やデザインの変更も楽ですし、誰が見てもわかる物になるでしょう。
あなたのHTMLと比較してみてください。ポイントが分かると思います。
面倒くさいかもしれませんが、理解しやすいように・・
★用意する物
./images/Logo/A.gif~D.gif width:140px height:140px
./images/Figure/PR.jpg width:120 height:80px
./images/Figure/column.jpg width:120 height:80px
./images/Figure/A.jpg~D.jpg width:120 height:80px
<!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">
_<title>サンプル</title>
_<meta name="author" content="ORUKA1951">
_<meta http-equiv="Content-Style-Type" content="text/css">
_<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
_<link rel="START" href="../index.html">
_<style type="text/css">
<!--
-->
_</style>
</head>
<body>
_<div class="header">
__<h1>ページタイトル</h1>
__<div id="contentTable" >
___<h3>パートナー枠</h3>
___<ol>
____<li><a href="#A"><img src="./images/Logo/A.gif" width="140" height="140" alt="A社"></a></li>
____<li><a href="#B"><img src="./images/Logo/B.gif" width="140" height="140" alt="B社"></a></li>
____<li><a href="#C"><img src="./images/Logo/C.gif" width="140" height="140" alt="C社"></a></li>
____<li><a href="#D"><img src="./images/Logo/D.gif" width="140" height="140" alt="D社"></a></li>
___</ol>
___<p class="Logo">
____<a href=""><img src="./images/Figure/PR.jpg" width="120" height="80" alt="写真"></a>
___</p>
__</div>
_</div>
_<div class="section">
__<div class="section column" id="column">
___<h3>コラム</h3>
___<p>
____コラム記事
___</p>
___<p class="Logo">
____<a href=""><img src="./images/Figure/column.jpg" width="120" height="80" alt="コラム用・・・の写真"></a>
___</p>
__</div>
__<div class="section guest" id="A">
___<h3>ゲスト記事A</h3>
___<p>
____記事
___</p>
___<p class="Logo">
____<a href=""><img src="./images/Figure/a.jpg" width="120" height="80" alt="Aへ"></a>
___</p>
__</div>
__<div class="section guest" id="B">
___<h3>ゲスト記事B</h3>
___<p>
____記事
___</p>
___<p class="Logo">
____<a href=""><img src="./images/Figure/b.jpg" width="120" height="80" alt="Bへ"></a>
___</p>
__</div>
__<div class="section guest" id="C">
___<h3>ゲスト記事C</h3>
___<p>
____記事
___</p>
___<p class="Logo">
____<a href=""><img src="./images/Figure/c.jpg" width="120" height="80" alt="Cへ"></a>
___</p>
__</div>
__<div class="section guest" id="D">
___<h3>ゲスト記事D</h3>
___<p>
____これらの記事はいくつ増減しても構いません。
___</p>
___<p class="Logo">
____<a href=""><img src="./images/Figure/d.jpg" width="120" height="80" alt="Dへ"></a>
___</p>
__</div>
__<p class="goTop"><a href="#Top">ページの先頭へ▲</a></p>
_</div>
_<div class="footer">
__<h2>管理会社</h2>
__<address><a href="Aboutus.html"><img src ="Aboutus.jpg"></a></p>
_</div>
</body>
</html>
No.2
- 回答日時:
ぱっと見た感じではとても分かりにくい印象を受けました。
まず、<p class="title">は見出し要素の<h1>や<h2>などに変え、
<br>の使い方も前の方が言われてるとおり不適切だと思います。
<!-- コンテンツその1 ここから -->
<div class="section" id="content1">
<h2>あああああ</h2>
<ul>
<li><a><img src="" alt="~のロゴ"></a></li>
<li><a><img src="" alt="~のロゴ"></a></li>
<li><a><img src="" alt="~のロゴ"></a></li>
<li><a><img src="" alt="~のロゴ"></a></li>
</ul>
</div>
<!-- コンテンツその1 ここから -->
<!-- コンテンツその2 ここから -->
<div class="section" id="content2">
<h2>いいいいい</h2>
<p><img src="" alt="" width="" height=""></p>
</div>
<!-- コンテンツその2 ここまで -->
<!-- コンテンツその3 ここから -->
<div class="section" id="content3">
<h2>ううううう</h2>
<p>えええええ</p>
<p><ddd></p>
</div>
<!-- コンテンツその3 ここまで -->
</body>
みたいな書き方もあると思いますので、
まずは誰もがわかる様なHTMLに書き換えたり、コメントなどを入れた方が、
今後管理していく上でも、質問等される場合にもいいと思いました。
あと余白はスタイルシート上で必要な部分にmarginやpaddingを設定してあげると、もしかしたら上手くいくかもしれません。
この回答への補足
<div class="section" id="content1">
の部分ですが、僕の書いたもののどれにあたるのでしょうか?
少しだけでもcssの方も提示していただけませんか?
No.1
- 回答日時:
ご苦労様としか・・
とても苦労して書かれたHTML,CSSだと言うことだけは分かりますが、書かれた、ご自身でも難儀している物・・他人には地獄です。数年後の将来あなたがメンテナンスしようにも手がつけられないと思います。
ここまで書かれているくらいですから、下記に色々なリンクを上げて説明しておきます。その上で、最後のサンプルコードを元にHTMLを書き直してください。その上でどのように配置したいかの図を示されると良いでしょう。【だいたいは分かりました(^^)】
スタイルシートをきちんと適用させようとしたら、『CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。.( http://jigsaw.w3.org/css-validator/#validate_by_ … )』
・HTMLには文書構造以外書かない!!
スタイルシートを使うときの前提です。
⇒2.4.1 構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
・HTMLはstrictで記述する
『HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』
・DIVはデザインのために書かない。HTMLに用意されている要素で文書構造が示しきらない時に
『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』
その際、idではなくclassで指定するのが原則です。class名はHTML5の【新しい要素( http://standards.mitsue.co.jp/resources/w3c/TR/h … )】がその用途と共にとても参考になります。
※細かいことのようですが大事なこと
a) 余白を開けるために<br>を使うのは誤りです。スタイルシートで指定します。
b) 各セクションには必ず見出しを入れるようにします。(実際には描画しなくても)
c) 文書は基本的に、header、section(本文)、footerで構成されているはずです。
記事と直接関係ないものは、asideになり、本文より後に書きましょう。
検索エンジンは、HTML5の新しい要素名になったようなclass名は理解できてます。
e) スタイルシートはHTMLの文書構造を元に記述します。
★下記のようなHTMLでしたら、私の書いた物であっても他人のあなたで簡単にテキストの追加や変更ができるでしょう。文書構造しか書いてないから・・。
・パートナーの紹介???と思われるセクションは、このページの内容とは直接関係しないと判断してsectionの後半にasideとして回しました。もし重要ならsectionにして前に移動する。
・PRは当然asideとして最後にまわしてあります。
・リンクのターゲットとして必要そうな物以外idはつけていません。
これ以上のid,class名は不要なはずです。
それでいて、スタイルは書けます。それもはるかに簡単に分かりやすく。
★タブは_に置換してあるので戻すこと。
投稿時にはまた_に直して・・
<!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">
_<title>サンプル</title>
_<meta name="author" content="ORUKA1951">
_<meta http-equiv="Content-Style-Type" content="text/css">
_<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
_<link rel="START" href="../index.html">
_<style type="text/css">
<!--
-->
_</style>
</head>
<body>
_<div class="header" id="TOP">
__<h1>ページタイトル</h1>
_</div>
_<div class="section">
__<div class="section" id="column">
___<h3>コラム</h3>
___<p>
____<img src="./images/Figure/a.jpg" width="120" height="80" alt="コラム用・・・の写真">
____コラム記事
___</p>
__</div>
__<div class="section" id="guest">
___<h3>ゲスト記事</h3>
___<p>
____<img src="./images/Figure/a.jpg" width="120" height="80" alt="・・・の写真">
____ここにゲスト記事記事
___</p>
__</div>
__<div class="aside" >
___<h3>パートナー枠</h3>
___<ol>
____<li><a href="A"><img src="./images/Logo/A.gif" width="140" height="140" alt="A社"></a></li>
____<li><a href="B"><img src="./images/Logo/B.gif" width="140" height="140" alt="B社"></a></li>
____<li><a href="C"><img src="./images/Logo/C.gif" width="140" height="140" alt="C社"></a></li>
____<li><a href="D"><img src="./images/Logo/D.gif" width="140" height="140" alt="D社"></a></li>
___</ol>
__</div>
__<div class="aside">
___<h3>PR枠</h3>
___<div class="section">
____<h3>PR1</h3>
____<p><img src="./images/Logo/Pr1.gif" width="160" height="120" alt=""></p>
___</div>
___<div class="section">
____<h3>PR2</h3>
____<p><img src="./images/Logo/Pr2.gif" width="160" height="120" alt=""></p>
___</div>
___<div class="section">
____<h3>PR3</h3>
____<p><img src="./images/Logo/Pr3.gif" width="160" height="120" alt=""></p>
___</div>
___<div class="section">
____<h3>PR4</h3>
____<p><img src="./images/Logo/Pr4.gif" width="160" height="120" alt=""></p>
___</div>
__</div>
__<p class="goTop"><a href="#TOP">ページの先頭へ</a></p>
_</div>
_<div class="footer">
__<h2>管理会社</h2>
__<address><a href="Aboutus.html"><img src ="Aboutus.jpg"></a></p>
_</div>
</body>
</html>
この回答への補足
ゲスト記事をあと2つ足したいです。そしてパートナー枠がその右に並びます。
イメージとしては
コラム コラム記事パートナー枠が1つ
ゲスト記事 ここにゲスト記事パートナー枠が1つ
ゲスト記事 ここにゲスト記事パートナー枠が1つ
ゲスト記事 ここにゲスト記事パートナー枠が1つ
という感じです。
ページの先頭へ 以下は大丈夫です。
本当に、本当に丁寧にすいません。20ptでは足りなくらいのご解説です。1度試してみます。取り急ぎ、お礼文を書かせていただきました。
素人の勢いでやり過ぎました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- HTML・CSS CSSのホバーエフェクト 1 2023/06/19 06:53
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS cssが効かなくて困ってます 1 2023/01/01 23:57
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
【CSS】floatで左右に並べた...
-
divのheight指定で画面一杯に表...
-
クリッカブルマップとインライ...
-
【CSSハック】アンカーポイント...
-
css固定したフッターが本文と重...
-
CSSでdivの縦幅を指定する方法
-
htmlのstyleのposition:relativ...
-
HTMLですCSSです 画像のように...
-
文字を固定したいのですが…
-
HTMLですCSSです この画像のよ...
-
TABLEの高さを固定したいのですが…
-
ロールオーバーで画像拡大、z-i...
-
YES or NO形式で進んで行く、タ...
-
3点リーダーの作り方
-
大分類・中分類・小分類
-
positionのrelativeとabsolute...
-
Flickity で画像にリンクを貼る...
-
textareaで入力した文字を改行...
-
CSS <div>の入れ子が反映さ...
-
MAX関数を使ってからLEFT JOIN...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Ctrl+F(検索)の窓を出したいの...
-
フッター上部に謎の隙間
-
【CSS】floatで左右に並べた...
-
HTMLですCSSです この画像のよ...
-
css固定したフッターが本文と重...
-
CSS <div>の入れ子が反映さ...
-
スクロール可能なチェックボックス
-
textareaで入力した文字を改行...
-
オンマウス時に別画像を上に重...
-
文字を固定したいのですが…
-
スタイルシートで画面を上下に...
-
チェックボックスの背景色って...
-
フッターの下に隙間ができてしまう
-
文字をクリックしたら別の文字...
-
大分類・中分類・小分類
-
HTMLですCSSです 画像のように...
-
CSSでdivのheightを動的に
-
★★★フッター最下部固定/スクロ...
-
離れた場所にマウスオーバーで...
-
htmlのstyleのposition:relativ...
おすすめ情報