凝ったレイアウトを作りたい人向け:スタイルシート活用講座

このページは、「こういうレイアウトにしたい、と頭に思い描いても、どうやったらそんな記事にできるか分からない」そんな人のために、主にスタイルシートの使い方を中心とした編集方法をまとめたものです。

目次

その前に、最初に読むべき関連項目 文字の色や大きさの指定 divやtableを使ったレイアウト 余白の指定 他の人の記事を参考にしよう 記事作成に役立つ関連項目

その前に、最初に読むべき関連項目

物事には手順があります。まるっきりの初心者だという方は、下の関連項目を読み、「特に凝ってはいないけど基本的な記事なら作れるよ」というレベルになるようにしましょう。

• ニコニコ大百科:記事の編集方法　（「新規記事作成固有の事項について」のところにある表を参考にして、htmlエディタをオフにしても、ある程度は読めるようにしましょう）
• ニコニコ大百科:HTMLタグ一覧　（こういうことができるんだな、くらいには理解しておきましょう。）

文字の色や大きさの指定

この文章は、意味がありません。

<p style="color:#000099; font-weight:bold;
text-align: center; ">この文章は、
<span style="color:#ff0000;font-size:140%;">
意味</span>がありません。</p>

右が上の文字を書くときのソースコードである。

文字色や大きさなどの指定を、段落全体に適用したい場合は<p>の中に「style="～"」を入れる。一部分に適用したい場合は、適用したい範囲を<span>と</span>で囲み、<span>の中に「style="～"」を使う。

文字色

「style="color:#000000;"」を挿入することで、文字色を変更できる。

赤色の濃さ

0、1……9、a……f

薄い←―――→濃い

「000000」の部分はRRGGBBを表している。左2つが赤色、真ん中2つが緑色、右2つが青色を示している。そして「薄い←0、1…8、9、a…f→濃い」となっているので、純粋な赤色は「#ff0000」で作ることができる。

なお、通常の（指定なしの）文字色は「#303030」、リンクしている箇所の青色の文字色は「#0066cc」、１文字の記事へのリンク(自動リンクありの場合)の文字色は「#444」である。

こちらのページを参照すると、イメージに近い色を作れるだろう。
http://www.iis.u-tokyo.ac.jp/~furukawa/bgcolor2.html
http://www.analogmonkey.com/tutorial.html

文字の大きさ

「style="font-size:100%;"」を挿入することで、文字の大きさを変更できる。

いうまでもなく「100%」の部分を変更すればよいだけである。%のかわりに「large」、「small」としてもよい。

文字の太さ

「style="font-weight:bold;"」を挿入することで、文字を太くすることができる。

一部分だけを太くしたい場合は「style」は使わずに、太くしたい箇所を<strong>と</strong>で囲む方が一般的。

文字の行間の幅

「style="line-height:1.35em;"」を挿入することで、文字の行間幅を調整することができる。

「1.35em」が標準の行間幅、「0.9em」が行間幅無し、「1.7em」等、標準より大きな値を指定すると行間幅が広めとなる。

文字の位置（横方向）

「style="text-align:center;"」を挿入することで、文字の横方向の配置を指定することができる。

「center」が中央寄せ、「left」が左寄り、「right」が右寄りとなる。

文字の位置（縦方向）

下記のtableを使用したレイアウトでは「style="vertical-align:middle;"」を挿入することで、文字の縦方向の配置を指定することができる。

「top」が上寄り、「middle」が中央寄せ、「bottom」が下寄りとなる。

[目次へ]

divやtableを使ったレイアウト

	愛の形は人それぞれだよね
眉毛	年齢：11-12歳 性別：女 出身：埼玉県上尾市

ニコニコ大百科素材集より♥

上や右のようなレイアウトを作るには、<div>か<table>タグを使うこととなる。

上のように、表など多段構成のものを作りたいときは<table>、通常は<div>を使うといいだろう。

<div>でボックスを作ろう

箱の例

<div style="width:250px; height:110px;
margin: auto; border:#1111cc 2px solid;
background-color:#6b8e23;">
<p>箱の例</p></div>

上のようなボックスの作り方を、右のソースコードを基に学んでいこう。

以下の記述は基本的に<table>タグでも通用する。

ボックスの大きさ

「style="width:100px; height:100px;"」で、ボックスの大きさを指定する。 指定のない場合は自動的に大きさが調整される。ここの値を適当に指定するとレイアウト崩壊を招くので注意しよう。

100pxの部分は大きさを示す。pxの他に使える単位として「em」（フォントサイズを基準とした単位）があり、閲覧者の文字の大きさに連動してボックスが大きくなる。
ニコニコ大百科では横の大きさが固定されている（720pxより少し大きいくらい）ので、状況に応じてpxとemを使い分けると崩れにくいレイアウトが 作れるだろう。（通常の文字サイズでは1em=15pxくらい？）

