• ベストアンサー
※ ChatGPTを利用し、要約された質問です(原文:ブログテンプレート作り CSSで困ったことが・・・)

ブログテンプレート作りで困っていることとは?

このQ&Aのポイント
  • ブログテンプレートを改造中に画面上部に謎の空白ができてしまいました。背景画像の位置指定もうまくいかず、ページトップへのリンクも上手く動作しません。
  • 背景画像の位置指定を最上部にしたいのですが、いくつかのピクセル下から始まってしまいます。また、ページトップへのリンクを押すと背景画像が画面上部まで移動しません。
  • 設定を間違っている可能性がありますが、余白を無くす方法やブログテンプレートを作成する際に便利なソフトウェアについても知りたいです。

質問者が選んだベストアンサー

  • ベストアンサー
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

 !importantの意味知ってて使ってますか??? 著者の最重要宣言---CSS(カスケーディングスタイルシートのカスケーディングは、最も根幹の部分ですから御存知だと思いますが、ユーザーの最重要宣言されたスタイル、著者のスタイルより優先される(ユーザーの酸重要宣言よりは下位)という意味で、特定のページや要素だけスタイルを変えたいときなどに使用します。  例えば、すべてのページの背景はbody{background-image:url(画像1);}と指定してあるが、あるページだけ背景画像を変更したい時に、body{background-image:url(画像1)!important;}とすると、後出のスタイル指定で、同じ詳細度でbody{background-image:url(画像1);}と指定されていても上書きできないと言う意味です。 5 セレクタ( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/selector.html ) 6 プロパティ値とカスケーディング、継承の割り当て( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cascade.html )  は、スタイルシートを覚える時に最初に覚えて完璧に身につけておかなければならない要所です。 html,body{margin:0;padding:0;} body{background:url() center top no-repeat;} だけですむはずです。 HTMLは <body id="TOP">あるいは、<div class="header" id="TOP"> とでもしてけばよい。 >「かんたん配置モード」と似た雰囲気で制作できるソフトってないのでしょうか?  最悪中の最悪なソフトを上げられても困りますね。  ホームページビルダーは、ワープロやDTPのようにデザインのためにHTMLを作成してしまうからプロから嫌われるのですよ。  HTMLは、タグを使って文書構造をマークアップする物、スタイルシートはその文書構造を利用して、プレゼンテーションを指定していくものです。(構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 ))  下記に同様のデザインになるHTML/CSSをテンプレート代わりにあげておきますが、これだったらあなたでもデザインの変更はできるでしょう。★HTMLがきちんとできていないとダメだということ★  こんな、分かりやすいシンプルな物になるのです。 ★タブは_に置換してあるので戻す。 ★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.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"> _<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" media="print"> <!-- html,body{margin:0 auto;} div.header,/* ヘッダ部分 */ div.section,/* 本文 */ div.footer{/* フッタ */ _width:80%;min-width:630px;max-width:900px;/* 幅(最大,最小) */ _margin:0 auto;padding:5px; } div.header{/* ヘッダの背景 */ background:url(./images/00.png) top center no-repeat; background-size:100%; /* CSS3 */ } div.section{ _position:relative;min-height:400px; } div.section h2,/* 本文(section)中のh2 */ div.section div.section{/* 本文(section)中のサブセクション */ _width:auto;min-width:0; _margin:5px 200px; } div.section div.section{ _min-height:200px; } div.section div.nav,/* 本文中のナビ */ div.section div.aside{/* 本文中の補足(aside) */ _width:190px;height:100%; _position:absolute;top:0; } div.section div.nav{left:0;} div.section div.aside{right:0;} /* わかりやすいように色分け */ div.header{background-color:yellow;} div.section{background-color:aqua;} div.section div.section{background-color:white;} div.section div.nav{background-color:lime;} div.section div.aside{background-color:fuchsia} div.footer{background-color:silver;} --> _</style> </head> <body> _<div class="header" id="TOP"> __<h1>タイトル</h1> __<p>このページでは・・・・</p> _</div> _<div class="section"> __<h2>見出し</h2> __<div class="section" id="SECTION1"> ___<h3>章タイトル</h3> ___<p>・・・</p> __</div> __<div class="section" id="SECTION2"> ___<h3>章タイトル</h3> ___<p>・・・</p> __</div> __<div class="nav"> ___<h3>ナビ</h3> ___<ol> ____<li><a href="#TOP">TOP</a></li> ____<li><a href="#SECTION1">section1</a></li> ____<li><a href="#SECTION2">secion2</a></li> ____<li><a href="#FOOT">Footer</a></li> ___</ol> __</div> __<div class="aside"> ___<h3>補足</h3> __</div> _</div> _<div class="footer" id="FOOT"> __<h2>文書情報</h2> __<dl class="documentHistry"> ___<dt id="FIRST-PUBLISHED">First Published</dt> ___<dd>2012-08-10</dd> __</dl> __<address>&copy; ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> _</div> </body> </html>

situmonyoudesu
質問者

お礼

何から何まで回答して頂き本当にありがとうございます! ド素人なのでビルダーがいいと思ってしまっていましたが プロの方から見たらそういう訳ではないのですね; 前述の通り無知もいいところなので!importantどころかCSSの意味も理解しておりませんでした; やっていることも何もかもどこかにあったものをコピーペーストしただけという有り様でした。 でもそんな中丁寧に解説していただけた上に活用できそうなCSSまで載せて頂けるとは・・・非常に助かります! 何度も読み返して理解度を高めた上で、もう一度再チャレンジしてみようと思います!

すると、全ての回答が全文表示されます。

関連するQ&A