<div>タグ: タグ自身の意味はない.ここでは,スタイルシートを適用するために用いる.
<pre>タグ: インデント,スペースおよび改行を,等幅フォントで表示する.(pre タグでクラスを呼び出すと,MathJax が数式をプレーンテキスト扱いするため表示されなくなる.この場合は,div タグで囲むとよい.ただし,改行を br で入れる必要がある.)
<code>タグ: ソースコードであることを意味する.
<br />タグ: 改行
<hr />タグ: 横棒
<font size="2"></font>: 文字サイズを変更
: HTMLにおけるスペースのエスケープ表記
<!-- HTML におけるコメントアウト -->
下記は HTML コードの区切りに利用する例
<!-- ---------------------------------------------------------- -->
<!-- ----------------------------------------------------------------------------------------------------------------------------- -->
<!-- ----------------------------------------------------------------------------------------------------------------------------- -->
<!-- ---------------------------------------------------------- -->
<!--more--><!--続きを読む-->
<!-- ---------------------------------------------------------- -->
<!-- ----------------------------------------------------------------------------------------------------------------------------- -->
着色
<span style="color: red;"></span>
URLの貼り付け
TitleOfURL
<a href="URL" target="_blank">TitleOfURL</a>
取り消し線
<strike>文字</strike>
下線
<u>文字</u>
文字
左寄せ
<div align="left">左寄せ</div>
中央寄せ
<div align="center">中央寄せ</div>
右寄せ
<div align="right">右寄せ</div>
改行せずに左寄せ
<span style="float:left">改行せずに左寄せ</span>
改行せずに右寄せ
<span style="float:right">改行せずに右寄せ</span>
<style type="text/css">
<!--
.gyo {line-height: 155%;}
-->
</style>
<span class="gyo">行間を変えます</span>
CSSのタイトルを太くするには,
font-weight: normal;
->font-weight: 900;
に変更すればよい.
無理やりにマージンを調整する.
<div style="margin:-1em;"></div>
pre タグ前後の余白を消す.
<pre style="margin:0pt"></pre>
等幅フォント,背景黒,余白なし.
折り返し有り:
<pre style="background:#000000;color:#FFFFFF; font-family:monospace; margin:0pt; line-height:120%; white-space: pre-wrap"></pre>
折り返し無し:
<pre style="background:#000000;color:#FFFFFF;font-family:monospace;margin:0pt;line-height:120%;"></pre>
実行結果
$ make mkdir -p make_temp/;\ g++ POJ-2386.cpp -MM -std=gnu++0x -Wall -O3\ | sed 's/POJ-2386\.o/make_temp\/POJ-2386.o make_temp\/POJ-2386.d/' > make_temp/POJ-2386.d;\ [ -s make_temp/POJ-2386.d ] || rm -f make_temp/POJ-2386.d mkdir -p make_temp/;\ g++ POJ-2386.cpp -c -o make_temp/POJ-2386.o -std=gnu++0x -Wall -O3 ============================================================ SRCS: POJ-2386.cpp OBJS: make_temp/POJ-2386.o CFLAGS: -std=gnu++0x -Wall -O3 ============================================================ g++ -o exe make_temp/POJ-2386.o -std=gnu++0x -Wall -O3 $ ./exe.exe main(510): N: 10, M: 12 MatX = W . . . . . . . . W W . . W W W . . . . . W W W . . . . W W . . . W W . . . . . . . . . . W W . . . . . . . . . . W . . . . W . . . . . . W . . . W . W . . . . . W W . W . W . W . . . . . W . . W . W . . . . . . W . . . W . . . . . . . W . MatX = . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . result: 3 -------------------------------- Execution time: 0. 004 sec --------------------------------
スタイル0
<h1 style="font-size: 21px;">
スタイル0</h1>
<hr />
CSS TEST マイタイトル01
<div class='mytitle01'>CSS TEST マイタイトル01
</div>
CSS TEST マイタイトル02
<div class="mytitle02">CSS TEST マイタイトル02
</div>
CSS TEST マイタイトル03
<div class="mytitle03">CSS TEST マイタイトル03
</div>
CSS TEST マイタイトル03
<div class="mytitle03_B_Blue">CSS TEST マイタイトル03_太字_青
</div>
CSS TEST マイタイトル04
<div class="mytitle04">CSS TEST マイタイトル04
</div>
CSS TEST マイタイトル05
<div class="mytitle05">CSS TEST マイタイトル05
</div>
■
<span style="color: #616161;">■</span>
- 項目1
- 項目2
- 項目3
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul>
- 項目1
- 項目2
- 項目3
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ol>
CSS TEST mypre01 てすと<pre class="mypre01">CSS TEST mypre01
てすと
</pre>
CSS TEST mypre01
てすと
<div class="mypre01">てすと
CSS TEST mypre01<br />
<br />
<br />
てすと
<br />
<br /></div>
CSS TEST mypre02
<pre class="mypre02">
CSS TEST mypre02
</pre>
または,
<div class="mypre02">
CSS TEST mypre02<br />
<br />
</div>
CSS TEST mypre03
てすと
<pre class="mypre03">CSS TEST mypre03てすと
</pre>
CSS TEST mypre04
引用など
引用など
<pre class="mypre04">CSS TEST mypre04引用など
引用など
</pre>
CSS TEST mypre05
引用など
引用など
<pre class="mypre05">CSS TEST mypre05引用など
引用など
</pre>
CSS TEST mypre06
引用など
引用など
<pre class="mypre06">CSS TEST mypre06引用など
引用など
</pre>
CSS TEST mypre07
引用など
引用など
<pre class="mypre07">CSS TEST mypre07引用など
引用など
</pre>
CSS TEST mypre07 引用など 引用など
<pre style="background:#f1fafb;color:#000">CSS TEST mypre07
引用など
引用など
</pre>
CSS TEST mypre08
引用など
引用など
<pre class="mypre08">CSS TEST mypre08引用など
引用など
</pre>
CSS TEST mypre09
引用など
引用など
<pre class="mypre09">CSS TEST mypre09引用など
引用など
</pre>
$コマンドなどを等幅フォント白抜きで表示する. $ $<pre style="background:#000000;color:#FFFFFF; font-family:monospace;">\$コマンドなどを等幅フォント白抜きで表示する.
\$
\$
</pre>
CSS TEST マイコード01
<code class="mycode01">
CSS TEST マイコード01
</code>
CSS TEST マイタイトル06
<div class="mytitle06">CSS TEST マイタイトル06
</div>
CSS TEST myrect01
文章
<div class="myrect01_02">
CSS TEST myrect01
</div>
文章
</div>
CSS TEST myrect01
文章
<div class="myrect01_01">
<div class="myrect01_02">
CSS TEST myrect01
</div>
文章
</div>
</div>
CSS TEST myrect02
文章
<div class="myrect02_02">
CSS TEST myrect02
</div>
文章
</div>
CSS TEST myrect02
文章
<div class="myrect02_01">
<div class="myrect02_02">
CSS TEST myrect02
</div>
文章
</div>
</div>
CSS TEST mymarginRight
ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
<div class="mymarginRight">CSS TEST mymarginRight
</div>
CSS TEST mymarginLeft ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
<div class="mymarginLeft">CSS TEST mymarginLeft
</div>
CSS TEST mymarginLeft (半角一文字文シフト) ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
<div class="mymarginLeft1">CSS TEST mymarginLeft1
</div>
CSS TEST mymarginLeft2 (全角一文字文シフト) ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
<div class="mymarginLeft2">CSS TEST mymarginLeft2
</div>
CSS TEST mymarginRL ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
<div class="mymarginRL">CSS TEST mymarginRL
</div>
参考資料
http://www.htmq.com/html/div.shtml
次にCSSやる時は,この辺りを見て勉強しよう.
http://weboook.blog22.fc2.com/blog-entry-337.html