widthについては、先に述べたようにニコニコ大百科の横幅は720pxほどで固定されているので、pxで指定するのが一番無難と思われる。

heightについては、指定せずに自動的に調整してもらうのが無難。指定する場合は、pxよりもemを使ったほうが環境に応じて大きさを変えてくれるので崩れにくくなる。また、万が一ボックス内に文字が入りきらなかった場合を考慮して、下で述べるoverflow指定によるスクロール機能を付けたほうがいいかもしれない。

ボックスの位置

「style="margin:auto;"」と入れると、ボックスは自動的に真ん中の位置に置かれる。

「style="float:right;"」と入れると、ボックスは右側に詰めた位置に置かれる。右に多少の余白がほしいときはmarginを使えばよい。
ちなみにお絵カキコを右側に貼り付けたい場合も「style="float:right;"」を使うとよい。

divを使った場合、通常他のボックスや文字などを横に並べることはできないが、「style="float:left;"」を使うと横に並べられる。が、挙動がおかしくなりやすいので使用には注意すること。

ボックスのボーダーライン

「style="border:#000000 2px solid;"」で、外側のボーダーラインの書き方を指定する。入力する値が三つあるが、順番は特にバラバラで構わない。

「#000000」の部分で、ボーダーラインの色を指定する。

「2px」の部分で、ボーダーラインの太さを指定する。「thin」（細い）、「medium」（普通）での指定も可。

「solid」の部分で、ボーダーラインの形状を指定する。基本はsolidで十分だが、破線など変わった形状にしたいなら、ニコニコ大百科:HTMLタグ一覧のスタイルシートの項を参照。

不要の場合は「border:none;」で表示させなくできる。

「border-top」のように入力することで、上下左右それぞれに違った値を指定することもできる。top以外には、bottom、left、rightを使用する。

背景色・背景画像

「style="background-color:#000000;"」で、背景色を指定する。

また、「style="background-image: url(https://dic.nicovideo.jp/oekaki/146663.png);"」で、背景画像を指定することもできる。（使用例　らき☆すた、M+FONTS）

記事全体の背景色を変えたいときは、記事の最初に<div style="background-color:#000000;">を入れ、記事の最後に</div>を入れればよい。

スクロール機能をつける

「style="overflow:auto;"」によって、<div>の指定された大きさの中に内容が入りきらない場合にはみ出る部分をどうするかを指定することができる。

値をautoにすることで、ボックスの指定された枠内に文字や絵が入りきらない場合は、自動的にスクロール機能を付けてくれる。大量の文章やお絵カキコを一見すっきりと整理することができるように見える。

しかし、読む側としてはスクロールが、カーソルが<div>ボックスの中に入った時に止まってしまう(中の要素がスクロールする)、大画面のモニターを用意しても<div>ボックスの縦幅に視野が制約されて見づらいなどのデメリットもある。掲載内容の厳選・ページ内リンクによる目次の作成・記事の分割など、他の方法と比較して一番読みやすくなるように記事を作成して、自己満足に終わらないように注意する必要がある。

tableで3列2段のボックスをつくる

秋田書店 週刊少年チャンピオン	集英社 週刊少年ジャンプ	小学館 週刊少年サンデー
講談社 週刊少年マガジン	日本文芸社 週刊漫画ゴラク	実業之日本社 週刊漫画サンデー

<table style="margin: auto; width: 680px; border: #8cc700 2px solid;">
  <tbody>
   <tr>
    <td><h3>秋田書店</h3> <ul><li>週刊少年チャンピオン</li></ul>
    </td>
    <td> <h3>集英社</h3><ul><li>週刊少年ジャンプ</li></ul>
    </td>
    <td><h3>小学館</h3><ul><li>週刊少年サンデー</li></ul>
    </td>
  </tr>
  <tr>
    <td> <h3>講談社</h3><ul><li>週刊少年マガジン</li></ul>
    </td>
    <td><h3>日本文芸社</h3><ul><li>週刊漫画ゴラク</li></ul>
    </td>
    <td><h3> 実業之日本社</h3><ul><li>週刊漫画サンデー</li></ul>
    </td>
  </tr>
 </tbody>
</table>

テーブルを作るときは<table><tbody><tr><td>の四つのタグが必須となる。

ソースコードを見ればわかるように、<tr></tr>のセットが2つあれば2段組みの表となる。

そして<tr></tr>の間に<td></td>が3つあれば3列の表が作れる。

styleについては、テーブル全体に関することは<table>に、段全体に関することは<tr>に、一つ一つのセルに関することは<td>に入れるようにすればよい。

