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

編集  

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

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

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

文字の色や大きさの指定

この文章は、意味がありません。
<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……9a……f
薄い←―――→濃い

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

なお、通常の(定なしの)文字色は「#303030」、リンクしている箇所の青色文字色は「#0066cc」、1文字の記事へのリンク(自動リンクありの場合)の文字色は「#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を使ったレイアウト

の形は人それぞれだよね
眉毛

上や右のようなレイアウトを作るには、<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以外には、bottomleftrightを使用する。

背景色・背景画像

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

また、「style="background-image: url(http://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 marginpaddingclearを使って余白を作った場合
<p><img width="220" height="250" style="float: right; margin-left: 40px;" src="http://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のソースコード。これからmarginpaddingclearを除いたのが例1。

marginとpadding

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

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

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

 

 

 

細かな設定の仕方

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

margin-topとすることで、上側のみの余白定となる。top以外にはbottomleftrightを使用する。
わざわざ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 リビジョン番号: 2156273
読み:コッタレイアウトヲツクリタイヒトムケスタイルシートカツヨウコウザ
初版作成日: 10/02/22 20:38 ◆ 最終更新日: 15/02/04 22:36
編集内容についての説明/コメント: 操作ミスしたところを修正
記事編集 / 編集履歴を閲覧
このエントリーをはてなブックマークに追加

この記事の掲示板に最近描かれたお絵カキコ

お絵カキコがありません

この記事の掲示板に最近投稿されたピコカキコ

ピコカキコがありません

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

37 : ななしのよっしん :2012/09/29(土) 13:26:49 ID: BK2LWltqiO
>>36
ちょっと自分のページ実験してみたんだけど(ブラウザFireFox

記事の先頭から最後尾を全に<div style="overflow: auto;">と</div>で囲ってやって(記事の途中じゃダメっぽい)、
記事の一部に、ダミーデータとして<pre>タグの中身にものすごく横長のテキスト(これは何でもよい)を混ぜてやったら、一応は横長画面+横スクロールバーの付いたページが出できた・・・あんまりきれいなやり方じゃないけど・・・
38 : ななしのよっしん :2012/09/29(土) 18:52:19 ID: Kms2wD7Y5T
>>36>>37
<div>とか<table>で囲むとかしないで、そもそも<pre>タグ自体にoverflow: auto;をつけてやれば問題ないよ

<pre style="margin: 1em; overflow: auto; font-size: 16px; line-height: 18px; font-family: Mona,IPAMonaPGothic,'IPA モナー Pゴシック','MS PGothic AA','MS PGothic','MSゴシック',sans-serif;">

↑こんな感じで
39 : ななしのよっしん :2012/11/19(月) 09:01:25 ID: fY8fRJE/S2
誤)MS P Gothic
正)MS PGothic
40 : ななしのよっしん :2013/09/04(水) 22:34:58 ID: j3orCFl0Za
文字自体を傾け(≒回転)させたり、縦や横に引き延ばすことはできない?
41 : ななしのよっしん :2013/09/05(木) 10:26:29 ID: nZQdSvl3aM
>>40
そういうのはスタイルシート定にいので理。出来るのは斜体(イタリック)くらい。
どうしてもやりたいのなら回転したり引き伸ばした状態の文字お絵カキコで描いて
それを並べるとか。
42 : ななしのよっしん :2013/10/05(土) 03:34:27 ID: j3orCFl0Za
>>41
ぐぬぬ…やはり理か。回答有難うございます
43 : ななしのよっしん :2013/11/06(水) 20:17:48 ID: sBenH1gZuo
麻雀牌を1個1個お絵カキコにして記事に使ってる人を見つけたときはほめるボタン連打しましたね・・・
44 : ななしのよっしん :2015/01/08(木) 04:05:05 ID: xOXX9FMJS6
ちょっと分からない所があるのだが…
見出しタイトル黄色い点を小さなお絵カキコに変えてる編集者がいるのだがあれってどうやるんです?
45 : ななしのよっしん :2015/01/21(水) 20:23:36 ID: rSm7RLxmAx
>>44
見出しを変えればできるよ。
<h2 style="background: url('/oekaki/754345.png') no-repeat 5px 0px; text-indent: 10px;">←相生旗の場合</h2>
お絵カキコの記事内参照用URL(上の754345のところ)が分かればできるはず。
46 : ななしのよっしん :2015/02/05(木) 10:32:47 ID: /SyAmEh7V7
>>背景画像
M+FONTSの記事は背景画像が変更されて、ぱっと見真っ白背景画像は定されてるが色調がすごく薄い)なので、例としては適当じゃないかも
ニコニコニューストピックス
電ファミwiki
  JASRAC許諾番号: 9013388001Y45123
  NexTone許諾番号: ID000001829