このページは、「こういうレイアウトにしたい、と頭に思い描いても、どうやったらそんな記事にできるか分からない」そんな人のために、主にスタイルシートの使い方を中心とした編集方法をまとめたものです。
目次 |
物事には手順があります。まるっきりの初心者だという方は、下の関連項目を読み、「特に凝ってはいないけど基本的な記事なら作れるよ」というレベルになるようにしましょう。
この文章は、意味がありません。 |
文字色や大きさなどの指定を、段落全体に適用したい場合は<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」、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>タグを使うこととなる。
上のように、表など多段構成のものを作りたいときは<table>、通常は<div>を使うといいだろう。
箱の例
上のようなボックスの作り方を、右のソースコードを基に学んでいこう。
「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;"」で、外側のボーダーラインの書き方を指定する。入力する値が三つあるが、順番は特にバラバラで構わない。
「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><tbody><tr><td>の四つのタグが必須となる。
ソースコードを見ればわかるように、<tr></tr>のセットが2つあれば2段組みの表となる。
そして<tr></tr>の間に<td></td>が3つあれば3列の表が作れる。
styleについては、テーブル全体に関することは<table>に、段全体に関することは<tr>に、一つ一つのセルに関することは<td>に入れるようにすればよい。
[目次へ]
凝った記事を作ろうとすると、どうしてもここに余白ができないと困るという場合が生じることがある。そこで「margin」、「padding」、「clear」を使った余白の作りかたを紹介する。
かぶき者。『傾奇者』と書く。『傾く』とは異風の姿形を好み、異様な振る舞いや突飛な行動を愛することをさす。 現代のものに例えれば、権力者にとってはめざわりな『ツッパリ』ともいえるが、真の傾奇者とは己の掟のために、まさに命を賭した。 そして世は戦国時代。ここに天下一の傾奇者がいた!!その男の名は――
前田慶次。
↑だが、それがいい。
かぶき者。『傾奇者』と書く。『傾く』とは異風の姿形を好み、異様な振る舞いや突飛な行動を愛することをさす。 現代のものに例えれば、権力者にとってはめざわりな『ツッパリ』ともいえるが、真の傾奇者とは己の掟のために、まさに命を賭した。 そして世は戦国時代。ここに天下一の傾奇者がいた!!その男の名は――
前田慶次。
↑だが、それがいい。
「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の余白を作ることができる。
floatを使うことで、お絵カキコ<img>やボックス<div>の横に別の要素を並べられるようになる(回り込みという)が、「style="clear:both;"」により回り込みを解除して、以降の文章などを、float指定したお絵カキコやボックスの下側にくるようにできる。
marginで余白を作ったり、div、tableを多用すると、違う環境(特にフォントの種類とサイズ)によってヤバイくらいにレイアウトが崩壊してしまったりする。
pxとemの使い分けやoverflow指定などをうまく使って、違った環境の人にも優しい記事を作ることが重要となる。最低でもwindowsユーザーなら、MS P Gothicとメイリオの二種類のフォントで確認するようにしよう。
[目次へ]
ニコニコ大百科では、記事の下にある「記事編集」を押すことで、記事のソースコードを見ることができます。「投稿する」さえ押さなければ、一部を改変したり削除しても何ら問題は生じません。他の方の作った記事を分析して、自身のレベルアップに努めましょう。
▶もっと見る
掲示板
55 ななしのよっしん
2022/05/13(金) 22:44:53 ID: Kms2wD7Y5T
56 ななしのよっしん
2022/08/28(日) 01:41:57 ID: VnIk+sm0Fx
今の大百科で使えるCSSで画像を縦中央に配置する方法ってないのかなあ
marginとかで数値で調節する方法はPCだけならいいけどもスマホ版だと意図した表現にならない、display:flexが使えたら楽なのに…
57 ななしのよっしん
2022/09/05(月) 13:26:42 ID: Kms2wD7Y5T
>>55
難しいとは思うけど、この件、運営に依頼を出してみた。採用されると良いなあ。
急上昇ワード改
最終更新:2024/11/08(金) 00:00
最終更新:2024/11/08(金) 00:00
ウォッチリストに追加しました!
すでにウォッチリストに
入っています。
追加に失敗しました。
ほめた!
ほめるを取消しました。
ほめるに失敗しました。
ほめるの取消しに失敗しました。