この講座で、このページに初めて来られた方へ。本講座の目次があります。

画像を入れてみよう！

今回は画像を挿入してみましょう。

今回は前回の続きですので、前回アップロードしたファイルを用意してください。

• 親子丼の画像

そして、この画像ファイルをダウンロードします。右クリックして保存を押せば出来ます。

できたら、このファイルを「ウェブサイト作成講座」フォルダに保存するんですが、後々ファイルが増えてくると困るので画像と文書を分けて保存するようにしましょうか。

「ウェブサイト作成講座」フォルダの中に「images」というフォルダを作ってください。

その中に今ダウンロードしたoyakodon.jpgをぽいぽいっと放り込んでください。[基本ファイル操作編を後々開講予定]

それではreciepe1.htmlに、この完成した親子丼の写真を入れてみたいとおもいます。

いきなり画像挿入のタグを書いてしまいましょう。

<img src="images/oyakodon.jpg" alt="親子丼のできあがりの画像" 
width="90" height="120">

このタグを見て次の２つの事を疑問に思った人はもう既にHTML一級建築士です。

• あれ、開始タグだけなの？　終了タグは？
• このimgってのはブロックレベル要素なの？　それともインライン要素なの？

とりあえず、この辺りの疑問から解説していきましょう。

まず、imgタグですが、これは開始タグだけ書きます。気持ち悪いですね。まあ、</img>を省略しているって考えで間違ってないです。img要素は画像を表してるだけなので、それで囲む文字列は存在しませんからね。こんな感じでタグで囲む部分が存在しないから、開始タグだけ書く要素を空要素（からようそ）といいます。本来タグで囲むはずである部分が空（から）なので空要素です。

次に、img要素がブロックレベル要素かインライン要素かということに関しては、これはインライン要素です。ですから、実際にHTMLに書くときは

<p><img src="images/oyakodon.jpg" alt="親子丼のできあがりの画像" 
width="90" height="120"></p>

こんな漢字で適当なブロックレベル要素に含めてやる必要があります。

今回は画像を段落として使いましたが、画像を並べて箇条書きにしたい場合なんかは

<ul>
 <li><img src="images/oyakodon.jpg" alt="親子丼のできあがりの画像" 
width="90" height="120"><li>
</ul>

とすれば良いです。まあ、迷ったときはp要素でいいでしょう。

img要素の属性の解説

いよいよ、img要素の属性についてです。このうちalt属性ですが、これは絶対に書かなくてはいけない重要な属性なんですけれれども、説明が長くなるので最後に紹介します。

src属性

src属性は表示させる画像がどこにあるのかを指定します。src属性を書いておかないと、パソコンはどの画像を表示させていいか分からなくなっちゃうので必ず書いておかないといけません。

今回の例でいうとsrc="images/oyakodon.jpg"と、src属性の値がimages/oyakodon.jpgとなっていますね。

ここでの「/」は「～フォルダの」という意味です。今回「oyakocon.jpg」を「images」フォルダに入れたので「imagesフォルダのoyakodon.jpg」という画像を挿入してますよ、と言ってるわけです。忘れず書くようにしましょう。

また、リンクのときもそうだったんですが、他のサイトの画像を表示させたいときはsrc属性の値にURIを入れるといいです。Petanko.orgのバナーだったら

<img src="http://shed.petanko.org/banner/banner1.png" 
alt="Petanko.org" width="88" height="31">

こんな感じですね。さり気なくsrcの属性値以外のところも色々変わってますけど、後で説明しますので今は気にしない気にしない。

そんでもって、これはHTML自体とは関係ないのですが、他の人が作った画像や他のサイトの画像をこのように自分のサイトで表示させること（一般的には直（「じか」もしくは「ちょく」）リンクと呼ばれています）はマナー違反や場合によっては法律違反（具体的には著作権法違反）になり得ます。

ほとんどのサイトさんでバナー意外のが画像ははしたらダメよという方針をとっています。Petanko.orgでもバナー意外の画像は他のサイトからは表示出来ないように設定しています。

中にはバナーも直リンクしないように書いているサイトさんもありますが、この場合はバナーを保存して（右クリックでできます）自分のウェブサイトのフォルダに入れて利用してくださいということです。

直リンクしてもいいよとも、直リンクしたらだめとも書いてないサイトのバナーはどうすればいいかということは、ケースバイケースで分かりませんね。保存しておけば安全ということに間違いはありませんが......。

width属性とheight属性

width属性の値にはその画像の幅の大きさを、height属性の値にはその画像の縦の大きさを書きます。画像ファイルにマウスを合わせた状態で右クリックして、「プロパティ」とかそういう感じの言葉を選べば見られます。手持ちのWindows Vistaでは「右クリック→プロパティ→「詳細」と書かれたウィンドウの上の方のタブ→「イメージ」で区分されたところの「幅」と「高さ」で見ることができます。

「大きさ88×31」みたいに書いてる場合もありますが、その場合、普通は「（幅）×（高さ）」という順番です。逆に書いてる場合はトラップです。

これらは出来る限り書いた方がいいのですが、どうしても分からなかったというような場合は書かなくても特に大きな問題はおきません。

また、ここに書く値は「表示させるときの大きさ」であって、元の画像の大きさと同じである必要はありません。実際にrecipe1.htmlに次のように書いて結果を見比べてみましょう。

<p><img src="images/oyakodon.jpg" alt="親子丼のできあがりの画像" 
width="90" height="120"></p>
<p><img src="images/oyakodon.jpg" alt="親子丼のできあがりの画像" 
width="180" height="240"></p>

後のほうが幅も高さも２倍の大きさで表示されたことが分かるでしょう。

alt属性

alt属性はimg要素を使うときには必ず書く必要があります。これには画像が表示されない場合、代わりに表示される文字列を書いておきます。

画像が表示されない場合というのは、主に次のような場合を想定できます。

• サーバ（ウェブサイトを見るときにアクセスする先のコンピュータ）が混雑していて画像をダウンロードできなかった。
• 携帯電話などで画像を非表示にしている。
• 視覚障碍者が音声読み上げソフトや、点字ソフトを使って読んでいる。

こういう人が利用する情報だと言うことを考えて、内容を書かないと行けないところがaltの難しいところです。

実際色々な流派がありますので、この辺は自分のサイトの利用者層を考えて適当な書き方をすればいいと思います。代表的な例だけ挙げましょう。

