Ｐａｇｅ 1006 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 通常モードに戻る ┃ ＩＮＤＥＸ ┃ ≪前へ │ 次へ≫ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ▼テーブルを使うとメニューの位置が中央に... Chris 05/4/23(土) 12:33 ┣Re:テーブルを使うとメニューの位置が中央に... Pid 05/4/23(土) 21:27 ┃ ┗Re:テーブルを使うとメニューの位置が中央... Chris 05/4/25(月) 17:32 ┃ ┗Re:テーブルを使うとメニューの位置が中央... Pid 05/4/25(月) 21:25 ┗Re:テーブルを使うとメニューの位置が中央に... ひろぴ 05/4/27(水) 6:14 ─────────────────────────────────────── ■題名 ： テーブルを使うとメニューの位置が中央に... ■名前 ： Chris ■日付 ： 05/4/23(土) 12:33 -------------------------------------------------------------------------
| 前に投稿したChrisです。 とりあえずテーブルを使うことで何とか落ち着きましたが 右側のメニュー部分がテーブルの影響で真ん中に表示されます もう少し上に表示したいのですが、どうすればいいでしょうか？ かなり長いですがページのソース貼っておきます まだ、おかしいところが色々・・・ <html> <head> <meta http-equiv="Content-Type"content"text/html;charset=Shift_JIS"> <meta http-equiv="Content-Style-Type"content"text/css"> <title>Test</title> <style type="text/css"> <!-- body {/*背景色、背景の設定*/ background-color : white; background-image : url(img/sky.jpg); background-repeat : no-repeat; background-attachment : fixed;background-position : 100% 0%; scrollbar-3dlight-color:#0000FF; scrollbar-arrow-color:#0000CD; scrollbar-base-color:; scrollbar-track-color:#F5F5F5; scrollbar-darkshadow-color:#00008B; scrollbar-face-color:#FFFFFF; scrollbar-highlight-color:#0000FF; scrollbar-shadow-color:#191970} filter:Alpha(Style=0 Opacity=70); } h1 {/*サブタイトル部分の設定*/ width: 500px; padding: 5px; border: 1px solid black; text-align: left; font:16px "MS UI Gothic"; color: black; } h2 {/*下部分の設定*/ width: 500px; font: 13px "MS UI Gothic"; margin-top: 10px; padding: 10px; border: 1px solid black; background-color : white; filter:Alpha(Style=0 Opacity=70); } em {/*タイトル&強調*/ font: 500 14px/2em "MS UI Gothic"; } div {/*divで囲んだところの設定*/ font: 13px "MS UI Gothic"; filter:Alpha(Style=0 Opacity=70); } div.cen {/*中央寄せ*/ text-align: center; } p {/*フォント、文字色*/ font: 13px "MS UI Gothic"; text-align: left; color:black; } a {/*リンクのスタイルの設定*/ background: transparent; color: #000080; text-decoration: none; font: 16px "MS UI Gothic"; } a:active,a:hover {/*リンクのスタイルの設定*/ background: transparent; color: #4169e1; text-decoration: underline; font: 16px "MS UI Gothic"; } #menu {/*メニューの設定*/ z-index: 2; margin: 1px; padding: 0px; } #menu ul li {display: inline} #menu ul{/*メニューの設定*/ width: 133px; margin: 5px 5px; padding: 0px; list-style-tyep: none; border: 1px solid #000000; font-size: 13px; background: #f8f8ff; clor; #fff; text-align: center; } #menu a:link,#menu a:visited{/*メニュー内のスタイルの設定*/ width: 131px; margin: 0px padding: 4px; border-top: 1px solid #333333; border-right: 1px solid #999999; border-bottom: 1px solid #999999; border-left: 1px solid #333333; display; black; background: #f8f8ff; clor; #fff; font:16px "MS UI Gothic"; } #menu a:hover{/*メニュー内のスタイルの設定*/ margin: 0px padding: 4px; border-top: 1px solid #111; border-right: 1px solid #eee; border-bottom: 1px solid #eee; border-left: 1px solid #111; display; black; background: #ffffff; clor; #ccc; font:16px "MS UI Gothic"; } table.test1 { width;100px; border-collapse : collapse ; border-width : 1px 0 0 1px ; border-style : solid ; border-color : black ; /* IE 6(Win)向け */ background-color : white; filter:Alpha(Style=0 Opacity=70); } table.test1 td { width;100px; border-width : 0 1px 1px 0 ; border-style : solid ; padding : 1em ; background-color : white; } div.scrollbar{/*スクロールさせる設定*/ height: 9em;/*高さ*/ overflow: auto; background-color : white; filter:Alpha(Style=0 Opacity=70); } --> </style> </head> <body> <div class="cen"> <table cellspacing="0" class="test1"> <tr><td><div id="menu"> <ul class=""title"> <em>HPのタイトル</em> </ul> <ul class="menulist> <li id="top"><a href="#" title="TOP">TOP</a></li><br> <li id="about"><a href="#" title="ABAUT">ABAUT</a></li><br> <li id="diary"><a href="#" title="MAIN">MAIN</a></li><br> <li id="bbs"><a href="#" title="BBS">BBS</a></li><br> <li id="link"><a href="#" title="LINK">LINK</a></li><br> </ul> <ul class="menulist> <li id="bbs"> TestTestTest<br> TestTestTest<br> TestTestTest<br> TestTestTest<br> TestTestTest</li> </ul></div> <td> <h1>記事のタイトル</h1> <p> TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest<br> TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest<br> TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest<br> </p> <h1>DIARY</h1> <div class="scrollbar"> TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest<br> TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest<br> TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest<br> TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest<br> TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest<br> TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest<br> TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest<br> TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest<br> TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest<br> TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest<br> TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest<br> TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest<br> </div> <h1>更新履歴</h1> <div class="scrollbar"><p> Test 00.00.00<br> Test 00.00.00<br> Test 00.00.00<br> Test 00.00.00<br> Test 00.00.00<br> Test 00.00.00<br> Test 00.00.00<br> Test 00.00.00<br> Test 00.00.00<br> Test 00.00.00<br> Test 00.00.00<br> Test 00.00.00<br> </p></div> <h2><script language="JavaScript" src="cp.js"></script></h2></td></tr> </body> </html> |
| えーと， http://www.shoshinsha.com/cgi-bin/bbs_new/c-board.cgi?cmd=ntr;tree=4577;id=situmon で指摘されていた通り，HTML の書き方が変です。 早いうちに CSS に慣れておいた方が良いのは確かですが，その前にカヅサツさんのリンク先をよく読んで，土台となる HTML の基本的な規則をしっかり覚えましょう。 細かいスペルミスも多々ありますので ・http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ・http://jigsaw.w3.org/css-validator/ でチェックすると良いでしょう。 以下はあくまで一例です。 <!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> <style type="text/css"> html { margin: 5px; border: 1px solid black; /* forIE */ scrollbar-3dlight-color: #00f; /* forIE */ scrollbar-arrow-color: #0000cd; /* forIE */ scrollbar-base-color: #00f; /* forIE */ scrollbar-track-color:#f5f5f5; /* forIE */ scrollbar-darkshadow-color:#00008b; /* forIE */ scrollbar-face-color: #fff; /* forIE */ scrollbar-highlight-color: #00f; /* forIE */ scrollbar-shadow-color: #191970; } /*========== 右サイドに配置するもの ==========*/ body { margin: 0 0 0 200px; padding: 5px;; border-left: 1px solid black; background: white url(img/sky.jpg) no-repeat fixed 100% 0%; font-family: "MS UI Gothic", sans-serif; /* forIE */ filter:Alpha(Style=0,Opacity=70); } h2 { padding: 5px; border: 1px solid black; color: black; font-size: 160%; text-align: left; } address { margin-top: 10px; padding: 10px; border: 1px solid black; /* forIE */ filter:Alpha(Style=0,Opacity=70); } a { color: #000080; text-decoration: none; } a:hover, a:active { /* :hover, :active の順番にすること */ color: #4169e1; text-decoration: underline; } .articles, .history { height: 9em; overflow: auto; /* forIE */ filter:Alpha(Style=0,Opacity=70); } .for-nonCSS-browsers { display: none; } /*========== 左サイドに配置するもの ==========*/ h1, .menu, .comments { border: 1px solid black; position: absolute; left: 20px; width: 160px; } h1 { padding: .3em 0; top: 10px; font-size: 110%; font-weight: normal; text-align: center; } .comments { top: 18em; } .menu { margin: 0; padding: 0; top: 4em; list-style: none; font-size: 110%; background: #f8f8ff; color; #fff; text-align: center; } .menu li { margin: 1em 0; } .menu a:link, .menu a:visited { padding: 4px; border-style: solid; border-width: 1px; border-color: #333 #999 #999 #333; display; block; color; #fff; background: #f8f8ff; } .menu a:hover { padding: 4px; border-style: solid; border-width: 1px; border-color: #111 #eee #eee #111; color; #ccc; background: #fff; } </style> </head> <body> <h1>タイトル</h1> <ul class="menu"> <li><a href="#">TOP</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">MAIN</a></li> <li><a href="#">BBS</a></li> <li><a href="#">LINK</a></li> </ul> <p class="comments"> Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. </p> <hr class="for-nonCSS-browsers"> <h2>記事のタイトル</h2> <p> Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. </p> <hr class="for-nonCSS-browsers"> <h2>DIARY</h2> <div class="articles"> <p> Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. </p> <p> Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. </p> <p> Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. </p> </div> <hr class="for-nonCSS-browsers"> <h2>更新履歴</h2> <ul class="history"> <li>Test 00.00.00</li> <li>Test 00.00.00</li> <li>Test 00.00.00</li> <li>Test 00.00.00</li> <li>Test 00.00.00</li> <li>Test 00.00.00</li> <li>Test 00.00.00</li> <li>Test 00.00.00</li> <li>Test 00.00.00</li> <li>Test 00.00.00</li> </ul> <hr class="for-nonCSS-browsers"> <address>© nobody@nowhere</address> </body> </html> なお，背景透過したいのなら filter を使うのではなく，メッシュ加工などを施した画像を背景にするのが常套手段です。 |
| ▼Pidさん： >なお，背景透過したいのなら filter を使うのではなく，メッシュ加工などを施した画像を背景にするのが常套手段です。 背景透過をしているのではなく、文字を隠せペースを透過して 背景を見えるようにしていたんです 修正を加えていたら途中でメニューの部分が おかしくなってしまいました。 TOP ABAUT MAIN BBS LINK となっていたものが TOPABAUTMAIN BBSLINK となってしまいました、色々試してみましたが分かりませんでした <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>Test</title> <style type="text/css"> <!-- body {/*背景色、背景の設定*/ background-color : white; background-image : url(img/sky.jpg); background-repeat : no-repeat; background-attachment : fixed;background-position : 100% 0%; /* forIE */scrollbar-3dlight-color:#0000FF; /* forIE */scrollbar-arrow-color:#0000CD; /* forIE */scrollbar-base-color:; /* forIE */scrollbar-track-color:#F5F5F5; /* forIE */scrollbar-darkshadow-color:#00008B; /* forIE */scrollbar-face-color:#FFFFFF; /* forIE */scrollbar-highlight-color:#0000FF; /* forIE */scrollbar-shadow-color:#191970} /* forIE */filter:Alpha(Style=0 Opacity=70); } h2 {/*サブタイトル部分の設定*/ width: 500px; padding: 5px; border: 1px solid black; text-align: left; font:16px "MS UI Gothic"; color: black; background-color : transparent; } h3 {/*下部分の設定*/ width: 500px; font: 13px "MS UI Gothic"; margin-top: 10px; padding: 10px; border: 1px solid black; background-color : white; /* forIE */filter:Alpha(Style=0 Opacity=70); } div {/*divで囲んだところの設定*/ font: 13px "MS UI Gothic"; /* forIE */filter:Alpha(Style=0 Opacity=70); } div.cen {/*中央寄せ*/ text-align: center; } p {/*フォント、文字色*/ font: 13px "MS UI Gothic"; text-align: left; color:black; } h1, .menu, .comments { border: 1px solid black; width: 132; } h1 { top: 10px; font: 500 14px/2em "MS UI Gothic"; text-align: center; } .comments { top: 18em; } a {/*リンクのスタイルの設定*/ background: transparent; color: #000080; text-decoration: none; font: 16px "MS UI Gothic"; } a:active,a:hover {/*リンクのスタイルの設定*/ background: transparent; color: #4169e1; text-decoration: underline; font: 16px "MS UI Gothic"; } .menu {/*メニューの設定*/ z-index: 2; margin: 0px; padding: 0px; } .menu ul li {display: inline} .menu ul{/*メニューの設定*/ width: 133px; margin: 0px 0px; padding: 0px; list-style-tyep: none; border: 1px solid #000000; font-size: 13px; background: #f8f8ff; clor; #fff; text-align: center; } .menu a:link, .menu a:visited{/*メニュー内のスタイルの設定*/ width: 131px; margin: 0px padding: 4px; border-top: 1px solid #333333; border-right: 1px solid #999999; border-bottom: 1px solid #999999; border-left: 1px solid #333333; display; black; background: #f8f8ff; clor; #fff; font:16px "MS UI Gothic"; } .menu a:hover{/*メニュー内のスタイルの設定*/ margin: 0px padding: 4px; border-top: 1px solid #111; border-right: 1px solid #eee; border-bottom: 1px solid #eee; border-left: 1px solid #111; display; black; background: #ffffff; clor; #ccc; font:16px "MS UI Gothic"; } table.t1 { width;100px; border-collapse : collapse ; border-width : 1px 0 0 1px ; border-style : solid ; border-color : black ; /* IE 6(Win)向け */ background-color : white; /* forIE */filter:Alpha(Style=0 Opacity=70); } table.t1 td { width;100px; border-width : 0 1px 1px 0 ; border-style : solid ; padding : 1em ; background-color : white; } p.scroll{/*スクロールさせる設定*/ height: 9em;/*高さ*/ overflow: auto; background-color : white; /* forIE */filter:Alpha(Style=0 Opacity=70); } --> </style> </head> <body> <div class="cen"> <table cellspacing="0" class="t1" summary="枠線"> <tr><td> <h1>HPのタイトル</h1> <div class="menu"> <ul class="menulist"> <li id="top"><a href="index.html" title="TOP">TOP</a></li> <li id="about"><a href="index.html" title="ABAUT">ABAUT</a></li> <li id="diary"><a href="index.html" title="MAIN">MAIN</a></li> <li id="bbs"><a href="index.html" title="BBS">BBS</a></li> <li id="link"><a href="index.html" title="LINK">LINK</a></li> </ul></div> <p class="comments"> TestTestTestTestTest<br> TestTestTestTestTest<br> TestTestTestTestTest<br> TestTestTestTestTest<br> TestTestTestTestTest<br> TestTestTestTestTest </p> <td> <h2>記事のタイトル</h2> <p> TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest<br> TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest<br> TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest<br> </p> <h2>DIARY</h2> <p class="scroll"> TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest<br> TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest<br> TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest<br> TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest<br> TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest<br> TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest<br> TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest<br> TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest<br> TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest<br> TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest<br> TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest<br> TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest<br> </p> <h2>更新履歴</h2> <p class="scroll"> Test 00.00.00<br> Test 00.00.00<br> Test 00.00.00<br> Test 00.00.00<br> Test 00.00.00<br> Test 00.00.00<br> Test 00.00.00<br> Test 00.00.00<br> Test 00.00.00<br> Test 00.00.00<br> Test 00.00.00<br> Test 00.00.00<br> </p> <h3>Copyright（C）Chris, All Rights reserved 2005</h3></td></tr> </tbody></table></div> </body> </html> |
| ▼ Chrisさん： >背景透過をしているのではなく、文字を隠せペースを透過して背景を見えるようにしていたんです ごめんなさい，私の言い方がマズかったですね。つまり http://www.shoshinsha.com/pukiwiki/pukiwiki.php?%C7%D8%B7%CA%A4%F2%C8%BE%C6%A9%CC%C0%A4%CB を行おうとしているのですよね。この場合，普通 filter は使いません。 >TOPABAUTMAINBBSLINK >となってしまいました ↓ >.menu ul li {display: inline} ＊ ＊ ＊ それから，本題からやや離れますが ><h3>Copyright（C）Chris, All Rights reserved 2005</h3> Copyright 表記は h3 要素（レベル 3 の見出し）としてマークアップするものではないと思います。 ><table cellspacing="0" class="t1" summary="枠線"> summary 属性というのは「何の表かを簡単に説明する」ためのものなので，これだと意味不明です（音声ブラウザなどで混乱する恐れがあります）。 また，class="cen" とか class="scroll" というクラス名の付け方は良くないので，改めた方が良いのですが……まあ，私も no.4665 で class="for-nonCSS-browsers" とかやっちゃったからまあいいや（←後で猛烈に反省した）。 あと， ・IE 標準モードの場合はスクロールバー指定を html 要素にしないといけない。 ・width に単位がついていないものがある。 ・table 要素は text-align では中央寄せできない。 ・Alpha 関数内のパラメータはコンマで区切る。 ・scrollbar-shadow-color の後が } になっている。 ・スペルミス→ clor，display:black，list-style-tyep ・font-family の最後に総称ファミリ名を指定しておくべき。 ・font-family は body で指定しておけば継承される。 ・font-size を px 単位で固定するのは（よほどのことが無い限り）避けた方が良い。 等々，細かい注意点は山程あるのですが（no.4665 では上記もほぼ直したつもりだったのですが……コメントで註でも入れておけば良かったですね）……まあ，ゆっくり慣れて下さい。 |
| こんにちは！ えっと・・ こういうことでしょうか？ table.test1 { width;100px; border-collapse : collapse; border-width : 1px 0 0 1px; border-style : solid; border-color : black; /* IE 6(Win)向け */ background-color : white; filter:Alpha(Style=0 Opacity=70); } table.test1 td { width;100px; border-width : 0 1px 1px 0 ; border-style : solid ; padding : 1em ; background-color : white; vertical-align: top; } 【table.test1 td 】に 『vertical-align: top; 』を追加しています。 |