WEB ページ作成基準パラグラフ

パラグラフ (段落)

文章中の話題が変わった時には，パラグラフを変更します．WEB ページでも同じです．パラグラフの無い文章は読み難いとともに，文字が詰まってて窮屈になります．

HTML 文章のパラグラフは，タグ <p> と </p>で囲みます．

段落のタイトル

パラグラフの先頭にタイトルが必要なとき，次のようにします．

パラグラフのタイトルの書き方

<p><span class="title">タイトル</span>文章を記述．</p>
<p><span class="p_title">タイトル</span>文章を記述．</p>

クラス: titleクラスに「title」を指定すると，控えめなタイトルを書くことができます．

クラス: p_titleクラスに「p_title」を指定すると，ヘッダー(h2—3と調和が取れたタイトルを書くことができます．

引用あるいは字下げしたブロック

引用などに使われる字下げしたブロックは，次のように記述します．

字下げしたブロック

<div class="quote">
      文章を書く
</div>

行中の図

行中に図を入れる場合は，以下のようにします．

文章  <img style="width:幅; position:relative; top:位置" src="パス"> 文章

幅は「20px」，位置「5px」のように指定します．例えば，「設定に使われる歯車マークは です」のように文中に簡単な図を挿入することができます．

強調

パラグラフ中で，「<span class="クラス名">強調文字列<\span>」を使い，文字列を強調することができます．以下のクラスが利用可能です．

クラス名	使う場面	出力例
file	ファイル名	hoge.txt
path	ファイルやディレクトリーのパス	/home/yamamoto/hoge.txt
command	コマンド	command
option	コマンドのオプション	option
argument	コマンドの引数	argument
emphasis	強調	emphasis
emph	強調	emphasis
it	イタリック書体	italic
menu	GUIのメニューの選択	メニュー menu
button	ボタン	button
link	リンク	link
link ul	アンダーライン付きリンク	link with underline

ボタンの色を変えることができます．例えば「<span class="button" style="color:white; background-color:red; padding-left:3px; padding-right:3px">ボタンの例</span>」とすると，ボタンの例が表示されます．

ページ作成情報

参考資料

更新履歴

last update:2020/08/08 15:23:27