見出しに画像を使っている場合

<h1><img （略）></h1>とすることで画像を見だしとして利用することができます。受け将棋研究室なんかがその例ですね。そのような場合はどんなaltの属性値をつければいいでしょうか。

これに「タイトル画像」なんて書いてしまうと、利用者はずっとそのページのタイトルすら分からないわけです。ですから、alt="受け将棋研究室"とタイトルそのものを代わりに利用出来るようにしておくのがいいわけです。

「注意！」「注目！」などと書かれた画像を段落の最初に置いている場合

これはalt="注意："等と書くのがいいかと思います。

グラフの場合

これは読みづらいことを覚悟の上でalt="○○についてのグラフ。2000年:101件。2001年：96件。......"と書いて行くしか無いと思います。

さて、それでは今回の場合はどうでしょうか？　写真の場合は文字で情報を伝えるのが難しいので一筋縄ではいかないんです。

alt=""

本文に関係のない画像なんかはalt=""と書くことが一般的です。例えば、HTML的に好ましくない例ですが見出しの前後に飾りの画像をいれて居る場合なんかは、alt="見出し用飾り"なんて書かれても読みにくいだけですからね。今回の画像も「ええい、できあがり画像なんかただの飾りじゃい。無くても材料も作り方も必要事項は全部あるじゃないか」と思う方はaltの属性値が空になります。でもあんまりおすすめは出来ません。

alt="親子丼のできあがりの画像"

HTMLの仕様書にも使われた形ですので、一番標準な書き方ではないかと思います。携帯とかで、画像が非表示にしてる人も画像の情報を読んで見たければダウンロードできるといった点がメリットです。ただ音声ブラウザの人には不完全な情報しか伝わらないかもしれませんね。

alt="おいしそうな親子丼ができました。"

「この画像は一体何を表現したいんだろう？　そうだ、できあがった親子丼の美味しそうな様子を伝えたいんだ。」という発想に基づいて書かれたもの。音声読み上げのとき、違和感のない文章になるメリットがありますね。ただ、携帯で見た人は「なにこの画像？」って思ったり、冗長になるという問題があるかもしれません。

alt="親子丼のできあがりの画像：おいしそうな親子丼ができました。"

じゃあ、どっちも書いちゃおうじゃないかという発想です。さっきの場合より更に冗長になるという問題がありますね。

このくらいの知識あれば、割と自由に画像を入れられる事ができるのではないかと思います。また、

<a href="http://petanko.org/" title="ウェブサイトPetanko.orgを参照"><img src="http://shed.petanko.org/banner/banner1.png" alt="Petanko.org" width="88" height="31"></a>

とすれば、画像から他のページにリンクを張ることも出来ます。このようなことをする場合、alt属性に適切な情報を入れて画像を見ることが出来ない人が迷わないように配慮する必要があるでしょう。また、この例のようにリンクのa要素にtitle属性を書いておくとリンク先について詳しい情報を記すことができるので利用すると便利になるかもしれません。

この講座で、このページに初めて来られた方へ。本講座の目次があります。

リンクの張り方

今回はリンクを張って見ましょう。この回では前回までに作業を進めていたファイルが必要です。まだ作ってない人の為に前回まで進行したファイルを用意しておきましたので、ダウンロードしておきましょう。

まず、リンクとは何かということについて説明しましょう。リンクとは、ウェブ上の情報の繋がりのことです。さらに、この繋がりの特徴として方向性がある、つまり一方通行の繋がりであるということがあげられます。

文字列 → 文書、画像、動画、その他

こんな感じですね。文書中のある画像から矢印が延びていって目的地の情報へと繋がっていくイメージです。そして、その矢印の根本をリンクの始点、矢印の伸びた先をリンクの終点といいます。

それでは実際にリンクを張って見ましょう

同一サイトでのリンクの張り方

まず、第２回で作った日記から第３回で作った日記にリンクを張って見ましょう。

メモ帳でnikki1.htmlを開いてください。[ここに開き方の説明へのリンクつけるかも]

リンクを作る場合にはまず、始点と終点を考えます。今回はnikki1.htmlにある文字列「親子丼」を始点として、recipe1.htmlにリンクを張って見ましょう。それでは、実際に作業するところを抜粋してみますね。

親子丼 → recipe1.html

まず、始点に要素「a」を与えてやりましょう。

<a>親子丼</a> → recipe1.html

こうですね。次に、このa要素にリンクの終点を教えてやります。

<a href="recipe1.html">親子丼</a> → recipe1.html

今までに見たことのない記号が出てきました。この例のhrefをa要素の属性といいます。

hrefはハイパーリファレンス属性の略ですね。超意訳すれば「すっごく便利に参考文献が見られるよ属性」てなとこです。

href="recipe1.html"の""で囲まれた部分であるrecipe1.htmlをhref属性の値だとか、属性値だとかいいます。

属性と属性値は今後良く出てくるので覚えておきましょう。まとめると、

<要素 属性="属性値"></要素>

となります。属性をつけるのは開始タグだけでOKです。というか、終了タグにつけてはいけません。

リンクの場合は

<a href="終点のファイル名">リンクの始点</a>

と書いておきましょう。

何はともあれリンク一つが完成しました。できたHTMLはこんな感じです。

<p> 今日は朝起きたら昼でした。とても不思議です。ぶっちゃけこまります。</p>
<p>そして、朝ご飯（＝昼ご飯）に<a href="recipe1.html">親子丼</a>を食べました。</p& gt;

他のサイトにリンクを張ろう

自分のサイトのページにリンクが張れたら次は、他のサイトにも張りたいですよね。とりあえず、Petanko.orgのトップページにリンクを張る方法を考えてみましょう。

ここで悩むのはリンクの終点の記入方法です。ウェブ上にある大量のファイルから、他のサイトのページをただ一つに特定する記述であるURIを使います。ウェブページを見ているときウィンドウのどこか（多分上の方）に「http://」から始まる文字列がありませんか？　それがURIです。URLだとかアドレスとも呼ばれてますね。

このURLをhref属性の値として、リンクを張ればいいです。Petanko.orgに張りたければ、リンクの始点が文字列「Petanko.org」、終点が「http://petanko.org/」ですから、

<a href="http://petanko.org/">Petanko.org</a>

こうなります。

注意

ここで注意が一つあるのですがa要素の中にa要素は入れられません。

