メイン

HTML入門

2008年3月 1日

改行と段落

まず基本的に、HTMLでは改行は無視されます。なので、

こんにちは。今日はいい天気ですね。
ところで、先日お願いした件なのですが、進み具合はいかが
でしょうか。期日も近いですので、よろしくお願いします。
と入力しても、
こんにちは。今日はいい天気ですね。 ところで、先日お願いした件なのですが、進み具合はいかが でしょうか。期日も近いですので、よろしくお願いします。
というように、改行が表示されません。

では改行を表示するにはどうすればよいでしょう。やり方には2通りあります。


1つは、改行を指示する

<br>
を改行位置につけてやる方法です。Breakの略です。
こんにちは。今日はいい天気ですね。<br>
ところで、先日お願いした件なのですが、進み具合はいかが<br>
でしょうか。期日も近いですので、よろしくお願いします。
と書いてやることによって、
こんにちは。今日はいい天気ですね。
ところで、先日お願いした件なのですが、進み具合はいかが
でしょうか。期日も近いですので、よろしくお願いします。
と改行されて表示されるようになります。


もう1つは、いわば発想の転換です。大袈裟に言うとゲシュタルトスイッチです(笑)。ある箇所に改行があるということは、その前後がそれぞれ別の「段落」だということを意味する・・・ことが多いです(上の例のような、文の途中で改行している場合は除く)。なので、

<p></p>
という段落を指示するマークをつけてやることで、段落と段落の間に改行が入るようにしてやるわけです。これはParagraphの略です。
<p>Soziale Systeme第1章冒頭の「システムが存在するということから出発する」の意味については、前に論じた。</p><p>さてルーマンは抽象的で現実から遊離した空論を唱える学者、というのが大方のイメージだろうが、少なくとも本人の自覚は正反対である。デビュー当時からルーマンは「抽象的で現実から遊離した空論」を徹底的に批判してきた。よく言うせりふが「自分のシステム理論は仮設演繹的なものではなくて索出的(ヒューリスティック)なものだ」という言い方である。そして実は、「システムが存在するということから出発する」という言い方は、この立場を明確に表明したものだといえるのだ。</p>
と書いてやれば、

Soziale Systeme第1章冒頭の「システムが存在するということから出発する」の意味については、前に論じた。

さてルーマンは抽象的で現実から遊離した空論を唱える学者、というのが大方のイメージだろうが、少なくとも本人の自覚は正反対である。デビュー当時からルーマンは「抽象的で現実から遊離した空論」を徹底的に批判してきた。よく言うせりふが「自分のシステム理論は仮設演繹的なものではなくて索出的(ヒューリスティック)なものだ」という言い方である。そして実は、「システムが存在するということから出発する」という言い方は、この立場を明確に表明したものだといえるのだ。

段落を改めるための改行は、こちらの方が望ましいとされています。(実際このエントリも、この方法で段落と段落を分けています。)

なお、このブログでは、この方法で段落を分けた場合に、段落先頭が1字下げられるように設定してあります。(なので先頭に空白を入れると2字下がってしまいます。)


さて、Movable Typeの編集画面には、

というボックスがあって、「改行を変換する/なし」を切り替えることができるようになっています。

これはどういうことかというと、「改行を変換する」にしておくと、編集画面での改行(つまりEnterを押して入力する改行)が、自動的に<br>に変換されるということです。この場合、普段メールを書いたり、ワープロを打ったりするのと同じ要領でブログ書き込みができて便利と言えば便利ですが、入力した改行が全部改行として表示されてしまうと、行間があきすぎて見た目が間抜けに見えることもあり、他方、そうならないようにするには、編集画面で不要な改行を入れないように注意しなければならず、結構疲れます。まあ使いながら、使いやすい方にシフトしていけばいいんじゃないかと思います。

2008年2月26日

文字の色

 文字の色を変えてみましょう。

文章の途中で文字の色を変えるとそこが目立ちますよね。なので、<font color="red">ここを赤色</font>にしました。
のように、
<font color="色指定">文字列</font>
とすることで、その部分の文字の色が変わります。

文章の途中で文字の色を変えるとそこが目立ちますよね。なので、ここを赤色にしました。

 で、色の指定の仕方ですが、上のは単にredと書きました。赤のように基本的な色は、こうやって名前を書いてやるだけでいけます。black, white, yellow, green, blueとかもそうです(他にもあります)。

 他方、redと書くかわりに#FF0000と書いても同じです。これを色コードといいます。色コードを使うことで、何と呼んでいいのかわからない微妙な色も指定することができます。色コードにどんなものがあるかについては、Google検索:色コードでいろんなサイトが見つかります。

2008年2月22日

画像を表示

 まずは画像をどこかに用意します。
http://www.human.niigata-u.ac.jp/~mitanit/kuma.jpg
(これは私のmixiの写真です(笑))

 この画像をこのページの中に表示するには、まず

<img>
と書きます。Imageの略です。

 次に、画像のある場所を指示してやるために、imgのあとにsrc=""と続けます。srcはSourceの略です。

<img src="">
src=""の中に画像のある場所(URL)を書いてやると、その画像がここに表示されるわけです。なので
<img src="http://www.human.niigata-u.ac.jp/~mitanit/kuma.jpg">
と書くと、
と表示されます。


 さらに、