[目次へ]

余白の指定

凝った記事を作ろうとすると、どうしてもここに余白ができないと困るという場合が生じることがある。そこで「margin」、「padding」、「clear」を使った余白の作りかたを紹介する。

かぶき者。『傾奇者』と書く。『傾く』とは異風の姿形を好み、異様な振る舞いや突飛な行動を愛することをさす。 現代のものに例えれば、権力者にとってはめざわりな『ツッパリ』ともいえるが、真の傾奇者とは己の掟のために、まさに命を賭した。 そして世は戦国時代。ここに天下一の傾奇者がいた！！その男の名は――

前田慶次。

この漫画のチ○チ○ネタの多さは異常

↑だが、それがいい。

例1　余白を作らなかった場合

 

かぶき者。『傾奇者』と書く。『傾く』とは異風の姿形を好み、異様な振る舞いや突飛な行動を愛することをさす。 現代のものに例えれば、権力者にとってはめざわりな『ツッパリ』ともいえるが、真の傾奇者とは己の掟のために、まさに命を賭した。 そして世は戦国時代。ここに天下一の傾奇者がいた！！その男の名は――

前田慶次。

この漫画のチ○チ○ネタの多さは異常

↑だが、それがいい。

例2　margin、padding、clearを使って余白を作った場合

<p><img width="220" height="250" style="float: right; margin-left: 40px;" src="https://dic.nicovideo.jp/oekaki/59540.png" /></p>

<p style="padding-top: 8px;">かぶき者。『傾奇者』と書く。『傾く』とは異風の姿形を好み、異様な
振る舞いや突飛な行動を愛することをさす。 現代のものに例えれば、権力者にとってはめざわりな『ツ
ッパリ』ともいえるが、真の傾奇者とは己の掟のために、まさに命を賭した。 そして世は戦国時代。こ
こに天下一の傾奇者がいた！！その男の名は――</p>

<p style="color: #ff0000; font-size: 200%; font-weight: bold; padding-top: 9px;
padding-left: 19px;">前田慶次。</p>

<h2 style=" clear:both;">この漫画のチ○チ○ネタの多さは異常</h2>
<p>↑だが、それがいい。</p>

例2のソースコード。これからmargin、padding、clearを除いたのが例1。

marginとpadding

「style="margin:10px;"」を挿入することで、要素の外側の余白を変更できる。（要素＝<p>、<h2>、<div>なんかのことね）

「style="padding:10px;"」を挿入することで、要素の内側の余白を変更できる。

左下のグレーゾーンが「magin」のイメージで、右下が「padding」のイメージだが、イメージ通りの挙動にならない場合もある。特に、<p>タグで外側に余白を作りたいときは「margin」では上手く機能してくれず、「padding」を使うこととなる。

 

 

 

細かな設定の仕方

以下はmarginだけでなくpaddingにも共通する記述である。

margin-topとすることで、上側のみの余白指定となる。top以外にはbottom、left、rightを使用する。
わざわざtopなどを書かなくても「style="margin:10px 5px 7px 0px;"」とすることで、上10px、右5px、下7px、左0pxの余白を作ることができる。

clear

floatを使うことで、お絵カキコ<img>やボックス<div>の横に別の要素を並べられるようになる（回り込みという）が、「style="clear:both;"」により回り込みを解除して、以降の文章などを、float指定したお絵カキコやボックスの下側にくるようにできる。

余白、div、tableを多用したときの注意点

marginで余白を作ったり、div、tableを多用すると、違う環境（特にフォントの種類とサイズ）によってヤバイくらいにレイアウトが崩壊してしまったりする。

pxとemの使い分けやoverflow指定などをうまく使って、違った環境の人にも優しい記事を作ることが重要となる。最低でもwindowsユーザーなら、MS P Gothicとメイリオの二種類のフォントで確認するようにしよう。

[目次へ]

他の人の記事を参考にしよう

ニコニコ大百科では、記事の下にある「記事編集」を押すことで、記事のソースコードを見ることができます。「投稿する」さえ押さなければ、一部を改変したり削除しても何ら問題は生じません。他の方の作った記事を分析して、自身のレベルアップに努めましょう。

記事作成に役立つ関連項目

• ニコニコ大百科:HTMLテンプレート集
• ニコニコ大百科:HTML各要素のデフォルトCSS
• ニコニコ大百科:お知らせ表示の一覧
• ニコニコ大百科:ユーザーボックスの一覧　（ユーザー記事向け）
• Template:動画記事ナビゲーションテンプレート　（動画記事向け）
• ブラウザによるレイアウトの違い
• ニコニコ大百科:素材集
• ショートカットキーの一覧