<p><a href="url 未定"><a href="http://petanko.org/"> Petanko.org</a>のウェブサイト作成講座にようこそ！</a>< /p>

このようなリンクの張り方は不正です。これからリンクを張りたければ

<p><a href="http://petanko.org /">Petanko.org</a>の<a href="url未定"& amp;gt;ウェブサイト作成講座にようこそ！</a></p>

このような感じにしましょう。

強調

a要素を習ったついでに、これよりも簡単な強調の仕方について覚えちゃいましょう。ここまで来た皆さんには簡単です。

強調をしたいところの要素はemです。そして、強い強調をしたいところの要素はstrongです。特に属性は必要なく、これらの要素のタグをつけてしまえばおわりです。

さらに、このemやらstrongは重ねがけができて、

<p> 普通のところ<em>強調したいところ<em>もっと強調したいところ</em></em></p>

だとか、

<p> 普通のところ<em>強調したいところ<strong>めちゃくちゃ強調したいところ<em>死にそうなくらい強調したいところ</em>< /strong></em></p>

ただし、以前説明したのと同じように[!シラバスの変更必要有!]emの袋もstrongの袋も破れちゃだめで、

<p> 普通<em>強調<strong>もっともっと強調</em> もっと強調</strong>普通</p>

こういう風に書いたらだめです。こんな感じで強調させていきたかったら、

<p> 普通<em>強調<strong>もっともっと強調</strong></em><strong>もっと強調</strong>普通</p>

このように書くといいですよ。

インライン要素について

今回a、em、strong要素について学びましたが、この性質は今まで習った他の要素の性質とは異なります。ですから、これらの要素をインライン要素といって前回習ったブロックレベル要素とは区別します。

段落や箇条書きと、このaやem、strong要素の違いについて比較してみましょう。

ブロックレベル要素は文章を基本的な構造として分類するものです。

ですから、ブロックレベル要素の始まりでは行が、新しい行に移っていると思います。

このように、文章をページの端から端まである長方形、つまりブロックで囲まれるように分類するという特徴があります。

これに対して、a、em、strong要素はブロックレベル要素が作った基本的な構造に肉付けする役割を持っています。

段落などの基本的な構造は誰がマークアップしても同じような仕上がりになりますが、リンクや強調といった肉付けは作者によってばらばらの結果になります。インライン要素は作者の主観によってつけられるというのもインライン要素の特徴の一つですね。

さて、このインライン要素ですが、インライン要素は全てブロックレベル要素の中に無いといけません。文章の骨組みの前に肉付けがあるとおかしいですからね。つまり、

<p><a href="終点のURI">始点の文字列</a></p>

はＯＫですが、

<a href="終点のURI"><p>始点の文字列</p></a>

こういうのはNGです。

作る順番としても、まずブロックレベル要素で骨組みを完成させてからインライン要素で肉付けさせるように心がけましょう。

大幅にトップページを改装してみました。

まあ、見た目じゃ分からないと思うので解説してみます。

とりあえず、今回の改装の目的として

• メインスタイルをsimple-skyとして独立。一般に配布可能な形にする
• その結果として通常の２段組スタイルと１段組スタイルの変更を容易化
• むしろ自動化
• 印刷したときのスタイルの最適化

という４つのことをやってみました。
その結果として、CSSファイル１２個という恐ろしいことになってしまいました。構造ではさらに複雑です。さらにIE対策（おすすめスタイルシートではさらにCSS3未対応ブラウザ対策ということでFirefox等への対策も兼ねてます）ということで恐ろしいことになっております。
まあ、この変更の一番の効果はぱっと見誰もまねできないことかもしれませんね。する人いないでしょうけれども。

では、今回のスタイルシートで一番複雑な「おすすめ」スタイルシート。正式名称は「general-recommended」の解説をしておきます。
このファイルでは１０ファイルを使っていて、中には同じファイルを複数回読み込ませてるものもあります。

1. おすすめスタイルシート：以下のスタイルをまとめ上げる為のスタイルシート
2. デフォルトスタイルシート：ブラウザ間の表示の違いを統一するためのスタイルシート
3. ２カラム（段組）用スタイルシート：CSS3未対応ブラウザ対策。CSS3未対応ブラウザはこれを読み込ませて２カラムで表示させます。
4. IE対策スタイルシート：パソコンで見てる人以外（プリンタ印刷、テレビ、プロジェクタ等を使っている人）は、一度２カラム用スタイルシートを解除します。
5. １/２カラム用スタイルシート：ここから、CSS３です。ウィンドウが851ピクセル以上のときは２カラム。850ピクセル以下の時は１カラムで表示します。今のところ新しいOperaしかこれを読み込むことはできません。
6. カウンター用スタイル：カウンターに使うスタイル。他とは全く関係ないので独立してしまいました。
7. シンプルスカイ：テーマスタイルです。このスタイルシートだけを変更すれば、デザインを崩さずにテーマだけを変えられます。
8. ぺたんこ詳細スタイル：うちのサイトの細かい表示設定です。シンプルスカイは、どのサイトでも利用可能なのを集めたのでその他の余り物。
9. プリントスタイル：印刷するときにのみ使用するスタイル。印刷する際にのみ読み込みます。
10. シンプルスカイ-プリント：シンプルスカイをプリント用に最適化したもの。印刷する際にのみ読み込みます。

そんな努力の甲斐あって、Operaを使うと非常に快適に閲覧することができるようになりました。最新版のOperaでPetanko.orgトップを開いてウィンドウの大きさを変えて言ってみてください。850ピクセルを切って見難くなった瞬間に１カラム構成に変わり、画面が広く使えます。Firefoxでは未対応ですが、２０１０年までには対応するでしょう。

ちなみにFirefoxや他のブラウザでも今は自動ではありませんが手動で切り替えることが有ります。ブラウザによりますが、「表示」の「スタイル」とか「スタイルシート」とか選ぶと、「１カラム」か「２カラム」かの選択が出てくると思います（ＩＥ７意外）。これで、自分の見やすいスタイルで見ることができます。

あと、印刷プレビューを押していただけると、左右の空白が完全になくなり、印刷に適したデザインになります（ＩＥ７意外）。あと、リンクの色も同じにして、リンクの後に（）でURLも記入されるようにしました（ＩＥ７意外）。
さらに、ナビゲーションだとか、ページ情報とか、紙の上では邪魔な内容とは関係ないものは全部削除されるようにしました（ＩＥ７意外）。

