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

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

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

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

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

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

文字の色や大きさの指定

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

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

文字色

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

「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>でボックスを作ろう

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

以下の記述は基本的に<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><tbody><tr><td>の四つのタグが必須となる。

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

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

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

[目次へ]

余白の指定

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

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:動画記事ナビゲーションテンプレート　（動画記事向け）
• ブラウザによるレイアウトの違い
• ニコニコ大百科:素材集
• ショートカットキーの一覧

親記事

• ニコニコ大百科:編集者向けのページ

子記事

• なし

兄弟記事

• テスト記事
• ニコニコ大百科での記事の書き方
• ニコニコ大百科:HTMLタグ一覧
• 編集履歴
• ニコニコ大百科:編集者一覧
• ニコニコ大百科:記事の編集方法
• ニコニコ大百科:Wikipediaとの相違点
• ニコニコ大百科:HTMLテンプレート集

▶もっと見る

• ニコニコ大百科:HTMLエディタヘルプ
• ニコニコ大百科:素材集
• リビジョン番号
• ページ番号
• ニコニコ大百科:お知らせ表示の一覧
• ニコニコ大百科:ユーザーボックスの一覧
• 編集競合
• 記事編集初心者へ
• 編集合戦
• ニコニコ大百科:編集時のマナー
• 記事名変更機能
• 白紙化
• まだ単語記事が作られていないポピュラーなタグ一覧
• 作品テンプレートの一覧
• ニコニコ大百科:テンプレートボックス
• ニコニコ大百科:∞
• ニコニコ大百科:★
• ニコニコ大百科:Twitter引用
• ニコニコ大百科:右カラム
• 編集テスト
• ニコニコ大百科:◇
• ニコニコ大百科:初版作成日
• ニコニコ大百科:パンくずリスト
• ニコニコ大百科:最終更新日
• 記事編集依頼の一覧

キーワード「凝ったレイアウトを作りたい人向け:スタイルシート活用講座」でニコニコ動画を検索

タグ「凝ったレイアウトを作りたい人向け:スタイルシート活用講座」でニコニコ動画を検索