うーん・・・

はてなブログでのCSSの行間、左へ寄せる方法について

締切済

質問者：まろきち
質問日時：2015/08/14 20:02
回答数：2件

ど素人ではてなブログでカスタマイズをしていますが、どうしてもうまくいきません。
大元のデザインはテーマストアから持ってきたものです。
どうか教えてください。

●【質問その１】行間がうまく調整できない

行間を詰めようとして調整しています。一応反映はされました。
しかし、今度は改行すると文字が重なります。
反映されたのを見ると、行の上半分と下半分の間隔が統一されてないのです。

下半分が重なってしまうので、上半分を調整するために line-heightの数値をいじる。
　↓
下半分は重ならなくなったけど、上半分がすごくひらいてしまう。

この繰り返しです。
line-heightの単位（em、％）もつけたりしてみましたがうまくできませんでした。
下記がコードです。

.entry-content {
font-size: 15px;
line-height:1.5;
color: #000000;
}

margin（？）とかpadding（？）が必要なのでしょうか？

●【質問その２】レイアウトが動かせない

記事部分の幅を広くとりなおかつをもう少し左へ寄せて、
全体の印象を広くもたせようと考えてます。

そこで、まずと「#content-inner」と「#wrapper」の数値をいじりました。
反映はされました。幅は広くなりました。
今度は左へ寄せようとして「#wrapper」にmarginを付けましたが、
何も反映されませんでした。
下記の通りです。

#content-inner {
　width: 1300px;
}

#wrapper{
　width: 1020px;
　margin:0;
}

また、「#content-inner」の範囲を確認しようと思って、一時的にborderを付けて
確認をしてみましたが、なぜか反映されていませんでした。

なお、「#wrapper」のborderは反映されましたが、なぜか「（※）box2（右メニュー）」部分まで
達していました。
（※　便宜上、「box2」と表記していますが実際は「#box2-inner」で作っています）

「#content-inner」の範囲には「#wrapper」と「box2」が入っているんじゃないの？
なぜ「#wrapper」の範囲にまで「box2」が入っているの？？
素人は…混乱しています。

ほかにもmargin-leftとか letter-spacingとか付けたりしていましたが、
ピクリとも動かず。
何がいけないのか…もう…
お手上げです。

詳しい方、教えてください。宜しくお願いします！

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： oshietejoe
回答日時：2015/08/21 22:21

CSSの基本：

まず、ブラウザごとにマージンやパディングのデフォルト値には違いがありますので、最初にリセットしないとすべてのブラウザに共通したCSSの記述ができません。（ほんとうはブラウザ毎にCSSを切り替えると思いますが書き方によっては同じCSSでも共用できます。）
http://ps60.blog109.fc2.com/blog-entry-31.html

IDとCLASSの使い方を知ってください。

次に、継承について調べてください。ネストになっている親の要素を継承するなどのことです。ここ結構ネックです。

ネストすれば、同じ名前のHTMLタグに別個のCSSを指定できます。
.ul
#wrapper #side .ul
とするとこれらは別物になります。最後に指定したものが有効です。
#wrapper #side .ul
.ul
とすると、まずいです。#wrapper #side .ul の意味はなくなります。

次に、ブロックレベル要素とインライン要素の違いを理解していないとCSSは使いこなせません。
http://mozilla.gr.jp/standards/webtips0015.html
インライン要素をブロック化することもできます。
http://webdesignrecipes.com/css-blocklevel-eleme …

このほかにもいろいろな注意点があります。

いきなりCSSでやろうとしても混乱しますので、TEST用のHTMLとCSSで動きを実験してある程度理解してからやったほうがいいとおもいます。毎日やっていれば２Wくらいでなんとかできるようになります。
（２Wでできればすごいですよ。）

ブラウザごとに若干の違いがあると思いますので各ブラウザで表示のチェックをします。
IEのデベロップメントツールバーというプラグインもあります。
HTMLやCSSの確認ができます。FireFoxにもあります。

- 0
- 件

通報する

No.1

回答者： ORUKA1951
回答日時：2015/08/15 11:40

詳細度は確認されましたか？クラスセレクタ/属性セレクタは　0 0 1 0 ですよ。

一意セレクタは、0 1 0 0 です。同じ詳細度だったら後出で上書きされます。またline-heightやfont-sizeについは継承されますが、marginf継承されません。まあここいらは常識的--というか期待通りの仕様になっています。
　はてなブログも、そのスタイルシートも酷い物ですね。そのため、私は使っていません。
＞詳しい方、教えてください。
　詳しい人は手を出さないテンプレートですので、無理でしょう。
1) HTML+CSSで作成する上で最も重要考え方は、今から15年以上前に勧告されたHTML4.01の『構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』なのですよ。
　すなわち、『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』であって、デザインのためではない!!!。よって「content-innerとかwrapperのうなidはつけません。
　もちろん、スタイルシートは文書構造に基づきますから、#content-innerのような一意セレクタにすると、詳細度が高くなりすぎて、しかもページ内に一箇所しか存在できないために煩雑になります。

＞●【質問その１】行間がうまく調整できない
　行間と言う言葉は表などにおいて行(tr)の間隔とかであって、他に使うと意味が分からなくなります。改行<br>は通常のHTMLには存在しません。段落間でしたらmarginで指定します。paddingも似た効果がありますが意味が異なります。
　この場合は、「行端で自動改行されたときに文字が重なる。」と言う意味でしょう。なら、line-height:1.6em;とかでよいはずです。1.5という数値だけの単位は使わないです。使うとpxと判断されます。
＞●【質問その２】レイアウトが動かせない
　後述のサンプル参照
　ブログ出力がちゃんとしたHTML出力してくれていれば、こんなに簡単に指定できるし、デザインのためのdivもないので、メンテナンスもとても楽になる。

　開発されているなら、firefoxを当然使われていると思いますが、そのアドオン Firebug( https://addons.mozilla.org/ja/firefox/addon/fire … )を使うととても判りやすいです。

※ きちんとHTMLやCSSの仕様書を読んで習得していくのが最も早道です。基礎が出来ていないのにつまみ食いをしてもうまくいくわけありません。
　

サンプル(ウェブ標準　HTML4.01+CSS2.1)
★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html )
　のDATA入力(右上)で検証済み
★タブは＿に置換してあるので戻す。
<!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>
＿＿<p>このページでは・・・・</p>
＿</div>
＿<div class="section">
＿＿<h2>見出し</h2>
＿＿<p>本文はsection、HTML5では<header></header>ヘッダ<section>本文</section>のようになる。</p>
＿＿<div class="section">
＿＿＿<h3>項見出し</h3>
＿＿＿<p>本文項記事</p>
＿＿＿<p>sectionの階層でレベルが判断される。</p>
＿＿＿<p>記事部分の幅を広くとりなおかつをもう少し左へ寄せて、全体の印象を広くもたせようと考えてます。
</p>
＿＿</div>
＿＿<div class="nav">
＿＿＿<h3>このページの目次</h3>
＿＿</div>
＿＿<div class="aside">
＿＿＿<h3>関連記事</h3>
＿＿＿<p>
＿＿＿＿本文と直接関係ない記事
＿＿＿</p>
＿＿</div>
＿</div>
＿<div class="footer">
＿＿<h2>文書情報</h2>
＿＿<dl class="documentHistry">
＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt>
＿＿＿<dd>2013-03-03</dd>
＿＿</dl>
＿</div>
</body>
</html>