今日明日チャリの日、ホの昨日のデザインを請け負ってみました。
そんでもって、トップ絵中心のデザインにしたので、サンプルとしてローレンツの絵をプレゼントしてみました。

一応、初級編講座でこのくらいのデザインが出来るようにしようかな、と思い中......。

ところでこのローレンツ。実は大学の期末レポートに「ローレンツの似顔絵集」を出そうかという話で１，２分で描いたやつでした。アフォですね。しかし、まさかそのままギフトフォルダに入れられてしまうとは......。

まあ、何にしろ移転＆新装開店おめでとうございます。

このたびトップページを改装したんですが......またしてもＩＥですか。
ここまで僕に喧嘩売りますか。
そんなに僕が憎いですか。
Firefox、Opera、Safariは普通に見れてるのに、IE......
なんなんだお前......という事で調べてみた結果がこちら。
li要素の子孫にリスト要素があるとリストマークが上方にずれる
そうですか。マイクロソフトは2003年に見つかってるバグを未だに直さないんですか。
今までＩＥでもちゃんと見られるように配慮してサイト作ってきましたが。もう無理です。回避策も思いつきません。
というわけで、IEでは全く表示されない版のトップを作ってみました。これですっきり。
IEと他のブラウザで見比べて見ると愕然としますよ。
（このリンクはそのうち消されると思います。）
以下IEのダメな点。
・Firefox、Opera、SafariはHTML(+CSS)もXHTML（+CSS）も表示できるのに、IEはHTML(+CSS)しか表示できない。
・そのHTML（+CSS）でさえも正しく表示できない。

まあ、致命的な表示になったらあれですが、多少変なぐらいだからいいでしょう。IE8になったら多分直るとおもうし...

この講座で、このページに初めて来られた方へ。本講座の目次があります。

注意：講座を書く順番が前後したため、講座４は未公開ですが内容は既習のものとして書いています。ご了承ください。

正式なHTML

「そろそろHTMLにも慣れて来たかな？」と思うのでここらで正しく読みやすいHTMLの書き方を学んでおきましょう。

「今までのは正しく無かったのか！」と怒られそうですね。確かに間違っては居ないのですが、ちょっとカタコトな感じのするHTMLです。

それに間違えがちなポイントもいくつかあるので、そのことにも触れて起きたいのです。

ブロックレベル要素はbody要素にいれよう！

body要素とは実際の文章の表示される部分そのものが含まれる要素です。

前々回で学んだブロックレベル要素、これらは全てbody要素の中に入っていなければなりません。そして、逆にbody要素のすぐ中にはブロックレベル要素しか入る事ができません。前回の講座でインライン要素はブロックレベル要素の中にだけ書くことを習いましたね。

title要素はhead要素にいれよう！

head要素は文章として直接表示するわけではない、文章に付随する情報が含まれます。

残ったtitle要素をhead要素の中に入れておきましょう。そして、head要素はbody要素よりも前に記述しておきましょう。

title要素はブラウザのタブや、タイトルバー、お気に入りの名前として表示されます。

html要素にhead要素とbody要素をいれよう！

そうして出来たhead要素とbody要素をhtml要素の中に入れます。すると、html要素の外に有るのはドキュメントタイプの宣言のみになるはずです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">

 <head>
  <title>タイトル</title>
 </head>
 
 <body>
 <h1>見出し</h1>
  <p>本文</p>
 </body>
 
</html>

こんな感じですね。逆に、ここもhtml要素の中にはhead要素とbody要素しか入れることができません。

ところで、この例のhtml開始タグに変な属性がついてますね。なんか「lang="ja"」と書いてあります。これは、このhtmlが日本語の文章の属性をもっていますよ、ということです。

HTMLの論理構造

なぜこんなややこしいことをするのか。HTMLは文章に構造を持たせることで文章を意味づけしているからです。

HTMLの要素を、文章の一部分を入れる袋みたいなものだと考えましょう。

まず、大きなhtmlという袋があります。これを開けると、headとbodyというタグのついた袋があります。

headは文章の情報が入っている袋ですので、こっちの袋を先に開けてみましょう。titleの袋が入っていますね。titleの袋を開けてみるとこの文章が何について書かれているのか分かりました。

次に、bodyの袋を開けてみましょう。bodyには文章の本文が入っています。色々袋はありますが、とりあえず「ul」という袋が有りました。これは......覚えていますか？　「順序の関係のないリスト」が入っていますね。

liという袋を開けるとリストひとつひとつの内容が入っていました。

このよう、小さい袋が大きい袋にすっぽり収まっていく構造がHTMLの最大の特徴です

ですから次のような構造は、正しいHTMLとは認められません。

<p>なんか文章<a>なんか文章</p>なんか文章</a>

なんか袋が破れちゃってますね。こんな袋はカラスの格好の標的になってしまうので気をつけてください。

その他、説明しきれなかったこと

他にもちょこちょことしてはいけない決まりが有ります。これはきちんとルールを覚えようとすると大変なので、ここでは大ざっぱに「これを守っておけば大丈夫」という感じのルールを選んでおきます。

タグの要素名（titleとかpとかh1とか...）は半角小文字で書こう！

昔は大文字と小文字を区別しないことになってたので、大文字で説明してる先生も多いです。でも、最近新しくできたバージョンでは小文字で書くように決められていますので、みなさんは今から小文字で書く癖をつけておきましょう。

箇条書きは「ulやol」の中に「li」が入るけれど、その他のブロックレベル要素にはブロックレベル要素をいれない！

<p>なんか文章<p>何か文章</p>何か文章</p>

段落の中に段落が......よく分かりませんね。謎文章です。その他見出しの中に見出しだとかも謎文章です。こんな謎文章は書けません。

HTML中にコメントをつけることも出来ます。

<!-- コメントの内容 -->という記述でHTML中にコメントを書き込むことができます。

Another HTML-lint gatewayで文法チェック！

これだけの複雑なルールがあるのに全てを正確に書くなんてとてもない......。そんな心配もあるでしょうが大丈夫です。世の中にはAnother HTML-lint gatewayという素晴らしいサービスがあって、これはなんと自分が書いたHTMLをチェックして点数をつけてくれるのです。ただ、まだ今の知識では１００点を取ることは出来ません......。「よくできました」と評価がでたらまあOKでしょう！

