(有)未来検索ブラジルが運営するあらゆる言葉についての記事を閲覧・編集したり、コメントをしたりするサイトです。

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

編集 Tweet

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

その前に、最初に読むべき関連項目
文字の色や大きさの指定
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」の部分はRRGG BBを表している。左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」、「sm all」としてもよい。

文字の太さ

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

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

文字の位置

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

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

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以外には、bot tom、left、rightを使用する。

背景色・背景画像

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

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

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

スクロール機能をつける

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

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

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="http://dic.nicovideo.jp/oek aki/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以外にはbot tom、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とメイリオの二種類のフォントで確認するようにしよう。

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

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

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

携帯版URL:
http://dic.nicomoba.jp/k/a/%E5%87%9D%E3%81%A3%E3%81%9F%E3%83%AC%E3%82%A4%E3%82%A2%E3%82%A6%E3%83%88%E3%82%92%E4%BD%9C%E3%82%8A%E3%81%9F%E3%81%84%E4%BA%BA%E5%90%91%E3%81%91%3A%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB%E3%82%B7%E3%83%BC%E3%83%88%E6%B4%BB%E7%94%A8%E8%AC%9B%E5%BA%A7

ページ番号: 4291040 リビジョン番号: 1152835
読み：コッタレイアウトヲツクリタイヒトムケスタイルシートカツヨウコウザ
初版作成日: 10/02/22 20:38 ◆ 最終更新日: 11/04/24 15:29
編集内容についての説明/コメント: 文字色について加筆。
記事編集 / 編集履歴を閲覧 / Twitterで紹介

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

21 ：ななしのよっしん：2011/08/03(水) 18:59:56 ID: LMcbbzpqrR: オススメ記事おめでとう
 大百科の中でもベスト3に入るぐらいよく見る記事でいつも参考にしています

ただ、オススメ記事に選ばれたのはちょっと意外だった
やっぱり、一部の人向けの記事なのは事実だし
22 ：ななしのよっしん：2011/08/07(日) 11:31:03 ID: rSm7RLxmAx: オススメおめ
万人向けじゃないかもしれないけど、価値のある記事だと思うよ。
23 ：ななしのよっしん：2011/08/07(日) 16:09:17 ID: R5RV8diBD2: アンカーを入れた位置にブラウザの表示基準が強制移動しないようにするにはどうしたら……orz

別々ボックスを縦に並べている状態で、上ボックスの選択を下ボックスに反映（アンカー使用）したときに表示位置を選択前の位置に固定しておきたいのですが……
…………上下を逆にすればあっさり解決するような気はするけど、できれば上から下に流したいです。
24 ：ななしのよっしん：2011/08/08(月) 06:56:48 ID: jJesozGJQ2: お勧め記事おめでと～
25 ：ななしのよっしん：2011/08/08(月) 08:42:32 ID: 6J0cV6dc4z: 実際この記事でいろいろ学んだので、作った人に感謝してますよー。
26 ：ななしのよっしん：2011/09/11(日) 16:27:08 ID: l6OHGmwf+T: 「ヒント」の記事みたいな風にするやり方誰か解説書いてくれないかなー(ﾁﾗｯ
27 ：ななしのよっしん：2011/09/11(日) 19:55:39 ID: Kms2wD7Y5T: >>26
ヒント
記事全体をstyle="overflow:hidden"の<div>で囲む
overflow:hiddenはスクロールバーが表示されないので画面移動できない
記事の移動はアンカーを貼る
28 ：ななしのよっしん：2011/09/11(日) 20:22:15 ID: Kms2wD7Y5T: >>26
>>27
補足
「overflow」は<p>や<div>などのボックス要素に対して、
中のインライン要素がはみ出る場合にどう処理するか、を決めるプロパティ。
「hidden」は「はみ出す部分は表示させない」という処理を行う。
その性質上、ボックス要素にスクロールバーは表示されない。
【注意】
ボックス要素からはみ出す、という結果を引き出させるためには
そのボックス要素をサイズ指定してやる必要があるので注意。
（サイズ指定しないと、中身のインライン要素にあわせて大きさを変えるため
　そもそも「はみ出す」という結果が出てこない）
29 ：ななしのよっしん：2011/09/13(火) 19:53:32 ID: tNpk2BMt3I: 関連動画一つ一つに作者名を付けるにはどうすればいいんだろう・・・
30 ：ななしのよっしん：2011/09/21(水) 14:35:04 ID: sBenH1gZuo: >>28
それ最初に思いついた人すごいと思うｗ普通そんなレイアウトにしないし。

ページトップへ戻る