<div align="">
を使って、画像を表示する位置を指定することもできます。たとえば中央に置きたい場合は、
<div align="center"><img src="http://www.human.niigata-u.ac.jp/~mitanit/kuma.jpg" ></div>
と書くことで
と表示されます。(位置指定については位置を指定(左右中央)を参照のこと。)


位置を指定(左右中央)

 「社会行動論」という文字列の位置を指定してみましょう。
 

まずは、どの文字列の位置を指定するか、その対象を定めます。
<div>社会行動論</div>
のように、<div>と</div>で囲みます。divはDivisionの略で、囲んだ部分が一つのまとまりであることを示します。

 これだけでは、「社会行動論」という文字列が一つのまとまりであることしか決まっていません。そこで、最初のdivに続けて、align=""というのをつけてやります。
<div align="">社会行動論</div>
alignというのは「位置関係を定める」という意味の英語です。align=""の中にleft, right, centerを入れてやることで、それぞれ左寄せ、右寄せ、中央になります(以下、わかりやすくするために赤字にします)。
<div align="left">社会行動論</div>
なら
社会行動論
となり(基本は左寄せなので何も変わらず)、
<div align="right">社会行動論</div>
なら
社会行動論
となり、
<div align="center">社会行動論</div>
なら
社会行動論
となります。

2008年2月21日

太字・斜体・下線・リンク・メール・引用

 これらはすべて、MovableTypeの編集画面にボタンがあるものです。


なので、範囲選択してボタンを押してやれば、自動的に以下のような操作がなされます。


 左から行きましょう。まずは太字。

<strong>ここが大事</strong>
と書けば、
ここが大事
と表示されます。


 次に斜体。

<em>ここが大事</em>
と書けば、
ここが大事
と表示されます。Emphasisの略です。


 次に下線。

<u>ここが大事</u>
と書けば、
ここが大事
と表示されます。Underlineの略です。


 次にリンク。まず注意しないといけないのは、

http://www.human.niigata-u.ac.jp/
と単にURLを書いただけでは、リンクは張られないということです。次のように書いてやる必要があります。
<a href="http://www.human.niigata-u.ac.jp/">http://www.human.niigata-u.ac.jp/</a>
こう書くことによって、
http://www.human.niigata-u.ac.jp/
と表示されます。要するに、
<a href="URL">文字列</a>
と書くことでリンクができます(hrefはHypertext Referenceの略です)。なので、
<a href="http://www.human.niigata-u.ac.jp/">人文学部のトップページへ</a>
と書けば、
人文学部のトップページへ
というようにリンクができます。


 メールも同じで、

mitanit@human.niigata-u.ac.jp
と書いただけではだめで、
<a href="mitanit@human.niigata-u.ac.jp">mitanit@human.niigata-u.ac.jp</a>
と書くことで
mitanit@human.niigata-u.ac.jp
とメーラ起動のためのリンクができます。要するに
<a href="mailto:メアド">文字列</a>
としないといけません。なので、
<a href="mailto:mitanit@human.niigata-u.ac.jp">三谷にメールを送信する</a>
と書けば、
三谷にメールを送信する
となります。


 最後は引用です。実は以上の説明で、この引用を多用しています。これは次のようにします。

ルーマン曰く、<blockquote>社会学は、見えないものが見えないということが見えていないということを見ることができる</blockquote>そうだ・・・とほほ。
こう書くことで、
ルーマン曰く、
社会学は、見えないものが見えないということが見えていないということを見ることができる
そうだ・・・とほほ。
と表示されます。

箇条書き

 箇条書きにするときは、とりあえず

みかん
りんご
すいか
のように普通に箇条書きにします。

 その上で、それらがそれぞれ箇条書きの項目であることを示すために

<li>みかん</li>
<li>りんご</li>
<li>すいか</li>
のように
<li>と</li>
でそれぞれ囲みます。liは「箇条書きの項目(List Item)」の頭文字です。

 これでそれぞれが箇条書きの項目であることが指定されましたが、これだけではまだ、それがどのような種類の箇条書きであるかが決まっていません。箇条書きの種類には、順番の付いた箇条書き(Ordered List)と、順番の付いてない箇条書き(Unordered List)の2種類があります。

 箇条書きの種類を指定する場合は、次のように、リストの全体を

<ol>と</ol>、あるいは<ul>と</ul>
で囲ってやります。頭文字ですので、olが順番付き、ulが順番なしです。

 まずは順番付きから。

<ol>
<li>みかん</li>
<li>りんご</li>
<li>すいか</li>
</ol>
これは次のように表示されます。
  1. みかん
  2. りんご
  3. すいか

 次に順番なしです。
<ul>
<li>みかん</li>
<li>りんご</li>
<li>すいか</li>
</ul>
これは次のように表示されます。
  • みかん
  • りんご
  • すいか

以上です。

罫線を引く

 罫線を引くやり方です。
 罫線というのは、こんなの↓。



やり方は簡単で、
<hr>
と書くだけ。Horizontal Rule(横線)の頭文字です(Ruleが罫線なんですね。直線→定規→規定→ルールという感じ?)。
<hr size="5">
<hr size="10">

というように書いて、サイズ=線の幅を定めてやると、太い罫線が引けます。

 これ↓がサイズ5の罫線。


 これ↓がサイズ10の罫線。


こんな感じで。

1