章末問題

未制作。間違いを正して貰う問題でも作ろうかな......。

この講座で、このページに初めて来られた方へ。本講座の目次があります。

今回は料理のレシピを作ってみましょう！

料理のレシピを用意するのが面倒臭かったのでタケピーさんからネタをお借りしました。

今回マークアップするのはこんな文章です！

今日のごはん

品目

• 親子丼

材料

• 鳥ムネ肉60gくらい
• 玉ねぎ半分くらい
• 鶏卵一個
• ミックスベジタブル（冷凍食品）適量
• 水60cc
• 砂糖8g弱
• 醤油15cc
• めんつゆ少々

作り方

1. 肉と玉ねぎ切って、水とかとあわせて煮る
2. 溶き卵を入れて弱火
3. 火を止めて煮る
4. ご飯にかける
5. ウマー

費用･手間

案外楽に、安くできました。

その他

久しぶりにご飯らしいものを作った。美味しいです。ただ、残った鶏肉と玉ねぎどうしようかな......また親子丼かな～。

今回はこの前の文章とはひと味違いますね。

この前は「タイトル」と「段落」の２種類にしか分類しませんでした。今度は他に何が有るでしょうか？　「見出し」と「箇条書き」そして、「順番が関係する箇条書き」です。

つまり、見出しなどのタグの書き方を学べば、同じような文章が書けるようになるはずです。

というわけで、見出しのタグから学んでいきましょう！

見出しのタグ

見出しのタグには<h1></h1>、<h2></h2>、<h3></h3>、<h4></h4>、<h5></h5>、<h6></h6>の６種類があります。

あるページの中で一番大切な見出しにh1をつけます。通常h1の見出しはページに１つだけあって、タイトルと似たような内容になると思います。

そして、２番目に大きな見出し、３番目に大きな見出し......と順番にh2,h3......を使います。

今回の例では、「今日のごはん」がh1、「材料」「作り方」「手間･費用」「その他」がh2だと見ることができそうです。h3より小さい見出しはありませんね。

箇条書き

箇条書きなHTML用語では「リスト」といいます。......よくよく考えたら、日常用語でもリストですか。

そんでもって、リストには「順序無しリスト」と「順序付きリスト」とがあります。これらを一遍に解説していきましょう。

まず始めに、この２つのリストはそれぞれどんな時に使うかを見ていきましょう。

順序無しリストはその名の通り、順序の関係のない箇条書きに使います。この例では「材料」がそれに当たりますね。材料をそろえるのに順番は必要ありませんからね。

順序有りリストは、順番が大切な内容のリストを作るときに使います。この例では「作り方」がそうです。ご飯にかけて食べた後で弱火に掛けたら、えらことになりますよね。

それぞれのリストの使う場面が分かったところで、実際の使い方を見ていきましょう。

リストは、順序の有無に関わらず<li>と</li>で囲みます。その例は

   <li>鳥ムネ肉60gくらい</li>
   <li>玉ねぎ半分くらい</li>
   <li>鶏卵一個</li>
   <li>ミックスベジタブル（冷凍食品）適量</li>
   <li>水60cc</li>
   <li>砂糖8g弱</li>
   <li>醤油15cc</li>
   <li>めんつゆ少々</li>

と

   <li>肉と玉ねぎ切って、水とかとあわせて煮る</li>
   <li>溶き卵を入れて弱火</li>
   <li>火を止めて煮る</li>
   <li>ご飯にかける</li>
   <li>ウマー</li>

です。

そして、この作業をした後に順序がない方の全体を<ul>と</ul>で、順序が有る方の全体を<ol>と</ol>で囲みます。例を見せましょう。

  <ul>
   <li>鳥ムネ肉60gくらい</li>
   <li>玉ねぎ半分くらい</li>
   <li>鶏卵一個</li>
   <li>ミックスベジタブル（冷凍食品）適量</li>
   <li>水60cc</li>
   <li>砂糖8g弱</li>
   <li>醤油15cc</li>
   <li>めんつゆ少々</li>
  </ul>

  <ol>
   <li>肉と玉ねぎ切って、水とかとあわせて煮る</li>
   <li>溶き卵を入れて弱火</li>
   <li>火を止めて煮る</li>
   <li>ご飯にかける</li>
   <li>ウマー</li>
  </ol>

どうでしょうか。

ところで、<ul>と</ul>の間や、<ol>と</ol>の間には<li>と</li>で囲まれた部分しかあってはなりません。

<ul>
 <p>段落だよ～</p>
 <li>箇条書きだよ～その１！</li>
 <li>箇条書きだよ～その２！</li>
</ul>

こういうのは御法度です！

そして、品目にある「親子丼」ってやつですが、ここではリストが一個しかない「順序無しリスト」であると解釈しました。ここは段落だという解釈も有りだとは思うんですが、品目が二つ以上あるときもあったらどうでしょう？　箇条書きにしますよね。そして、２，３個品目が合ったとしても順序はそれほど大事ではありません。あ、もちろんレストランのコースなんかは別ですよ。

そして、残った部分「案外楽に、安くできました。」と「久しぶりにご飯らしいものを作った。美味しいです。ただ、残った鶏肉と玉ねぎどうしようかな......また親子丼かな～。」は前回出てきたただの段落ですから、<p>と&li;/p>で囲んで起きましょう。くり返し言いますが、文書の全ての部分を必ず何かの種類に分類してください。見出しでも箇条書きでも無いからって宙ぶらりんにしていてはいけません。まよったら段落って事にしておきましょう。

こうして、料理のレシピの全体像ができました。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<title>今日のごはん</title>
 <h1>今日のごはん</h1>
  <h2>品目</h2>
  <ul>
   <li>親子丼</li>
  </ul>

 <h2>材料</h2>
  <ul>
   <li>鳥ムネ肉60gくらい</li>
   <li>玉ねぎ半分くらい</li>
   <li>鶏卵一個</li>
   <li>ミックスベジタブル（冷凍食品）適量</li>
   <li>水60cc</li>
   <li>砂糖8g弱</li>
   <li>醤油15cc</li>
   <li>めんつゆ少々</li>
  </ul>

 <h2>作り方</h2>
  <ol>
   <li>肉と玉ねぎ切って、水とかとあわせて煮る</li>
   <li>溶き卵を入れて弱火</li>
   <li>火を止めて煮る</li>
   <li>ご飯にかける</li>
   <li>ウマー</li>
  </ol>

 <h2>費用･手間</h2>
  <p>案外楽に、安くできました。</p>

 <h2>その他</h2>
  <p>久しぶりにご飯らしいものを作った。美味しいです。ただ、残った鶏肉と玉ねぎどうしようかな......また親子丼かな～。</p>

