文書レイアウト確認ツール

スタイルシート色生成テーブル設定画像・文字サイズ文書レイアウトウインドウオープン設定HTML文字変換サイトマップホーム

スタイルシートの設定で表示文章のイメージが確認できます。
スタイルシートの文字サイズ・色、文字間隔、一行目の字下げ、行間隔、段落間隔などの設定を変更して見易さを確認して下さい。

;左右マージン
( margin:en-right/left )
:行間隔
( line-heigh )
:段落間隔
( margin-top/bottom )
:文字間隔
( letter-spacing )
:インデント
( text-indent )
:文字サイズ
( font-size )
:文字の種類
( font-family )
:文字の色
( color )
:背景の色
( background-color )

枠線を引く

このページでは、段落(P要素)まわりのCSSで重要だと思われる文字サイズ、行間、左右マージン、段落間隔(P要素の下マージン)を実際に変更し、確認できます。
以下、サンプル文章です。
坊っちゃん 夏目漱石
親譲(おやゆず)りの無鉄砲(むてっぽう)で小供の時から損ばかりしている。 小学校に居る時分学校の二階から飛び降りて一週間ほど腰(こし)を抜(ぬ)かした事がある。 なぜそんな無闇(むやみ)をしたと聞く人があるかも知れぬ。別段深い理由でもない。 新築の二階から首を出していたら、同級生の一人が冗談(じょうだん)に、いくら威張(いば)っても、そこから飛び降りる事は出来まい。 弱虫やーい。と囃(はや)したからである。 小使(こづかい)に負ぶさって帰って来た時、おやじが大きな眼(め)をして二階ぐらいから飛び降りて腰を抜かす奴(やつ)があるかと云(い)ったから、この次は抜かさずに飛んで見せますと答えた。
親類のものから西洋製のナイフを貰(もら)って奇麗(きれい)な刃(は)を日に翳(かざ)して、友達(ともだち)に見せていたら、一人が光る事は光るが切れそうもないと云った。 切れぬ事があるか、何でも切ってみせると受け合った。 そんなら君の指を切ってみろと注文したから、何だ指ぐらいこの通りだと右の手の親指の甲(こう)をはすに切り込(こ)んだ。 幸(さいわい)ナイフが小さいのと、親指の骨が堅(かた)かったので、今だに親指は手に付いている。しかし創痕(きずあと)は死ぬまで消えぬ。
庭を東へ二十歩に行き尽(つく)すと、南上がりにいささかばかりの菜園があって、真中(まんなか)に栗(くり)の木が一本立っている。これは命より大事な栗だ。 実の熟する時分は起き抜けに背戸(せど)を出て落ちた奴を拾ってきて、学校で食う。 菜園の西側が山城屋(やましろや)という質屋の庭続きで、この質屋に勘太郎(かんたろう)という十三四の倅(せがれ)が居た。 勘太郎は無論弱虫である。弱虫の癖(くせ)に四つ目垣を乗りこえて、栗を盗(ぬす)みにくる。 ある日の夕方折戸(おりど)の蔭(かげ)に隠(かく)れて、とうとう勘太郎を捕(つら)まえてやった。その時勘太郎は逃(に)げ路(みち)を失って、一生懸命(いっしょうけんめい)に飛びかかってきた。 向(むこ)うは二つばかり年上である。 弱虫だが力は強い。鉢(はち)の開いた頭を、こっちの胸へ宛(あ)ててぐいぐい押(お)した拍子(ひょうし)に、勘太郎の頭がすべって、おれの袷(あわせ)の袖(そで)の中にはいった。 邪魔(じゃま)になって手が使えぬから、無暗に手を振(ふ)ったら、袖の中にある勘太郎の頭が、右左へぐらぐら靡(なび)いた。しまいに苦しがって袖の中から、おれの二の腕(うで)へ食い付いた。 痛かったから勘太郎を垣根へ押しつけておいて、足搦(あしがら)をかけて向うへ倒(たお)してやった。 山城屋の地面は菜園より六尺がた低い。勘太郎は四つ目垣を半分崩(くず)して、自分の領分へ真逆様(まっさかさま)に落ちて、ぐうと云った。勘太郎が落ちるときに、おれの袷の片袖がもげて、急に手が自由になった。 その晩母が山城屋に詫(わ)びに行ったついでに袷の片袖も取り返して来た。
この外いたずらは大分やった。 大工の兼公(かねこう)と肴屋(さかなや)の角(かく)をつれて、茂作(もさく)の人参畠(にんじんばたけ)をあらした事がある。 人参の芽が出揃(でそろ)わぬ処(ところ)へ藁(わら)が一面に敷(し)いてあったから、その上で三人が半日相撲(すもう)をとりつづけに取ったら、人参がみんな踏(ふ)みつぶされてしまった。 古川(ふるかわ)の持っている田圃(たんぼ)の井戸(いど)を埋(う)めて尻(しり)を持ち込まれた事もある。 太い孟宗(もうそう)の節を抜いて、深く埋めた中から水が湧(わ)き出て、そこいらの稲(いね)にみずがかかる仕掛(しかけ)であった。 その時分はどんな仕掛か知らぬから、石や棒(ぼう)ちぎれをぎゅうぎゅう井戸の中へ挿(さ)し込んで、水が出なくなったのを見届けて、うちへ帰って飯を食っていたら、古川が真赤(まっか)になって怒鳴(どな)り込んで来た。 たしか罰金(ばっきん)を出して済んだようである。
おやじはちっともおれを可愛(かわい)がってくれなかった。 母は兄ばかり贔屓(ひいき)にしていた。この兄はやに色が白くって、芝居(しばい)の真似(まね)をして女形(おんながた)になるのが好きだった。 おれを見る度にこいつはどうせ碌(ろく)なものにはならないと、おやじが云った。乱暴で乱暴で行く先が案じられると母が云った。なるほど碌なものにはならない。 ご覧の通りの始末である。行く先が案じられたのも無理はない。ただ懲役(ちょうえき)に行かないで生きているばかりである。

設定スタイル

設定項目 記述 設定値 記述例
左余白 margin-left 100 など margin-left: 100px
右余白 margin-right 100 など margin-right: 100px
段落の上の間隔 margin-top 0 など margin-top: 0px
段落の下の間隔 margin-bottom 0 など margin-bottom: 0px
行の間隔 line-height 1em など line-height:1em
文字の間隔 letter-spacing 0.2em など letter-spacing:0,2em
文字の大きさ font-size 1em など font-size: 1em
1行目のインデント text-indent 1em など text-indent:1em
文字の種類(フォント) font-family HG行書体 など font-family:"HG行書体"
文字の色 color #000000 など color: #000000
背景の色 background-color #eeeeee など color: #eeeeee

単位

単位 記号 意味 補足
ピクセル px 画面を構成する点 1280px
ポイント pt 文字の大きさ ホームページ標準は 12pt
エム em 1emを基本の大きさ 文字を2倍にするときは 2em
パーセント % 100%が基本的な大きさ 間隔を2倍にするときは 200%

スタイルシート色生成テーブル設定画像・文字サイズ文書レイアウトウインドウオープン設定HTML文字変換サイトマップホーム