- ベストアンサー
ＣＳＳの編集の仕方がわかりません。
http://sozai.wdcro.com/sample/047/を元にしてホームページを作っていこうと思うのですが、書き方がよくわかりません。 ----------------------------------------------- １．下記の意味を教えてください。 ここにおすすめ情報などを書くと良いでしょう。 書き方は、 <p class="l_f1">ここに内容</p> それと上のメニューの書き方は <div><a href="#" class="side">メニュー6</a></div> そのほかの書き方 <p class="l_f2">ここに内容</p> <p class="l_f3">ここに内容</p> <p class="l_f4">ここに内容</p> <p class="l_f5">ここに内容</p> っとあるのですが、<p class="l_f1">ここに内容</p>や<div><a href="#" class="side">メニュー6</a></div>の意味がまったくわかりません。 ２．文字のサイズ、フォント、色を変えるにはどうしたらいいのかも分かりません。 ３．リンクを張るにはどうしたらいいのですか？ ４．ソースを見ると <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <meta name="author" content="katsu"> <meta name="copyright" content="Copyright © sozai.wdcro"> <link rel="copyright" href="http://sozai.wdcro.com/"> <link href="style/wdstyle.css" rel="stylesheet" type="text/css"> <!-- ここまで変更不可 --> になってました。http://www.w3.org/TR/html4/loose.dtdってなんですか？
- meikainodoukeshi
- お礼率0% (12/1300)
- HTML
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
１，２，３に関しては以下をご参照ください。 http://www.tohoho-web.com/how2/index.htm ４．下記URLをご参照ください。 ようはどのバージョンのHTMLで作るかなどを宣言するものです。 http://www.tagindex.com/html_tag/page/doctype.html meikainodoukeshiさんの場合は、CSSというより、HTMLの勉強から始めたほうがよさそうですね。 あと、もっとわかり易いサイトもありますので、「HTML、初心者」等のワードで検索してみるといいですよ。
その他の回答 (2)
- suzuko
- ベストアンサー率38% (1112/2922)
あの～ 書いていらっしゃるURLの最後の方「こまったときは」以降にある「HTML/CSS基礎講座」は読まれましたでしょうか？ 個々かなり良心的に解説されているとは思うのですが・・・
１．HTML の class は CSS 内で設定した特定の項目を呼び出すためのものです。 ２．たとえばこんな感じです：font-size:120%;color:#FF0000;font-family:'ＭＳ Ｐゴシック','ヒラギノ角ゴPro W3',sans-serif; ３．CSS からリンクを貼ることはできません。HTML を使用します。 ４．tinopio さんが答えていますので省略。 まぁとりあえず、tinopio さんの言うようにまずは HTML から始めてみることをお勧めします。 そうすれば例え今１～３への回答の意味がわからなくてもそのうち分かるようになるでしょう。
関連するQ&A
- CSSとSSI 一緒に使えますか？
今までテーブルでデザインしたサイトでSSIを使ってメニューなどを更新していました 同じような感じのデザインのサイトをCSSで作成し、SSIを利用しようと思ったのですが、どうしてもSSIが利用できません CSSも初心者でテンプレートをコピペしてなんとかやってみた感じです <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta name="description" content="このページの要約文"> <meta name="keyword" content="キーワード,キーワード,キーワード"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>このページのタイトル</title> <link rel="index" href="http://"> <link rel=stylesheet type="text/css" href=".css"> <div align="center"> <div id="outline"> <div class="header"> おお </div><!-- end header --> <div align="center"> <div id="frame"> <div id="frame-margin"> <div class="center_left"> <div class="center"> ああ </div><!-- end center --> <div class="left"> いい <!--#include virtual=".html"--> </div><!-- end left --> <br class="c-both"> </div><!-- end center_left --> <div class="right"> うう <!--#include virtual=".html"--> </div><!-- end right --> <br class="c-both"> </div><!-- end frame-margin--> </div><!-- end frame --> </div><!-- end centering --> ご教授のほどなにとぞよろしくお願いします
- 締切済み
- HTML
- ＨＴＭＬ、ＣＳＳ
ＦＣ２（無料サーバー）でホームページを作っているのですが、ＦＣ２の広告（Ｐｏｗｅｒｅｄ ｂｙ…という下に一行だけ出るもの）が私のホームページに表示されなくて困っています。テンプレートを借りて作成したページで、テンプレートのカスタマイズはしていません。広告が表示されないと規約違反になってしまうので、表示させたいのです。何が原因でしょうか？ <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.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"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <link rel="stylesheet" href="st.css" type="text/css"> <title>タイトル</title> </head> <body id="TOP"> <!-- ページ全体 --> <div id="page"> <!-- ヘッダー --> <div id="head"> <h1><a href="index.html">Your Sitename</a></h1> </div> <!-- メニュー --> <div id="menu"> <ul> <li><a href="sample.html">SAMPLE</a> <li><a href="link.html">LINK</a> <li class="on"><a href="text_menu.html">TEXT</a> <li><a href="index.html">INDEX</a> </ul> </div> <!-- コンテンツ --> <div id="contents"> <h2>MENU</h2> <div class="text"> <h3>SHORT STORY</h3> <ul class="sub01"> <li><a href="text.html">STORY01</a> </ul> </div> <div class="text"> <h3>LONG STORY</h3> <h4>TITLE01</h4> <ul class="sub02"> <li><a href="text.html">1</a> <li><a href="text.html">2</a> </ul> </div> <div class="text"> <h4>ILLUST01</h4> <ul class="sub02"> <li><a href="img.html"><img src="img/banner01.gif" width="31" height="31" alt="画像名"></a> <li><a href="img.html"><img src="img/banner01.gif" width="31" height="31" alt="画像名"></a> </ul> </div> <div class="pagetop"><a href="#TOP">▲Top</a></div> </div> <!-- フッター --> <div id="foot"> <ul> <li> </ul> </div> </div> </body> </html>
- ベストアンサー
- HTML
- htmlおよびcssについて
自分で、htmlとcssを記述したのですが、表示が少しおかしいようです。contentの上に空白ができてしまいます。IE、Firafox、cromeでレンダリングしてみましたが、同じです。ソースは以下のとおりです。どこがおかしいのでしょうか？ http://check.zouri.jp/ <?xml version="1.0" encoding="UTF-8"?> <!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" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="keywords" content="キーワード1,キーワード2,キーワード3,キーワード4,キーワード5" /> <meta name="description" content="ここに、あなたがつくろうとするウェブサイトの内容・特徴を記述する" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <link rel="INDEX" href="./index.html" /> <link rel="NEXT" href="next.html" /> <link rel="PREV" href="prev.html" /> <link rel="stylesheet" href="base.css" type="text/css" media="all" /> <!--[if IE]> <link rel="stylesheet" href="ie.css" type="text/css" media="all" /> <![endif]--> <link rev="MADE" href="mailto:aaa@yahoo.co.jp" /> <title>あなたのウェブサイトのタイトル名</title> </head> <body> <div id="wrapper"> <div id="header">headerです </div> <div id="globalnavigation">globalnavigationです </div> <div id="topicpath">topicpathです </div> <div id="container"> <div id="primary">primaryです <div id="content">contentです </div> </div> <div id="secondary">secondaryです </div> </div> <div id="advertisement">advertisementです </div> <div id="pagelinks">pagelinksです </div> <div id="footer">footerです </div> </div> </body> </html> @charset "UTF-8" * {margin:0; padding:0;} #wrapper { width:100%; } #header { background-color:#dddddd; height:50px; } #globalnavigation { background-color:#cccccc; height:50px; } #container { float:left; width:100%; margin-right:-145px; } #primary { float:right; width:100%; margin:10px 0 10px -145px; background-color:#c7d5ed; } #content { margin:0 155px; background-color:#caedc7; } #secondary { float:left; width:145px; margin:10px 0 10px 0px; background-color:#e5c7ed; } #advertisement { float:right; width:145px; margin:10px 0; background-color:#e5c7ed; } #pagelinks { clear:both; background-color:#dddddd; height:50px; } #footer { background-color:#dddddd; height:50px; }
- ベストアンサー
- HTML
- DreamweaberCS5を使っています。
DreamweaberCS5を使っています。 ルートにフォルダを作り、その下層に新しいページを作りたいのですが、 ルートのライブラリィをそのまま使う方法が全くわかりません。教えてください。 下記の<head>からヘッダーのライブラリーのソースでわかりますか？ <?xml version="1.0" encoding="shift_jis"?> <!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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <meta name="Description" content="テキスト" /> <link rel="stylesheet" type="text/css" href="css/style.css" media='screen,print' /> <link rel="start" href="index.html" /> <link rev="made" href="mailto:ＵＲＬ" /> <link rel="alternate" type="application/rss+xml" title="RSS" href="http://otax81.com/index.xml" /> <title>テキスト</title> <script type="text/javascript" src="Library/java/rollover.js"></script> </head> <body> <div id="WRAP"><!-- #BeginLibraryItem "/Library/header.lbi" --> <h1>テキスト</h1> <div id="TOP"> <div class="float-left"><a href="http://otax81.com/"><img src="image/otaxheader.jpg" width="476" height="78" alt="ヘッダー" /></a> <a href="company.html"><img src="image/zeirisikailogo.jpg" width="140" height="44" alt="ロゴ" /></a> <a href="greeting.html">テキスト</a></div> </div> <div id="MENU"> <div id="MENULINK"> <div class="menubt"><a href="index.html">テキスト</a></div> <div class="menubt"><a href="menu1service.html">テキスト</a></div> <div class="menubt"><a href="menu2hinto.html">テキスト</a></div> <div class="menubt"><a href="menu4pay.html">テキスト</a></div> <div class="menubt"><a href="menu3actionsheet.html">テキスト</a></div> <div class="menubt"><a href="sitemap.html">サイトマップ</a></div> <br class="clear" /> </div> </div><!-- #EndLibraryItem -->
- 締切済み
- ホームページ作成ソフト
- HTMLの文法チェックをするとCSS関連でエラーが出て困っています。
http://validator.w3.org/ http://htmllint.itc.keio.ac.jp/htmllint/htmllint.html でHTMLの文法チェックをすると， <body><style TYPE="text/css"><!-- という行があるとエラーが出ます。 実際のHTMLは外部スタイルシートを使っているのですが <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.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"> <title>タイトル</title> <meta name="Keywords" content="キーワード "> <meta name="Description" content="内容説明"> <link rel="stylesheet" href="./css.css" type="text/css"> </head> <body> <div id="page"> 以下略 であり，<body>タグの後ろは<div>タグなのですが，何故かそう認識されます。 スタイルシートの指定がおかしいのかと考えたのですが， いくら検索しても<head></head>間に <link rel="stylesheet" href="./css.css" type="text/css"> を入れるとしか書いてなく理由がわかりません。 ちなみにcss.cssの内容は *{} というような内容の羅列のみで，その他の情報は一切入れていません。 どこがおかしい点なのかわからず悩んでおります。 理由のわかる方いましたら是非ご教授願います。
- ベストアンサー
- HTML
- css初心者です。プラウザの表示について
以下のような記述を行い、確認為にプラウザに表示させようとしましたが、なぜかsafariではうまくいかずに、googlecromeでは表示されました。どのような事が原因なのでしょうか？ よろしくお願いします。 //html <!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-Style-Type" content="text/css" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> <link rel="stylesheet" href="box1.css" type="text/css"> </head> <body> <div class="box">箱の表示を作ろうと思います。</div> <p class="box2">こちらはどうなのでしょうか？</p> </body> </html> //css @charset "UTF-8"; /* CSS Document */ .box{ border:4px solid #9C3; width:50px; height:60px; padding:15px 15px; margin:50px 0px 0px 50px } .box2{ width:300; height:200; border:3px solid #F33; padding:10px; } よろしくお願いします。
- ベストアンサー
- HTML
- ホームページビルダー15 メニュー作成について
いつもお世話になっております。 以下のような、どなたかのご回答をもとに、ホームページビルダー15で同じような折りたたみ式のメニューを作成したいと考えおります。 参考にしたいメニューはこちらです↓ http://okwave.xrea.jp/jquery/test6797636/e.html ですが、自分の作ろうとしているメニューはCSSプロフェッショナルテンプレートの「企業」から作ったものであり、なかなかうまくいきません。 以下、自分の記述を記載いたしますが、以下のようにしたいと思います。 通常は、 メニューA メニューB メニューC というように、なっており、メニューBをクリックしたときにだけ メニューA メニューB B-1 B-2 B-3 メニューC と、サブメニューが表れ、メニューBをクリックするまでサブメニューも表示されたままにしておきたいと思います。（もちろん、メニューA～Cも、どのページでも表示されるようにする） どこに、どのように記述を入れれば、ボタンのデザインなども崩さず、思い通りのメニューになるのか、ご教示いただければと思います。 どうぞよろしくお願いいたします。 *********自分の記述（ヘッダー情報も含まれていますが無視してください）*********** <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.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"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta name="GENERATOR" content="JustSystems Homepage Builder Version 15.0.8.0 for Windows"> <title>TOP</title> <link rel="stylesheet" href="hpbparts.css" type="text/css" id="hpbparts"> <link rel="stylesheet" href="container_1A_2c_left.css" type="text/css" id="hpbcontainer"> <link rel="stylesheet" href="main_1A_2c.css" type="text/css" id="hpbmain"> <link rel="stylesheet" href="user.css" type="text/css" id="hpbuser"> </head> <body id="hpb-template-01-01-02" class="hpb-layoutset-02" bgcolor="#ffffff" background="blue_p7b.gif"> <div style="top : 2px;left : 100px; position : absolute; z-index : 1; visibility : visible; " id="Layer1"> <div id="hpb-container"> <!-- header --><br> <!-- header end --><!-- inner --> <div id="hpb-inner"> <!-- wrapper --> <div id="hpb-wrapper"><!-- main end --> </div> <!-- wrapper end --><!-- navi --> <div id="hpb-nav"> <h3 class="hpb-c-index"></h3> <ul> <li id="nav-toppage"><a href="a.html"><span class="ja">メニューA</span><span class="en">TOP PAGE</span></a> <li id="nav-concept"><a href="b.html"><span class="ja">メニューB</span><span class="en">CONCEPT</span></a> <li id="nav-service"><a href="c.html"><span class="ja">メニューC</span><span class="en">SERVICE&PRODUCTS</span></a> </ul> </div> </div> </div> </div> </body> </html>
- ベストアンサー
- その他（ビジネス・キャリア）
- 以下の内容でhtmlを作成し、文字コードをutf-8からeuc-jpに
以下の内容でhtmlを作成し、文字コードをutf-8からeuc-jpに変更したところ ヘッダー フッターが崩れてしまいます。ie6.0 ie7.0 にて（ie8.0 firefox3）では問題なく表示されます。 というか、cssが聞かないのです。 utf-8に戻すと直るのですが、なにか設定が必要なのでしょうか。 メールフォームcgiの関係でeuc-8にする必要があるのです。 よろしくお願いいたします。 <!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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=euc-jp" /> <title>タイトル</title> <meta name="keywords" content="キーワード1,キーワード2,キーワード3" /> <meta name="description" content="テキスト。" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <link rel="stylesheet" href="css/import.css" type="text/css" /> </head> <body> <div id="bodybox"> <div id="container"> <!-- main --> <div id="main"> </div><!-- /main --> <div id="header"> <div class="head-box"> <h1>テキストテキストテキスト</h1> <p class="oooo"><a href="../"></p> <p class="top-inquiry"><a href="../inquiry/"><span>問合せ</span></a></p> <ul class="top-navi"> <li><a href="../">HOME</a></li> <li><a href="../cy/">テキスト</a></li> </ul> </div> </div><!-- /header --> </div><!-- /container --> </div><!-- /bodybox --> <div id="footer"> <div id="footer-in" class="clearfix"> <div class="fnavibox"> <ul class="fnavi clearfix"> <li><a href="../index.html">テキスト</a></li> <li class="last"><a href="../works/">テキスト</a></li> </ul> <ul class="fnavi clearfix"> <li><a href="/">HOME</a></li> </ul> </div> <!-- /fnavibox --> <div class="banerbox"> <p class="fbox"><img src="../common/images/img-tel1.jpg" alt="" /></p> <p class="fbox-r"><a href="../inquiry/"><img src="../common/images/btn-toi.jpg" alt="テキスト" /></a></p> </div><!-- /banerbox" --> </div> <!-- /footer-in --> <div id="footer-in2" class="clearfix"> <div class="addressbox"> <p class="name">テキスト</p></p> </div><!-- /addressbox --> <!-- /footer-in --> <div id="footer-in3"> <p class="copyright">
- ベストアンサー
- ホームページ作成ソフト
- CSS・IEでボーダーを表示したい
お世話になります。 ホームページ構築(CSS)に関する質問です。 よろしくお願いします。 フリーのCSSサンプルサイトより、ソースをいただいて、 ページを作ってみたのですが。 ナビゲーションリストの部分で、 FireFoxでは、各メニューの右側に、仕切りの部分の「線」が、 表示されているのですが、なぜかIEでは表示されません。 まだ理解が足らないのですが、 「#navigation li a」の 「border-right: 1px double#fff;」あたりかなと思い、 線種を変えてみたりと、いろいろしているのですが 変化がありません。 変更すべき点をどうかご教授ください。 以下は実際のソースです。 「index.html」 --------------------------------------------------------------------------------------------------------------------------- <!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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="imagetoolbar" content="no" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <link rel="stylesheet" href="common.css" type="text/css" /> <title>テストサイト</title> </head> <body> <div id="container"> <div id="header"> <h1>タイトル「テストサイト」 </h1> </div> <div id="navigation"> <ul> <li><a href="index.html">トップページ</a></li> <li><a href="menu2.html">メニュー２</a></li> <li><a href="menu3.html">メニュー３</a></li> <li><a href="menu4.html">メニュー４</a></li> </ul> </div> <div id="content"> <p>テストののページです。</p> <p>上記メニューよりご利用ください。</p> </div> <div id="footer"> Copyright テスト著作権, 2012 </div> </div> </body> </html> --------------------------------------------------------------------------------------------------------------------------- common.css --------------------------------------------------------------------------------------------------------------------------- @charset "UTF-8"; #container { margin: 0 auto; width: 600px; background:#fff; } #header { background:#ccc; padding: 20px; } #header h1 { margin: 0; font-size: 120%;} #navigation { float: left; width: 600px; background:#333; } #navigation ul { margin: 0; padding: 0; } #navigation ul li { list-style-type: none; display: inline; } #navigation li a { display: block; float: left; padding: 5px 10px; color:#fff; text-decoration: none; border-right: 1px double#fff; } #navigation li a:hover { background:#383; } #content { clear: left; padding: 20px; } #content h2 { color:#000; font-size: 160%; margin: 0 0 .5em; } #content h3 { font-size: 110%; } #footer { background:#ccc; text-align: right; padding: 20px; height: 1%; } -------------------------------------------------------------------------- 以上が内容になります。 どうかよろしくお願いします。
- ベストアンサー
- HTML
- ブログ内の空白を削除したい
ブログ内のタイトル画像とその下のラインの間の空白が1行程度空いており、その空白をどうしても埋めたいのですが、テンプレートをいじってもなかなか上手く行きません。テンプレートは以下のような記述になっています。是非ご教授ください。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://※※.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=euc-jp"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="content-script-type" content="text/javascript"> <link href="<%css_link>" type="text/css" rel="stylesheet"> <link rel="alternate" type="application/rss+xml" title="RSS" href="<%url>?xml"> <title><%blog_name> <%sub_title></title> </head> <body> <!--アクセス解析タグ ここから--> <script language="JavaScript" src="http://※※※"></script><noscript><div align="right"><a href="http://※※※/" target="_blank">アクセス解析</a></div></noscript> <!--アクセス解析タグ ここまで--> <a name="top"></a> <div class="container"> <!-- ヘッダー部 ここから --> <IMG SRC="http://※※※.jpeg" width="※" height="※" alt="※.jpg" border="0"></a></h1> <div class="banner"> <div class="banner_title"> <h2 class="intro"><%introduction></h2> </div> </div> <!-- ヘッダー部 ここまで --> <!-- 左メニュー ここから -->
- ベストアンサー
- ブログ