どうでしょう？　ところで、これを見てスペースや改行に気づいた人もいるかと思います。このように複雑にマークアップするときはまとまりごとに改行を入れたり、半角スペース（全角はだめ）を入れると見やすい場合もありますよ。この改行なんかは実際表示される時には全て無視されます。

では今回作ったこのファイルも「ウェブサイト作成講座」フォルダに「recipe1.html」という名前で保存しておきましょう。

作業が一通り終わったところで、少し解説をしておきましょう。

今まで「分類」とか「種類」だとか言ってきた、タイトル「title」や段落「p」、見出し「h1～h6」、リスト「li」、番号無しのリストを囲う「ul」、番号次のリストを囲う「ol」などは全て正式には「要素（element)」と言います。

文章とは「段落」や「見出し」や「箇条書き」といった要素が集まって成り立っているんだな～とイメージしてください。

そして、どんな要素が含まれているかをパソコンに教えてあげる道具が「タグ（tag）」です。お店の洋服についてるタグは店員さんに値段を教えてあげますが、それと同じでHTMLのタグはパソコンに要素を教えてあげているのです。

また、実は今まで教えてきたタグはtitle要素意外全て「ブロックレベル要素」という要素でした。ブロックレベル要素とは、見出しだとか段落みたいに文書全体をブロックにして分類する要素です。今はブロックレベル要素しか知らないから「？」という感じだと思います。でも次回「ブロックレベル要素」意外の要素も出てくるので、そのときにピンとくるはずです。乞うご期待！

今回のまとめ

1. 文章がどんな要素で出来ているか考えよう！
2. その要素を示すタグをつけよう！
3. タイトル、見出し、段落、順序のない箇条書き、順序のある箇条書きの要素を習ったよ！
4. そのうちタイトル以外の要素は「ブロックレベル要素」っていう名前。

章末問題

今日は沢山要素が出てきて結構忘れやすいとおもいます。問を解いて着実にマスターしていきましょう！

1. 問１．次の括弧の（ア）～（コ）に入る言葉や数字を書き入れなさい。

   文書は、タイトルや段落、見だし、箇条書きといった、様々な（ア）から構成されている。これら（ア）のうち、タイトル意外の物を（イ）という。文書中のどの部分がどの（ア）であるかをパソコンに示す為に（ウ）を用いる。

   見出し（ア）には（エ）から（オ）までの（カ）種類あって、その文書中で最も重要な見出しが（エ）、最も小さな見出しが（オ）である。

   また、段落要素はアルファベット（キ）を（ウ）の中に書き示し、同様にリストは（ク）と書き示す。そして、順序のある箇条書きはリスト全体を（ケ）要素のタグで、順序の無い箇条書きなリスト全体を（コ）要素のタグでくくる。

2. 問２．タケピーさんのブログの2008年9月19日のレシピをマークアップしてみよう。できたら、「ウェブサイト作成講座」フォルダに「recipe2.html」という名前で保存しておこう。（解答未制作）
3. 問３．前回の講座であなたが作ったレシピをマークアップしてみよう！できたら、「ウェブサイト作成講座」フォルダに「recipe3.html」という名前で保存しておこう。

Petanko.orgのプロジェクト第二弾の先行公開版です。まだ構成は練ってませんので多少分かりにくいです。

ただいまPetanko.orgでは本講座の改良の為、フォーラムにて意見を募集しております。「～の部分が分かりにくい」だけでもいいので書き込んでくれたらうれしいです。

～ウェブサイト初級編。知識０から公開まで～

パソコンを自分一人で起動して、このブログを見ることができる人を対象としています。それでも多少難しいかもしれないので不安名人はパソコンが出来る人に横で見ていてくれるように頼むといいかもしれません^^;　ここが分からないよ！と思ったらフォーラムにご意見よろしくお願いします。

この講座では、全１０～１５回程度で簡単なウェブサイトが作れるようになるまでを、最低限の理論と知識だけで説明することを目的としています。

1. 前書き（構成中）
2. 講座１．ウェブサイト作成前の準備
3. 講座２．日記を作ってみよう！
4. コラム１．そもそもなんでＨＴＭＬなんかいるのよ
5. 講座３．料理のレシピを作ってみよう！
6. 講座４．リンクを張ろう！　画像を入れてみよう！（次回公開予定）
7. 講座５．正式なHTML
8. 講座６．公開してみよう！（次々回公開予定）
9. 講座７．文書のヘッダー
   
10. 講座８．デザインしてみよう！
11. 補講１．応用編！　ちょっと特殊なブロックレベル要素
12. コラム２．デザインが面倒臭いです。
13. 番外編１．掲示板をレンタルしよう！　カウンタを設置しよう！

～ウェブサイト制作中級編～
この講座では自分の好きなようにウェブサイトを制作するために必要な知識を学びます。
また、専門用語も学び、他の方の説明を読んでも違和感なく理解できるようになることを目指します。

～ウェブサイト制作上級編～（難しすぎる為Celtの力で制作出来るかは不明）
この講座では、視覚、聴覚に障碍を持ったかたでも、ストレスなく閲覧できるようなサイトを目指します。
Celt独自の哲学を多く含みますので、自らで取捨選択の必要な情報が多く含まれるとおもいます。

本講座の目次があります。

ウェブサイトを作る前の準備

ウェブサイトを作る前に、いくつか知っておかないといけない知識があります。

既に出来る人は読み飛ばしてくれてＯＫです。

・用語について

以下の用語は良く使うので、出来る限り覚えておきましょう。

ウェブページ

いわゆるインターネット（正式には、ワールドワイドウェブ)上にある文書のこと。

ウェブサイト

ウェブページがいくつか集まった物で、全体として一定の内容をもっているもの。これからこれを作ります。

ファイル

パソコンで作った内容を保存するときの単位です。

フォルダ（ディレクトリともいう）

ファイルがいっぱいあると見難いので、フォルダにを用いて分類、整理をします。

ファイルとフォルダはイメージしにくいので少し説明を加えます。

あなたの家に本やCDやDVDがごった返してあるとします。この本やCDなどが、データの保存単位であるファイルだと考えましょう。

数がとてつもなく多いので、とりあえず本を仕舞う部屋と、CDを仕舞う部屋とDVDを仕舞う部屋に分けましょう。これらの部屋がフォルダにあたります。

さて、その「図書室」や「CD室」「DVD室」と名付けたフォルダに整理されましたが、それでも本の数は多くて探しにくいです。そこで図書室の中に本棚を作って「小説」「実用書」と名前をつて整理しましょう。

これもフォルダです。つまり、フォルダのなかにはフォルダも入れることができます。そしてフォルダには自分の好きな名前をつけて整理することができます。

・メモ帳の起動方法

スタートボタン（左下の旗の形のボタン）をクリック
→すべてのプログラムをクリック
→アクセサリを探してクリック
→メモ帳をクリック

・コピー＆ペースト

ウェブサイトにある文字列は、好きなところをコピーしてメモ帳などに貼り付けることができます。

河童の川流れ。

↑の文字列を使って試して見ましょう。

まず、ウェブサイト上のコピーしたい部分の最初のところにマウスを置いて、マウスの左のボタンを押してください。この例では「河童」の「河」の左端です。

そのボタンを押したまま、コピーしたい部分の終わりまで、マウスを動かします。この例では「流れ。」の「。」の右端です。そして、マウスの左ボタンを放します。

すると、「河童の川流れ。」の文字の色が反転したと思います。

次に反転した部分にマウスをおいて、マウスの右のボタンを押します。するとメニューが出てきますので、「コピー」を選びます。

次にメモ帳を起動します。そして、さっきの「河童の川流れ。」を貼り付けたい場所にカーソル（|←こんなのが点滅してるやつ）を持って行きます。ただし、今は起動してすぐですから、貼り付ける場所を選ぶ意味は有りません。既に文章を書いている場合に有効です。

そして、マウスの右のボタンを押して「貼り付け」を選びます。

・拡張子の表示

今まではパソコンの使い方でしたが、今度はちょっとしたパソコンの設定です。

パソコンを買ったままの状態ではファイル名を省略して書くようになっています。

買ったままの状態で、メモ帳で「私のファイル」という名前のファイルを保存したとすると、その本当のファイル名は「私のファイル.txt」です。

「.txt」が何かという説明は後でしますが、とりあえずウェブサイトを作る上ではこれが見えないと何も出来ないので、表示するように設定を変えます。

設定方法はWindows XP以前とWindows Vistaとで分けて説明しますね。

見分け方ですが、画面左下に旗のマークと「スタート」というカタカナが書いてあればXP以前で、旗のマークだけならVistaです。

XP以前の方

スタートボタン
→マイ　コンピュータ
→メニューバーの「ツール」
→フォルダオプション
→出てきたウィンドウ上部にある「表示」
→詳細設定のところの右の方に、見る場所を上下にずらすためのバーがありますのでそれを一番したにずらす。
→下から三番目にある「登録されている拡張子は表示しない」ってところのチェックを外す。
→一番下にある「OK」ボタンを押す。

Vistaの方

スタートボタン
→マイ　コンピュータ
→キーボードの「Alt」キーを押す。（普通は一番下の段のやや左側にあります）
→メニューバーの「ツール」
→フォルダオプション
→出てきたウィンドウ上部にある「表示」
→詳細設定のところの右の方に、見る場所を上下にずらすためのバーがありますのでそれを一番したにずらす。
→下から三番目にある「登録されている拡張子は表示しない」ってところのチェックを外す。
→一番下にある「OK」ボタンを押す。

以上です。

さて、ここで「私のファイル.txt」の「.txt」は何なのかということを学びましょう。パソコン初心者を脱出するためには必須の知識です。

ファイル名のドット「.」より、右の部分を拡張子といいます。パソコンはファイル名の拡張子を見て、そのファイルが画像なのか文章なのか音楽ファイルなのか......だといったことを判別しています。

つまり、この拡張子によってそのファイルを開くソフトを決めているのです。

メモ帳で作ったファイルには拡張子「txt」がつけられますが、私たちはウェブサイトを作っているのでこれをウェブページとしてウェブブラウザを使って開きたいのです。ですから、このファイルの拡張子をウェブページを示す「html」とするためにパソコンの設定を変更しました。

本講座の目次があります。

僕があまりにもコンテンツを作らなすぎたため、最近ottfoekstに蔑まれてきました。というわけで、しぶしぶマークアップ講座を開始しようと思います。ただ不定期 ですので、記事が溜まるまで期待しない方がいいです。のちのちのコンテンツの下書きみたいなもんです。あと、初心者向けなことを考えてWindowsユーザーを想定しております。

はい、それでは早速第２回の講座に入って行きましょう。

その１．いきなり作るその前に

ちょっと準備をしましょう。デスクトップ（パソコンに起動したときに見える、壁紙があったりアイコンとかが並んでいる画面）に新しいフォルダを作ります。それでは、デスクトップを表示してください。

今見てるこのページが邪魔で見えないって方いますか？　もし、それで困っていたら、次の作業を最後まで読んでから試してみてください。まず、右上に３つ並んでいるボタンの左端を押せば隠れます。そして、画面下に「[未完成版]ウェブ...」と書いているところを押せば元に戻ります。他のウィンドウも同じ操作で隠したり戻したりできます。

それでは、デスクトップの何もないところにマウスを持って行ってマウスの右のボタンを押しましょう。するとメニューが出てきますので「新規作成」→「フォルダ」としフォルダを作ります。「新しいフォルダ」もしくは「新しいフォルダ（数字）」という名前のフォルダが出来ましたね？　そのサイトに「ウェブサイト作成講座」と名前をつけてください。パソコンに詳しい人はそのフォルダを好きなところに移動してくれて結構です。

これから作るファイルは全てそのフォルダに保存していきます。

その１．とりあえず１ページ作っちゃおう！

いきなり実践です。今回は作ったページを自分のパソコンで見るところまでやっちゃいましょう。公開は第５回ぐらいかな？　多分。

まあ、なんにしてもウェブサイトを作るには文章がいるわけです。今回は練習用に僕が書いておきました。

今日の日記

今日は朝起きたら昼でした。とても不思議です。ぶっちゃけこまります。

そして、朝ご飯（＝昼ご飯）に親子丼を食べました。

まあ、短いですがこんなのでいいです。これを、メモ帳にコピーしてみてください。

次に、この文章を次のように分類していきます。

<ここからタイトル>今日の日記<ここまでタイトル>

<ここから段落>今日は朝起きたら昼でした。とても不思議です。ぶっちゃけこまります。<ここまで段落>

<ここから段落>そして、朝ご飯（＝昼ご飯）に親子丼を食べました。<ここまで段落>

ええと、分類というのは分かりにくいでしょうが、例を見れば分かっていただけたでしょうか？　この記事では「タイトル」と「段落」だけですが、他にも「表」「箇条書き」とか色々あります。

ここで、重要なことを２つ言います。

まず、全てのウェブページにはタイトルを必ず一個つけないとけません。１個もなくても２個以上あってもダメです。世の中に何について書かれているか分からない文章ほど奇妙なものはありません。

そして、もう一つ。どこにも分類されていない、仲間はずれの部分を作ってはなりません。どこにも属さないということは、何にも意味を持たないということと同じですので文章中には無いはずです。デザイン上必要なものが含まれてるのかもしれませんが、それはまたいつか対処法を述べます。

これで文章を分類することができたのですが、これを機械の言葉に翻訳しましょう。難しいことではないので、安心してください。

<title>今日の日記</title>

<p>今日は朝起きたら昼でした。とても不思議です。ぶっちゃけこまります。</p>

<p>そして、朝ご飯（＝昼ご飯）に親子丼を食べました。</p>

この例を見ながら機械語を解読していきましょう。「<title>今日の日記</title>」に注目してください。タイトルにしたい文字の前後が<title>と</title>で書かれています。さっき分類したやつと見比べると<ここからタイトル>は<title>に、<ここまでタイトル>は</title>に変わってるだけのようです。

同じく段落のところも見ていきましょう。段落にあたる部分を<p>と</p>で囲んでいますね。pはparagraph（英語で段落）の省略です。

つまり、<分類>の部分からその分類の部分が始まっていて、</分類>のところでその分類の部分が終わっていることが分かります。ですから、<分類>を開始タグ、</分類>を終了タグといいます。そして開始タグと終了タグを合わせてタグといいます。

さて、これでウェブページを作る作業は殆ど終了したのですが、大きな問題が発生しました。<title>だとかごちゃごちゃと書きましたが、世の中には<分類>ほげほげ</分類>という形でパソコンにメッセージを与えるファイルがたくさん有るのです......。この書き方は色んなものを指定するのにかなり便利なのでね。

もしかしたら、このファイルがウェブページだと思ってくれないパソコンも有るかもしれません。なんとかして、このパソコンにこのファイルがウェブページであるということを宣言しないといけません。

そこで、文章の頭に

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
と書いておきます。
えっと、これは覚えなくていいです。めちゃくちゃややっこしいですし、必要なときにここからコピーしてくれればＯＫです。
ただ、一応知りたい人の為に、これを日本語に翻訳すると
「この書類の形式（DOCTYPE)はHTMLという形式のバージョン4.01です。W3Cという人がこの仕様を考えて、その仕様は英語(EN)で公開(PUBLIC)されています」
というような感じです。

んでもって、さっきさらっとHTMLと書きました。そう、今書いた機械語はHTMLと呼ばれるものです。よく使う言葉ですので覚えておきましょう。そして、できあがりです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<title>今日の日記</title>
<p>今日は朝起きたら昼でした。とても不思議です。ぶっちゃけこまります。</p>
<p>そして、朝ご飯（＝昼ご飯）に親子丼を食べました。</p>

このように、宣言やタグをつけることを文章をマークアップすると言います。

最後に、これを保存します。最初に作った「ウェブサイト作成講座」フォルダに「nikki1.html」という名前で保存してください。そして、できたファイルをダブルクリックして開きます。

今日は朝起きたら昼でした。とても不思議です。ぶっちゃけこまります。

そして、朝ご飯（＝昼ご飯）に親子丼を食べました。

と表示されていたら、成功です。次のステップに進みましょう。タグがそのまま表示されてたら、どこか設定がおかしいです。パソコンの設定（主に拡張子関連）を見直してみましょう。

その２．まとめ

• HTMLという言語をつかってウェブページをつくる
• HTMLには<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">というドキュメントタイプの宣言を一番最初に書いておく。
• 開始タグ<分類>と終了タグ</分類>を併せてタグという。
• タグを使って文章を分類する。
• titleタグは文章中に必ず一つ必要！
• タグによって分類されていない部分があってはならない。
• 文章にタグや宣言をつけることをマークアップするという。
  

その３．問題（やらなくても問題ないです）

問１．以下の文章を、今日習ったタグなどでマークアップしてウェブページを作ってみよう。

40000Hit!

本日Petankoのアクセスが40000ヒットを迎えることができました。

いつもご愛読ありがとうございます。

次はキリ番44444ヒットが待っています。だれが、この縁起の悪い数字をとり見事死亡フラグを立てることができるのでしょうか。楽しみですね。

では、みなさん！　はりきって44444を奪い合いましょう！

問２．自分の日記を書いてみよう。また、その日何を食べたかについて触れておこう。

問３．問１でつくった日記に自分でタグをつけてみよう。できたら、「ウェブサイト作成講座」フォルダに「nikki2.html」という名前で保存しておこう。（答えはまとめを参考に）

問４（予習）．日記で書いた食べ物について、作り方を簡単にメモっておこう（想像でもＯＫです）。パソコンに画像を取り込む技術のある人は、その食べ物の写真をとっておくとなおいいです。

地元でお祭りがありました。そこでいつぞやの同級生に合いました。
それで色々とお話していたのですが、そのうちの一人が恐ろしくレベルが上がっていました。恐ろしや恐ろしや......。素晴らしきかな。素晴らしきかな。
彼は、今や重度のニコ厨ニコニコ動画の利用者に......。プレミアム会員となり動画をうｐし続けているようです。
そんでもって、どの動画をうｐしたのか教えてくれたんですが↓のやつらです。

すごいですね。とてもあわれな（しみじみとした趣のある）絵ですね。いや、なんか素で上手いのでブログで晒し宣伝してみます。さあ、みんなで荒ｒ......コメントを書き込んであげよう！！