<?xml version="1.0" encoding="utf-8" ?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
<channel>
<title>クレールのコツブロ</title>
<link>https://ameblo.jp/bluecrail/</link>
<atom:link href="https://rssblog.ameba.jp/bluecrail/rss20.xml" rel="self" type="application/rss+xml" />
<atom:link rel="hub" href="http://pubsubhubbub.appspot.com" />
<description>クレールなりのWEB知識をコツコツとブログしていきます。あくまでもクレールなりの講座です。</description>
<language>ja</language>
<item>
<title>WEB制作を学びたい初心者・主婦の為の講座　～html その4～</title>
<description>
<![CDATA[ みなさん。こんにちは。<img alt="ニコニコ" src="https://stat.ameba.jp/blog/ucs/img/char/char2/139.gif"><br><br>クレールです。<br><br>久しぶりに更新しますね・・・・すいません。<img alt="あせる" src="https://stat.ameba.jp/blog/ucs/img/char/char2/029.gif"><br><br>この講座を読んでいただいている方は過去のブログを読み返して復習などを<br>して頂ければ幸いに思います。<br><br><br><a href="http://astore.amazon.co.jp/crail05-22" target="_blank" style="color: rgb(0, 153, 0);">ホームページ作成　HTML・CSS入門</a><br><br><br><br>さて、前回はメモ帳でhtml作成をしました。<br>今回は、htmlやプログラムを開発するために、必要なツールの導入をしたいと思います。<br><br><span style="color: rgb(0, 102, 255);">ホームページビルダー</span>、<span style="color: rgb(0, 204, 0);">Dreamweaver</span>(ドリームウィーバー)などの専用ソフトを使用してもいいですが<br>結構なお金がかかります（5万円くらいかな・・・）ので、<span style="color: rgb(0, 102, 255);">Eclipse</span>(イクリプス)といったフリーの開発ツールを<br>紹介、導入したいと思います。<img alt="にひひ" src="https://stat.ameba.jp/blog/ucs/img/char/char2/193.gif"><br><br>まずは、こちら→<a target="_blank" href="http://mergedoc.sourceforge.jp/">Pleiades - Eclipse プラグイン日本語化プラグイン</a>　から「 Eclipse 3.7 Indigo Pleadies All in One 」を選択します。<br><br><br><br><a href="http://stat.ameba.jp/user_images/20111227/12/bluecrail/c3/dd/j/o0451017311697332911.jpg"><img border="0" src="https://stat.ameba.jp/user_images/20111227/12/bluecrail/c3/dd/j/t02200084_0451017311697332911.jpg" alt="クレールのコツブロ"></a><br><br><br><br>下記のような画面になりましたら、一番右にある赤枠のphpを選択します。<br>後で記述しますが、html講座が終わりましたら、phpプログラム講座を行いますので<br>そのために、phpを選択します。<br><br><br><br><a href="http://stat.ameba.jp/user_images/20111227/12/bluecrail/57/5b/j/o0447019511697332912.jpg"><img border="0" src="https://stat.ameba.jp/user_images/20111227/12/bluecrail/57/5b/j/t02200096_0447019511697332912.jpg" alt="クレールのコツブロ"></a><br><div><br><br>クリックしましたら、下記のような画面が出力されますので、「 ok 」を選択して<br>ダウンロード開始です。<br>お使いのパソコン、インターネット環境によってはダウンロードに時間がかかります。<img alt="あせる" src="https://stat.ameba.jp/blog/ucs/img/char/char2/029.gif"><br><br></div><br><a href="http://stat.ameba.jp/user_images/20111227/12/bluecrail/8d/de/j/o0427025111697332913.jpg"><img border="0" src="https://stat.ameba.jp/user_images/20111227/12/bluecrail/8d/de/j/t02200129_0427025111697332913.jpg" alt="クレールのコツブロ"></a><br><br>終わりましたら、ダウンロードしたジップフォルダを適当な場所に保存します。<br>ここでは 「 C：￥ 」直下(スタートメニュー → マイコンピュータ → ローカルディスク )にジップフォルダを移動します。<br><br>できましたら、そのジップフォルダを解凍します。<br>これにも少々時間が掛かりますので待ちましょう。<img alt="ニコニコ" src="https://stat.ameba.jp/blog/ucs/img/char/char2/139.gif"><br><br><br>ダウンロードしていると思いますので、その間はhtmlについて少し説明もれがありましたので<br>説明したいと思います。<br><br><br>前回にｈｔｍｌの種類があることを説明しましたが、今新しいhtmlバージョンが<span style="color: rgb(255, 153, 51);">HTML5</span>です。<img alt="キラキラ" src="https://stat.ameba.jp/blog/ucs/img/char/char2/123.gif"><br><br><br>HTML5以前までは<span style="color: rgb(0, 102, 255);">&lt;!DOCTYPE &gt;</span>にそのバージョンを記述していましたがHTMｌ5からは <span style="color: rgb(0, 102, 255);">&lt;!DOCTYPE html&gt;</span>と短縮されてますのでだいぶ楽になりますね。<br><br><br>CSSのバージョンも今はCSS3となって新たな機能などが追加されているようです。<br><br><br><a href="http://astore.amazon.co.jp/crail05-22" target="_blank" style="color: rgb(0, 153, 0);">ホームページ作成　HTML・CSS入門</a><br><br><br>言語は常に進化をしています。<br>覚えたばかりの言語もバージョンが新しくなれば使えなくなっているかもしれません。<img alt="汗" src="https://stat.ameba.jp/blog/ucs/img/char/char2/028.gif"><br><br><br>WEBデザイナーやプログラマーなどを仕事にしている方は常に情報収集し、日々進化していると思います。<br>今回のこの講座ブログを読んで頂いて、WEBデザイナーやプログラマーとして手に職を持っていく方々はどんどん追及して下さい。<img alt="音譜" src="https://stat.ameba.jp/blog/ucs/img/char/char2/038.gif"><br><br><br>あ、でも無理ない程度にお願いします。<img alt="ニコニコ" src="https://stat.ameba.jp/blog/ucs/img/char/char2/139.gif"><br><br><br>そろそろ解凍も終わった頃かと思いますので、進めます。<br><br>解凍したフォルダを開くと「 eclipse 」フォルダと「 xampp 」フォルダの2つあると思います。<br><br>まずは、サーバー設定を行います。<br><br>①xamppフォルダを開きます。<br><br>②<span style="color: rgb(255, 153, 51);">setup_xampp.bat</span>をクリックします。実行すると下記の画像のようにコマンドプロンプト画面（黒い）が出力されます。<br><br><br><a href="http://stat.ameba.jp/user_images/20111227/13/bluecrail/1d/be/j/o0395028011697473843.jpg"><img border="0" alt="クレールのコツブロ" src="https://stat.ameba.jp/user_images/20111227/13/bluecrail/1d/be/j/t02200156_0395028011697473843.jpg"></a><br><br><br><br>③ ②の状態でxamppフォルダの<span style="color: rgb(255, 153, 51);">xampp-control</span>をクリックして起動します。<br><br>④コントロールパネル画面が表示されますので項目の一番上 Apache の Startボタンをおします。<br>   押しましたら、Apacheの横に Runningと表示されたらOKです。<br><br>⑤最後に http://localhost/xampp/ でアクセスしてください。下記の画面が表示されたらOKです。<br><br><br><br><a href="http://stat.ameba.jp/user_images/20111227/13/bluecrail/b2/f9/j/o0395023611697473842.jpg"><img border="0" alt="クレールのコツブロ" src="https://stat.ameba.jp/user_images/20111227/13/bluecrail/b2/f9/j/o0395023611697473842.jpg"></a><br><br><br>これでサーバーの設定は完了です。<br>コマンドプロンプト(黒いやつね)を閉じてください。<br><br>ホームページを作成するにあたり実際にブラウザで確認する必要があります。<br>かといっていきなりレンタルサーバーなど使用しては費用がもったいないのでローカルネットワークでの確認ができるように設定を行いました。<br><br>ですのでご自分のパソコンで作成したホームページは見れても他のパソコンからは見られないのでご理解下さい。<img alt="汗" src="https://stat.ameba.jp/blog/ucs/img/char/char2/028.gif"><br><br><br>次は「 Eclipse 」の操作方法です。<br><br>①eclipseフォルダを開きます。その中に<span style="color: rgb(255, 153, 0);">丸い形で</span>でeclipseと記述があるアイコンをクリックしましょう。<br><br>②実行しましたら、下記の画面が表示されると思います。赤枠のワークスペースは、作成したファイルを保存する場所をして出来ます。今後はphp言語も使用するので必ず、xamppフォルダの中の<span style="color: rgb(255, 0, 0);">htdocs</span>フォルダに保存するように指定ます。<br><br><br><a href="http://stat.ameba.jp/user_images/20111227/13/bluecrail/0b/70/j/o0471022911697503559.jpg"><img border="0" alt="クレールのコツブロ" src="https://stat.ameba.jp/user_images/20111227/13/bluecrail/0b/70/j/t02200107_0471022911697503559.jpg"></a><br><br><a href="http://stat.ameba.jp/user_images/20111227/13/bluecrail/fc/2e/j/o0471022911697493233.jpg"></a><br>そうでないと、ローカルサーバーで確認が出来ないためです。<br><br>③保存先指定が終わりましたら、「 OK 」を押して完了です。これで作成が可能になります。下記のような画面になると思います。これがhtmlやプログラム開発する環境開発ツールです。<br><br><br><br><a href="http://stat.ameba.jp/user_images/20111227/16/bluecrail/96/5b/j/o0392031511697740008.jpg"><img border="0" alt="クレールのコツブロ" src="https://stat.ameba.jp/user_images/20111227/16/bluecrail/96/5b/j/t02200177_0392031511697740008.jpg"></a><br><br><br>できましたでしょうか？<br>今回はここまでです。<img alt="にひひ" src="https://stat.ameba.jp/blog/ucs/img/char/char2/193.gif"><br><br><br>次回は、このEclipseを使用しての制作を行いますので<br>Eclipseが使用できるようにしておいて下さい。<br><br>ではまた、次回まで<img alt="パー" src="https://stat.ameba.jp/blog/ucs/img/char/char2/106.gif"><br><br><br>
]]>
</description>
<link>https://ameblo.jp/bluecrail/entry-11118673211.html</link>
<pubDate>Tue, 27 Dec 2011 10:40:38 +0900</pubDate>
</item>
<item>
<title>WEB制作を学びたい初心者・主婦の為の講座　～ｈｔｍｌ その3～</title>
<description>
<![CDATA[ 皆さんこんばんわ<img src="https://stat.ameba.jp/blog/ucs/img/char/char2/028.gif" alt="汗"><br><br><br>お久しぶりですね。<br>すいません。<img src="https://stat.ameba.jp/blog/ucs/img/char/char2/029.gif" alt="あせる">ブログ更新が遅くなりました。<img src="https://stat.ameba.jp/blog/ucs/img/char/char2/028.gif" alt="汗"><br><br><br>ここ最近は風邪で寝込んでおりまして・・・・。<br>でも、何とかブログできる状態ですので、前回の続きを行いたいと思います。<br><br>前回はメモ帳で、htmlとcssについて講座をしましたよね<img src="https://stat.ameba.jp/blog/ucs/img/char/char2/040.gif" alt="はてなマーク"><br>今回は、htmlについてもう少し詳しく触れていきたいと思います。<br><br>前回まではメモ帳に<span style="color: rgb(0, 102, 255);">htmlタグ</span>を打ち込みましたが、その<span style="color: rgb(0, 102, 255);">html</span>にも<span style="color: rgb(255, 102, 0);">バージョン</span>があります。<br>HTMLを記述する時は、<span style="color: rgb(0, 102, 255);">html</span><span style="color: rgb(255, 102, 0);">バージョン</span>を指定しなければなりません。<br><br>※今回は、画像添付なしで説明をします。<br><br>1行目にHTMLのバージョンは以下のように打ち込みます。<br><br>■ HTML 4.01 (Strict)の場合<br><span style="color: rgb(0, 102, 255);">&lt;!DOCTYPE HTML PUBLIC "-//WC3//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;</span><br><br><span class="bold">■ HTML4.01（Transitional）の場合</span><br><span style="color: rgb(0, 102, 255);">&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN Transitional" "http://www.w3.org/TR/html4/loose.dtd"&gt;</span><br><br><span class="bold">■ HTML4.01（Frameset）の場合</span><br><span style="color: rgb(0, 102, 255);">&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN Frameset" "http://www.w3.org/TR/html4/frameset.dtd"&gt;</span><br><br>と、上記のような種類があります。<br><span style="color: rgb(0, 102, 255);">&lt;!DOCTYPE&gt;</span>は使用されたHTMLがどのバージョンタイプで記述されているのか明記するために使用します。<br><br>そして次は、HTML文書であることを示すために必要な「 <span style="color: rgb(0, 102, 255);">&lt;html&gt;&lt;/html&gt;</span> 」タグを打ち込みます。<br>この<span style="color: rgb(0, 102, 255);">&lt;html&gt;タグ</span>は必ず記述します。すべてのコンテンツ(文書や画像)が<span style="color: rgb(0, 102, 255);">&lt;html&gt;タグ</span>の間に挟むように記述します。<br><br>次は、<span style="color: rgb(0, 102, 255);">&lt;head&gt;タグ</span>と<span style="color: rgb(0, 102, 255);">&lt;title&gt;タグ</span>です。<br><span style="color: rgb(0, 102, 255);">&lt;title&gt;タグ</span>はページのタイトルを記述します。それを<span style="color: rgb(0, 102, 255);">&lt;head&gt;タグ</span>で挟みます。<br><br><br>最後は、<span style="color: rgb(0, 102, 255);">&lt;body&gt;タグ</span>です。<br>この<span style="color: rgb(0, 102, 255);">&lt;body&gt;タグ</span>の中に前回までにメモ帳に記述した、&lt;div&gt;タグなどを記述していきます。<br><br>ここまではわかりましたでしょうか？<br>先程までの流れで記述すると・・・・・・・・・<img src="https://stat.ameba.jp/blog/ucs/img/char/char2/193.gif" alt="にひひ"><br><br><br>●サンプルソース<br><br><span style="color: rgb(255, 153, 0);">//HTMLバージョン</span><br><span style="color: rgb(0, 102, 255);">&lt;!DOCTYPE HTML PUBLIC "-//WC3//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;<br><br><span style="color: rgb(255, 153, 0);">//HTML文書を示します。</span><br style="color: rgb(255, 153, 0);">&lt;html&gt;<br><br><span style="color: rgb(255, 153, 0);">//ページタイトルを記述</span><br>&lt;head&gt;<br>&lt;title&gt;サンプルページです。&lt;/title&gt;<br>&lt;/head&gt;<br><br>&lt;body&gt;<br><span style="color: rgb(255, 153, 0);">//ここに内容を記述します。<br><span style="color: rgb(0, 102, 255);">&lt;div&gt;</span><br style="color: rgb(0, 102, 255);"><span style="color: rgb(0, 102, 255);">&lt;ul&gt;</span><br style="color: rgb(0, 102, 255);"><span style="color: rgb(0, 102, 255);">&lt;li&gt;&lt;a herf=""&gt;メニュー1&lt;/a&gt;&lt;/li&gt;</span><br style="color: rgb(0, 102, 255);"><span style="color: rgb(0, 102, 255);">&lt;/ul&gt;</span><br style="color: rgb(0, 102, 255);"><span style="color: rgb(0, 102, 255);">&lt;/div&gt;</span><br style="color: rgb(0, 102, 255);"></span>&lt;/body&gt;<br><br>&lt;/html&gt;<br></span><br><br>と、こんな具合です。<br>メモ帳に記述する場合は手入力か、コピーして貼り付けしますが、専用のソフトがあれば<br>もともと設定されています。<br><br>なんとなく、わかりましたでしょうか？<br><br>最初は実際に手入力してみるのもいいかもしれません。最初はスペルミスが多くなりますから<img src="https://stat.ameba.jp/blog/ucs/img/char/char2/139.gif" alt="ニコニコ"><br>英語の羅列を読むことに慣れましょう<img src="https://stat.ameba.jp/blog/ucs/img/char/char2/176.gif" alt="！！"><br><br><br>今回はここまで。<br>体調が悪いですから、すいません。<br><br>次回は、専用ソフトなどを使用して作成したいと思います。<br><br><br>ではまた、次回まで<img src="https://stat.ameba.jp/blog/ucs/img/char/char2/106.gif" alt="パー"><br><br><br><br>おやすみなさい。<img src="https://stat.ameba.jp/blog/ucs/img/char/char2/030.gif" alt="ぐぅぐぅ"><br><br><br><br><br><br><br>
]]>
</description>
<link>https://ameblo.jp/bluecrail/entry-11112605872.html</link>
<pubDate>Tue, 20 Dec 2011 23:12:56 +0900</pubDate>
</item>
<item>
<title>WEB制作を学びたい初心者・主婦の為の講座　～ｈｔｍｌ その2～</title>
<description>
<![CDATA[ こんばんわ<img alt="ニコニコ" src="https://stat.ameba.jp/blog/ucs/img/char/char2/139.gif"><br><br>クレールです。<br><br>宮古島は今日も雨ですね～。<br>少し肌寒い感じです。<br><br>さて、昨日は<span style="color: rgb(0, 102, 255);">ｈｔｍｌタグ</span>で簡単なページを作成しましたね？<img alt="ニコニコ" src="https://stat.ameba.jp/blog/ucs/img/char/char2/139.gif"><br>これまででわからない事はありましたでしょうか？<br><br>いくつか問題を出しますね<img alt="音譜" src="https://stat.ameba.jp/blog/ucs/img/char/char2/038.gif"><br>自分自身で答えてみてください。<br><br><br>①<span style="color: rgb(0, 102, 255);">ｈｔｍｌタグ</span>は、メモ帳だけでも作成はできる？<br><br>②「 <span style="color: rgb(0, 102, 255);">&lt;</span> 」と「 <span style="color: rgb(0, 102, 255);">&gt;</span> 」の事を名称はなんでしょう？<br><br>③「 <span style="color: rgb(0, 102, 255);">&lt;div&gt;&lt;/div&gt;</span> 」の名称は？<br><br>④リストを作成する<span style="color: rgb(0, 102, 255);">htmlタグ</span>は何でしょう？<br><br>⑤「 <span style="color: rgb(0, 102, 255);">&lt;a href=""&gt;&lt;/a&gt;</span> 」の事を、エータグの他に何と呼ぶ？<br><br>⑥<span style="color: rgb(0, 102, 255);">HTML</span>の正式名称は？<br><br><br>以上が問題です。<br>何問解けましたでしょうか？<br><br>分からない方は、前回までの内容を再度読んで理解して頂ければ幸いです。<img alt="ニコニコ" src="https://stat.ameba.jp/blog/ucs/img/char/char2/139.gif"><br><br>では、答え合わせをします。<br><br>①<span style="color: rgb(0, 102, 255);">htmlタグは</span>メモ帳だけでも作成は可能です。専用ソフトがあるとより便利で作成しやすいですが最初はメモ帳で作成して慣れましょう。<br><br>②「 <span style="color: rgb(0, 102, 255);">&lt;</span> 」と「 <span style="color: rgb(0, 102, 255);">&gt;</span> 」の名称は・・・・<span style="color: rgb(255, 153, 0);">ギュメ</span>でしたね<img alt="キラキラ" src="https://stat.ameba.jp/blog/ucs/img/char/char2/123.gif"><br><br>③「 <span style="color: rgb(0, 102, 255);">&lt;div&gt;&lt;/div&gt;</span> 」の名称は・・・・<span style="color: rgb(255, 153, 0);">ディブタグ</span>でしと呼びましたね。<br><br>④リストを作成する<span style="color: rgb(0, 102, 255);">htmlタグ</span>は、「 <span style="color: rgb(0, 102, 255);">&lt;ul&gt;&lt;/ul&gt;</span> 」と「 <span style="color: rgb(0, 102, 255);">&lt;li&gt;&lt;/li&gt;</span> 」でしたね。<img alt="ニコニコ" src="https://stat.ameba.jp/blog/ucs/img/char/char2/139.gif"><br><br>⑤「 <span style="color: rgb(0, 102, 255);">&lt;a href=""&gt;&lt;/a&gt;</span> 」の事を、エータグの他には<span style="color: rgb(255, 153, 0);">リンクタグ</span>でしたね。<br><br>⑥<span style="color: rgb(0, 102, 255);">HTML</span>の正式名称は「 <span style="color: rgb(255, 153, 0);">Hyper Text Merkup Language</span> 」でしたねぇ。 <br><br>何問正解でしたか？<br>復習する方は、<br><br><a target="_blank" href="http://ameblo.jp/bluecrail/entry-11106396802.html">WEB制作を学びたい初心者・主婦の為の講座　～始まり～</a><br><br><a target="_blank" href="http://ameblo.jp/bluecrail/entry-11107186794.html">WEB制作を学びたい初心者・主婦の為の講座　～HTML その1～</a><br><br>を見て復習して下さい。(b^-゜)<br><br><br>さてさて、今日は以前に作成したｈｔｍｌファイルに色や文字等の装飾する「 css 」に触れてみたいと思います。<br><br>その前に少し概要を・・・・<img alt="にひひ" src="https://stat.ameba.jp/blog/ucs/img/char/char2/193.gif"><br>え～「 <span style="color: rgb(255, 153, 255);">CSS</span> 」とは、「 <span style="color: rgb(255, 102, 0);">Cascading Style Sheet</span> 」(カスケーディング・スタイルシート)の省略名称です。<br>この「 <span style="color: rgb(255, 153, 255);">CSS</span> 」を使って、<span style="color: rgb(0, 102, 255);">ｈｔｍｌタグ</span>に色を設定したり細かい指定をすることができます。<br><br>今回は以前作成したｈｔｍｌファイルに直接「 <span style="color: rgb(255, 153, 255);">CSS</span> 」を打ち込みます。<br><br>では、さっそくhtmlファイルが格納されている「 sample 」フォルダを開いて下さい。<br>次に「 <span style="color: rgb(0, 153, 255);"><span style="color: rgb(0, 102, 255);">index.html</span> </span>」ファイルを開きます。<br>※開くときは「 index.html 」ファイルを選択した状態で「右クリック」→「プログラムから選択」→「Notepad」を選択して開きます。<br><br><br>開きましたら、「 <span style="color: rgb(0, 102, 255);">index.html</span> 」ファイルに次のように「 <span style="color: rgb(255, 153, 255);">CSS </span>」を打ち込みます。<br><br><br><a href="http://stat.ameba.jp/user_images/20111216/01/bluecrail/60/08/j/o0482022311674146876.jpg"><img border="0" style="float: left; clear: both;" alt="クレールのコツブロ" src="https://stat.ameba.jp/user_images/20111216/01/bluecrail/60/08/j/o0482022311674146876.jpg"></a><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>打ち込みましたでしょうか？<br>では説明します。<br><br>1行目：「 <span style="color: rgb(0, 102, 255);">&lt;div&gt;</span> 」「<span style="color: rgb(0, 102, 255);"> div </span>」の後に半角スペースを入力して「<span style="color: rgb(255, 153, 255);">style=</span>」を入力します。<br>そして、「 <span style="color: rgb(255, 153, 255);">font-size:20px;</span> 」で入力したら、それを「 <span style="color: rgb(255, 153, 255);">""</span>」(ダブルクォーテーション)で囲みます。<br>これは、「 <span style="color: rgb(255, 102, 0);">&lt;div&gt;タグの中にある文字サイズを20ｐｘの大きさに設定</span> 」と言った意味になります。<br><br>上記の入力方法は、<span style="color: rgb(0, 102, 255);">タグ</span>打ちなどと呼ばれて<span style="color: rgb(0, 102, 255);">タグ</span>に直接指定をしています。<br>実際にブラウザで動かしてみましょう。<img alt="ニコニコ" src="https://stat.ameba.jp/blog/ucs/img/char/char2/139.gif"><br><br><br>すると・・・・・<img alt="はてなマーク" src="https://stat.ameba.jp/blog/ucs/img/char/char2/040.gif"><br><br><br><br><a href="http://stat.ameba.jp/user_images/20111216/01/bluecrail/0a/7b/j/o0482022311674158717.jpg"><img border="0" style="float: left; clear: both;" alt="クレールのコツブロ" src="https://stat.ameba.jp/user_images/20111216/01/bluecrail/0a/7b/j/o0482022311674158717.jpg"></a><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>ぉお<img alt="ビックリマーク" src="https://stat.ameba.jp/blog/ucs/img/char/char2/039.gif"><br>文字が大きくなりました<img alt="音譜" src="https://stat.ameba.jp/blog/ucs/img/char/char2/038.gif"><br>分かりにくいですか？<img alt="あせる" src="https://stat.ameba.jp/blog/ucs/img/char/char2/029.gif"><br><br>では、また「 <span style="color: rgb(0, 102, 255);">index.html</span> 」を開いて、文字の大きさを変更して、色も設定してみましょう。<br>下記のように入力して下さい。<br><br><br><br><a href="http://stat.ameba.jp/user_images/20111216/01/bluecrail/70/43/j/o0482022311674170035.jpg"><img border="0" alt="クレールのコツブロ" src="https://stat.ameba.jp/user_images/20111216/01/bluecrail/70/43/j/o0482022311674170035.jpg"></a><br><br><br>今度は、「 <span style="color: rgb(0, 102, 255);">&lt;div&gt;</span> 」のフォントサイズを「 <span style="color: rgb(255, 153, 0);">12px</span> 」に設定して、<br>「<span style="color: rgb(0, 102, 255);">&lt;a href=""&gt;&lt;/a&gt;</span> 」は<span style="color: rgb(255, 153, 255);">color（色）</span>を「 <span style="color: rgb(255, 153, 255);">#1e90ff</span> 」に設定して下さい。<br><br>そしてブラウザで動かして見ましょう<img alt="音譜" src="https://stat.ameba.jp/blog/ucs/img/char/char2/038.gif"><br><span style="color: rgb(255, 153, 0);">※上書き保存は忘れずに「 Ctrl  」を押しながら「 s 」で出来ますよ</span><img alt="にひひ" src="https://stat.ameba.jp/blog/ucs/img/char/char2/193.gif"><br><br><br>すると・・・・<img alt="はてなマーク" src="https://stat.ameba.jp/blog/ucs/img/char/char2/040.gif"><br><br><br><br><a href="http://stat.ameba.jp/user_images/20111216/01/bluecrail/c0/a6/j/o0482022311674177846.jpg"><img border="0" alt="クレールのコツブロ" src="https://stat.ameba.jp/user_images/20111216/01/bluecrail/c0/a6/j/o0482022311674177846.jpg"></a><br><br><br><br>ん～<img alt="ニコニコ" src="https://stat.ameba.jp/blog/ucs/img/char/char2/139.gif"><br>文字も小さくなって、色もついてますね<img alt="チョキ" src="https://stat.ameba.jp/blog/ucs/img/char/char2/105.gif"><br><br>なんか少しおしゃれになりましたね<img alt="にひひ" src="https://stat.ameba.jp/blog/ucs/img/char/char2/193.gif"><br>色の設定は16進数で記述していて覚えるのは無理に等しいので<br>こちら→<a target="_blank" href="http://www.colordic.org/">WEB色見本 原色大辞典　- HTML Color Names</a>を紹介します。<br>私はここにお世話になってます。<img alt="チョキ" src="https://stat.ameba.jp/blog/ucs/img/char/char2/105.gif"><br><br><br><br>これが「 <span style="color: rgb(255, 153, 255);">CSS</span> 」です。<br><br>「 <span style="color: rgb(0, 102, 255);">ｈｔｍｌ </span>」と「 <span style="color: rgb(255, 153, 255);">CSS </span>」を組み合わせるともっとホームページ制作が楽しくなってきますよ<img alt="音譜" src="https://stat.ameba.jp/blog/ucs/img/char/char2/038.gif"><br><br><br>今日の講座はここまで<img alt="べーっだ！" src="https://stat.ameba.jp/blog/ucs/img/char/char2/188.gif"><br>少しずつ慣れていきましょう。<img alt="グッド！" src="https://stat.ameba.jp/blog/ucs/img/char/char2/187.gif"><br><br><br>次回はｈｔｍｌとｃｓｓについてもう少し深く触れたいと思います。<br><br>では、お休みなさい。<img alt="ぐぅぐぅ" src="https://stat.ameba.jp/blog/ucs/img/char/char2/030.gif"><br><br><br><br>そういえば今日の夕飯はステーキでしたが、皆さんはお肉の焼き具合はどれくらいですか？<br>私は、レアで焼きます。そして、「頂きまぁす<img alt="ビックリマーク" src="https://stat.ameba.jp/blog/ucs/img/char/char2/039.gif">」の頃には余熱でミディアムレアになっていて、おいしいです<img alt="グッド！" src="https://stat.ameba.jp/blog/ucs/img/char/char2/187.gif"><br><br><br><br><br><table width="500px" border="0"><tbody><tr><td><a href="http://www.amazon.co.jp/gp/product/484432456X/ref=as_li_qf_sp_asin_il?ie=UTF8&amp;tag=crail05-22&amp;linkCode=as2&amp;camp=247&amp;creative=1211&amp;creativeASIN=484432456X"><img border="0" src="https://img-proxy.blog-video.jp/images?url=http%3A%2F%2Fws.assoc-amazon.jp%2Fwidgets%2Fq%3F_encoding%3DUTF8%26Format%3D_SL110_%26ASIN%3D484432456X%26MarketPlace%3DJP%26ID%3DAsinImage%26WS%3D1%26tag%3Dcrail05-22%26ServiceVersion%3D20070822"></a><img width="1" height="1" border="0" style="border: medium none ! important; margin: 0px ! important;" src="https://www.assoc-amazon.jp/e/ir?t=crail05-22&amp;l=as2&amp;o=9&amp;a=484432456X"></td><td>&nbsp;</td><td><br></td><td><a href="http://www.amazon.co.jp/gp/product/4798027634/ref=as_li_qf_sp_asin_il?ie=UTF8&amp;tag=crail05-22&amp;linkCode=as2&amp;camp=247&amp;creative=1211&amp;creativeASIN=4798027634"><img border="0" src="https://img-proxy.blog-video.jp/images?url=http%3A%2F%2Fws.assoc-amazon.jp%2Fwidgets%2Fq%3F_encoding%3DUTF8%26Format%3D_SL110_%26ASIN%3D4798027634%26MarketPlace%3DJP%26ID%3DAsinImage%26WS%3D1%26tag%3Dcrail05-22%26ServiceVersion%3D20070822"></a><img width="1" height="1" border="0" src="https://www.assoc-amazon.jp/e/ir?t=crail05-22&amp;l=as2&amp;o=9&amp;a=4798027634" style="border: medium none ! important; margin: 0px ! important;"></td><td>&nbsp;</td><td><br></td><td><a href="http://www.amazon.co.jp/gp/product/483993276X/ref=as_li_qf_sp_asin_il?ie=UTF8&amp;tag=crail05-22&amp;linkCode=as2&amp;camp=247&amp;creative=1211&amp;creativeASIN=483993276X"><img border="0" src="https://img-proxy.blog-video.jp/images?url=http%3A%2F%2Fws.assoc-amazon.jp%2Fwidgets%2Fq%3F_encoding%3DUTF8%26Format%3D_SL110_%26ASIN%3D483993276X%26MarketPlace%3DJP%26ID%3DAsinImage%26WS%3D1%26tag%3Dcrail05-22%26ServiceVersion%3D20070822"></a><img width="1" height="1" border="0" src="https://www.assoc-amazon.jp/e/ir?t=crail05-22&amp;l=as2&amp;o=9&amp;a=483993276X" style="border: medium none ! important; margin: 0px ! important;"></td></tr><tr></tr></tbody></table><br><br><br>よかったら上記の本をお勧めします。<br>私もお世話になった本です。<img src="https://stat.ameba.jp/blog/ucs/img/char/char2/139.gif" alt="ニコニコ"><br><br>より楽しくHTMLとCSSの制作が楽しくなります。<img src="https://stat.ameba.jp/blog/ucs/img/char/char2/038.gif" alt="音譜"><br><br>おすすめはHTMLとCSSは別々に購入したほうが内容は充実です。<img src="https://stat.ameba.jp/blog/ucs/img/char/char2/105.gif" alt="チョキ"><br><br><br><br><br>
]]>
</description>
<link>https://ameblo.jp/bluecrail/entry-11108193942.html</link>
<pubDate>Thu, 15 Dec 2011 19:50:33 +0900</pubDate>
</item>
<item>
<title>WEB制作を学びたい初心者・主婦の為の講座　～HTML その1～</title>
<description>
<![CDATA[ こんばんわ～<img alt="にひひ" src="https://stat.ameba.jp/blog/ucs/img/char/char2/193.gif"><br><br>今日は涼しい感じですねぇ。・・・・・宮古島はね<img alt="汗" src="https://stat.ameba.jp/blog/ucs/img/char/char2/028.gif"><br>はい、ワタシは<span style="color: rgb(255, 0, 0);">半袖</span>です。まだいけます<img alt="チョキ" src="https://stat.ameba.jp/blog/ucs/img/char/char2/105.gif"><br><br>久しぶりに、<span style="color: rgb(255, 153, 51);">日本まんが昔話のDVD</span>をみました。<br>懐かしいですねぇ。あれって今も放送しているんですか？<img alt="はてなマーク" src="https://stat.ameba.jp/blog/ucs/img/char/char2/040.gif"><br>放送してないですよね<img alt="はてなマーク" src="https://stat.ameba.jp/blog/ucs/img/char/char2/040.gif"><br><br>あれは子供にも大人にも良いですよね<img alt="音譜" src="https://stat.ameba.jp/blog/ucs/img/char/char2/038.gif">・・・・・でも、何ですかね。あれを見ると<br>明日学校な気分になります。人間の習慣は怖いものです・・・・・・。<br><br><br>さて、昨日はｈｔｍｌのちょっとした概念とメモ帳で簡単な作成を勉強しましたね<img alt="にひひ" src="https://stat.ameba.jp/blog/ucs/img/char/char2/193.gif"><br>内容はご理解いただけましたでしょうか？すぐに理解するの難しいと思いますので<br>ご自分のペースでゆっくり勉強していけば良いと思います。<img alt="チョキ" src="https://stat.ameba.jp/blog/ucs/img/char/char2/105.gif"><br><br>今日は簡単な<span style="color: rgb(0, 102, 255);">ｈｔｍｌタグ</span>でページを作成したいと思います。<br><br>では、まず最初に<span style="color: rgb(0, 102, 255);">ｈｔｍｌ</span>ファイルを格納する為のフォルダを作成します。<br>好きな名前でいいですがここでは「 <span style="color: rgb(255, 204, 51);">sample</span> 」フォルダとして作成します。<br>「 マウス右クリック 」→「 新規作成 」→「 フォルダ  」<br><br><br><a href="http://stat.ameba.jp/user_images/20111214/21/bluecrail/45/de/j/o0373021211671953895.jpg"><img border="0" alt="クレールのコツブロ" src="https://stat.ameba.jp/user_images/20111214/21/bluecrail/45/de/j/o0373021211671953895.jpg"></a><br><br><br>すると、下記のように「 新しいフォルダ 」ができますので<br><br><br><div><a href="http://stat.ameba.jp/user_images/20111214/21/bluecrail/36/90/j/o0185013911671953896.jpg"><img border="0" src="https://stat.ameba.jp/user_images/20111214/21/bluecrail/36/90/j/o0185013911671953896.jpg" alt="クレールのコツブロ"></a><br></div><br><br>これフォルダ名を「 sample 」に変更します。<br><br><br><a href="http://stat.ameba.jp/user_images/20111214/21/bluecrail/06/d9/j/o0185013911671953894.jpg"><img border="0" alt="クレールのコツブロ" src="https://stat.ameba.jp/user_images/20111214/21/bluecrail/06/d9/j/o0185013911671953894.jpg"></a><br><br><br>出来ましたら「 <span style="color: rgb(255, 204, 51);">sample</span> 」フォルダをダブルクリックで開きましょう<img alt="ニコニコ" src="https://stat.ameba.jp/blog/ucs/img/char/char2/139.gif"><br>開きましたら下記のようになると思います。<br><br><br><a href="http://stat.ameba.jp/user_images/20111214/22/bluecrail/1b/18/j/o0185013911671974149.jpg"><img border="0" alt="クレールのコツブロ" src="https://stat.ameba.jp/user_images/20111214/22/bluecrail/1b/18/j/o0185013911671974149.jpg"></a><br><br>空っぽですね・・・？そりゃもちろん空です。まだ何も格納してませんから<img alt="にひひ" src="https://stat.ameba.jp/blog/ucs/img/char/char2/193.gif"><br>これで<span style="color: rgb(0, 102, 255);"><br></span>ファイルを格納するフォルダが出来上がりました。<br>次は<span style="color: rgb(0, 102, 255);">ｈｔｍｌ</span>ファイルを作成します。<br>ここでは「 <span style="color: rgb(0, 102, 255);">index.html </span>」として保存します。<br><br>前回で説明したように(見てない方はこちら→<a style="color: rgb(255, 0, 0);" target="_blank" href="http://ameblo.jp/bluecrail/entry-11106396802.html">WEB制作を学びたい初心者・主婦の為の講座　～　始まり　～</a><span style="color: rgb(255, 0, 0);"><span style="color: rgb(0, 0, 0);">）<br>メモ帳を開きます。<br style="color: rgb(255, 0, 0);"></span></span><br>「ファイル名を付けて保存 」の時に保存場所を「 <span style="color: rgb(255, 204, 51);">samplel</span> 」フォルダに指定しまて保存します。<br><br>すると・・・・<img alt="はてなマーク" src="https://stat.ameba.jp/blog/ucs/img/char/char2/040.gif"><br><br><br><br><a href="http://stat.ameba.jp/user_images/20111214/22/bluecrail/c8/82/j/o0185013911672003102.jpg"><img border="0" alt="クレールのコツブロ" src="https://stat.ameba.jp/user_images/20111214/22/bluecrail/c8/82/j/o0185013911672003102.jpg"></a><br><br><br>上記のように保存した「 <span style="color: rgb(0, 102, 255);">index.html</span> 」が保存されたと思います。<br>保存されていない場合は保存先が「 <span style="color: rgb(255, 204, 51);">sample </span>」フォルダが選択されていないかと思います。<br><br>その「 index.html 」ファイルを開くと空白の状態で開かれたと思います。<br><br>さぁ<img alt="ビックリマーク" src="https://stat.ameba.jp/blog/ucs/img/char/char2/039.gif">いよいよ、ページを作成して行きましょう<img alt="音譜" src="https://stat.ameba.jp/blog/ucs/img/char/char2/038.gif">出来上がりが楽しみですねぇ<img alt="ニコニコ" src="https://stat.ameba.jp/blog/ucs/img/char/char2/139.gif"><br><br><br>「 index.html 」ファイルに書きのように入力してください。<br><span style="color: rgb(255, 0, 0);">※左側の行番号は入力しなくていいです。</span><br><br><br><br><a href="http://stat.ameba.jp/user_images/20111214/22/bluecrail/a3/54/j/o0439024611672042320.jpg"></a><br><a href="http://stat.ameba.jp/user_images/20111214/22/bluecrail/a3/54/j/o0439024611672042320.jpg"><img border="0" alt="クレールのコツブロ" src="https://stat.ameba.jp/user_images/20111214/22/bluecrail/a3/54/j/o0439024611672042320.jpg"></a><br><br><br>入力しました<img alt="はてなマーク" src="https://stat.ameba.jp/blog/ucs/img/char/char2/040.gif"><br><br>それでは説明したいと思います。<br><br>1行目と7行目：「 <span style="color: rgb(0, 102, 255);">&lt;div&gt;&lt;/div&gt;</span> 」 これは、<span style="color: rgb(255, 0, 0);">ディブタグ</span>と呼びます。囲い（入れ物）を作ったと思ってください。<br><br>2行目と6行目：「 <span style="color: rgb(0, 102, 255);">&lt;ul&gt;&lt;/ul&gt;</span> 」 これは、<span style="color: rgb(255, 0, 0);">ユーエルタグ</span>と呼びます。リストを作成するために使います。<br><br>3行目～5行目：「 <span style="color: rgb(0, 102, 255);">&lt;li&gt;&lt;/li&gt;</span> 」これは、<span style="color: rgb(255, 0, 0);">エルアイタグ</span>と呼びます。&lt;ul&gt;タグを組み合わせることでリストが出来上がります。<span style="color: rgb(255, 0, 0);"><br><span style="color: rgb(255, 153, 0);">※&lt;li&gt;タグは他のタグと組み合わせてもリストは出来ません。&lt;ul&gt;タグのみです。</span></span><br><br>そして「 <span style="color: rgb(0, 102, 255);">&lt;li&gt;&lt;/li&gt;</span> 」タグの中に「 <span style="color: rgb(0, 102, 255);">&lt;a href=""&gt;&lt;/a&gt;</span> 」がありますが、これは<span style="color: rgb(255, 0, 0);">エータグ</span>と呼びます。<br>別名を<span style="color: rgb(255, 0, 0);">リンクタグ</span>とも呼びます。そうです、クリックすると別のページに移動したりしますよね<img alt="はてなマーク" src="https://stat.ameba.jp/blog/ucs/img/char/char2/040.gif"><br>あれがこの<span style="color: rgb(255, 0, 0);">リンクタグ</span>なのです。<img alt="ニコニコ" src="https://stat.ameba.jp/blog/ucs/img/char/char2/139.gif"><br><br>今回は、3つのリンクタグを作成しましたのでトップページとは別に、メニューページを2ページ作成します。<br><br>では、「 index.html 」を保存しましたら、さっそくブラウザで表示してみましょう<img alt="音譜" src="https://stat.ameba.jp/blog/ucs/img/char/char2/038.gif"><br>※表示方法を忘れた方はこちら→<a style="color: rgb(255, 0, 0);" target="_blank" href="http://ameblo.jp/bluecrail/entry-11106396802.html">WEB制作を学びたい初心者・主婦の為の講座　～　始まり　～</a><span style="color: rgb(255, 0, 0);"><span style="color: rgb(0, 0, 0);"><br></span></span><br><br>すると・・・・・・？<br><br><br><br><a href="http://stat.ameba.jp/user_images/20111214/22/bluecrail/2e/2c/j/o0414024111672109590.jpg"><img border="0" src="https://stat.ameba.jp/user_images/20111214/22/bluecrail/2e/2c/j/o0414024111672109590.jpg" alt="クレールのコツブロ"></a><br><br><br>おほぉ<img src="https://stat.ameba.jp/blog/ucs/img/char/char2/038.gif" alt="音譜"><br>なんとメニューが表示されました。<img src="https://stat.ameba.jp/blog/ucs/img/char/char2/139.gif" alt="ニコニコ"><br><br>これはリストメニューです。<br>よくホームページのサイド側にメニューリストがあったりしますよね？それです<img src="https://stat.ameba.jp/blog/ucs/img/char/char2/188.gif" alt="べーっだ！"><br><br>リンクタグを記述してますからトップをクリックするとトップページへ、メニュー１をクリックするとメニュー１とリンクタグで指定したURLへ移動します。<br>今はまだURLは記述していませんのでクリックしても移動しません。<br><br>次は移動先のページを作成します。<br><br>メモ帳を新規で開いて「 <span style="color: rgb(0, 102, 255);">menu1.ｈｔｍｌ</span> 」で「 <span style="color: rgb(255, 204, 51);">sample</span> 」フォルダを指定して保存します。<br><br>「 <span style="color: rgb(0, 102, 255);">menu1.html</span> 」を開いて下記のように入力してください。<br><br><br><br><a href="http://stat.ameba.jp/user_images/20111214/23/bluecrail/09/67/j/o0439024611672140718.jpg"><img border="0" src="https://stat.ameba.jp/user_images/20111214/23/bluecrail/09/67/j/o0439024611672140718.jpg" alt="クレールのコツブロ"></a><br><br><br>入力しました<img src="https://stat.ameba.jp/blog/ucs/img/char/char2/040.gif" alt="はてなマーク"><br>では、説明します。<br><br>1行目：「 <span style="color: rgb(0, 102, 255);">&lt;h1&gt;&lt;/h1&gt;</span> 」これは、<span style="color: rgb(255, 0, 0);">エイチタグ</span>と呼びます。見出しを表示します。これは種類がありまして「 &lt;h2&gt; 」、「 &lt;h3&gt; 」～「 &lt;h6&gt; 」までありまして、数字が大きいほど文字が小さくなります。<br><br>2行目～3行目：「 &lt;br&gt; 」これは、<span style="color: rgb(255, 0, 0);">ビーアールタグ</span>と呼びます。改行に使います。2つ記述してますので、1つ間が空いた感じで表示されます。<br><br>4行目～10行目：「 index.html 」で作成したリストをコピーして3行目の下から貼り付けます。<br><br>これで「 menu1.html 」ファイルは完了です。<br>同じように「 menu2.html 」ファイルを作成して下さい。<br><br>作成しましたら「 index.html 」、「 menu1.html 」、「 menu2.html 」のリンクタグに以下のように移動先のURLを記述します。<br><br><br><br><a href="http://stat.ameba.jp/user_images/20111214/23/bluecrail/11/52/j/o0439017311672169263.jpg"><img border="0" src="https://stat.ameba.jp/user_images/20111214/23/bluecrail/11/52/j/o0439017311672169263.jpg" alt="クレールのコツブロ"></a><br><br><br>URLを記述しましたら、再度ブラウザで「 index.html 」を表示してみましょう。<img src="https://stat.ameba.jp/blog/ucs/img/char/char2/038.gif" alt="音譜"><br>表示しましたら、トップ、メニュー１、メニュー２とクリックしてみ下さい。<br>クリックしたページに移動すると思います。<img src="https://stat.ameba.jp/blog/ucs/img/char/char2/139.gif" alt="ニコニコ"><br><br>できました<img src="https://stat.ameba.jp/blog/ucs/img/char/char2/177.gif" alt="！？"><br>いやぁ～<img src="https://stat.ameba.jp/blog/ucs/img/char/char2/123.gif" alt="キラキラ">ホームページ作るのは楽しいですね。<br>これに色などつけたりして装飾するともっと楽しいですよね～<img src="https://stat.ameba.jp/blog/ucs/img/char/char2/188.gif" alt="べーっだ！"><br><br><br>今日はここまで<img src="https://stat.ameba.jp/blog/ucs/img/char/char2/139.gif" alt="ニコニコ"><br>お疲れ様でした。<br>簡単なhtmlページの作り方はわかりましたでしょうか？<br><br>次回はｃｓｓについて触れてみたいと思います。<br>ｈｔｍｌだけでは面白くないので文字の色や大きさなどを装飾してみたいと思います。(^-^)/ﾊｲ!!<br><br><br><br><br>それでは、また次回まで・・・・<img src="https://stat.ameba.jp/blog/ucs/img/char/char2/106.gif" alt="パー"><br><br>みなさんは、納豆はご飯と一緒に食べる<img src="https://stat.ameba.jp/blog/ucs/img/char/char2/040.gif" alt="はてなマーク">それとも別々に食べる<img src="https://stat.ameba.jp/blog/ucs/img/char/char2/040.gif" alt="はてなマーク"><br>私は・・・・別々<img src="https://stat.ameba.jp/blog/ucs/img/char/char2/177.gif" alt="！？">だって・・・ご飯がネバネバして美味しく食べれません<img src="https://stat.ameba.jp/blog/ucs/img/char/char2/029.gif" alt="あせる"><br><br><br>あ、なんかお腹すいてきた・・・<img src="https://stat.ameba.jp/blog/ucs/img/char/char2/028.gif" alt="汗">でも眠いので寝ます。<br><br>お休みなさい・・・<img src="https://stat.ameba.jp/blog/ucs/img/char/char2/030.gif" alt="ぐぅぐぅ"><br><br><br><br><br><br>
]]>
</description>
<link>https://ameblo.jp/bluecrail/entry-11107186794.html</link>
<pubDate>Wed, 14 Dec 2011 20:26:11 +0900</pubDate>
</item>
<item>
<title>WEB制作を学びたい初心者・主婦の為の講座　～　始まり　～</title>
<description>
<![CDATA[ こんばんわ<img src="https://stat.ameba.jp/blog/ucs/img/char/char2/139.gif" alt="ニコニコ"><br>クレールです。<br><br>今日は宮古島は寒くなかったでしたね？<br>あ・・・・私、<span style="color: rgb(0, 51, 255);">沖縄県は宮古島</span>に住んでおります。<img src="https://stat.ameba.jp/blog/ucs/img/char/char2/029.gif" alt="あせる"><br><br>昨日はなんか寒かったなぁ、なんて思っていましたら今日はちょっと暑い？かなぁと思いまして、<br>こんな時期はカゼをひきやすいですから、みなさん気をつけましょうね<img src="https://stat.ameba.jp/blog/ucs/img/char/char2/178.gif" alt="DASH!">(余計なお世話かな？<img src="https://stat.ameba.jp/blog/ucs/img/char/char2/028.gif" alt="汗">)<br><br><br>さて、今日は<span style="color: rgb(0, 102, 255);">ｈｔｍｌ</span>について講座したいと思います。<br>すぐに作成したいところですが、その前に<span style="color: rgb(0, 102, 255);">html</span>について少し触れてみましょう。<br><br><span style="color: rgb(0, 102, 255);">html</span>というのは　<font size="2"><span style="color: rgb(255, 0, 0);">HyperText　Markup　Language</span></font> の略です。　「ハイパーテキスト」や「タグ」( tag )等といった呼び方をされている事もあると思いますが、ほとんどは<span style="color: rgb(0, 102, 255);">htmlタグ</span>と言った呼び方が多いかもしれません。(私の周りでは・・・・)<br><br>「タグ」と言うのは 「印」 (Markupと言って色を付けたり文字の装飾をする等)の事をいいます。<br>その「タグ」 は 「<span style="color: rgb(0, 102, 255);">&lt;</span>」 と 「<span style="color: rgb(0, 102, 255);">&gt;</span>」 （<span style="color: rgb(255, 0, 0);">ギュメ</span>と言います）の間に記入します。<br><br style="color: rgb(255, 102, 0);"><span style="color: rgb(51, 153, 51);">プログラム言語</span>の１つですが他の言語とは違って、<span style="color: rgb(255, 0, 0);">プログラム専用ソフトがなくても</span>「メモ帳」や「テキストエディタ」等でも作成は可能です。<br><br>ですが、専用ソフトがあったほうが何かと便利です。この辺についてはまた後述します。<br><br><br><br>概要はこの辺にして、早速<img src="https://stat.ameba.jp/blog/ucs/img/char/char2/039.gif" alt="ビックリマーク">簡単な<span style="color: rgb(0, 102, 255);">ｈｔｍｌ</span>を作成したいと思います。<img src="https://stat.ameba.jp/blog/ucs/img/char/char2/193.gif" alt="にひひ"><br>最初はメモ帳に作成をして見ましょう。<br><br>※これは<span style="color: rgb(255, 0, 0);">Windows</span>を使用している事を前提で説明します。<br><br>メモ帳は「スタートメニュー」→「すべてのプログラム」→「アクセサリー」→「メモ帳」です。<br>スタートメニューに既にあればOKですがない場合は上記から選択してください。(σ・∀・)σ<br><br><br><br><a href="http://stat.ameba.jp/user_images/20111214/00/bluecrail/5c/58/j/o0271039311670542006.jpg"><img border="0" src="https://stat.ameba.jp/user_images/20111214/00/bluecrail/5c/58/j/t02200319_0271039311670542006.jpg" alt="クレールのコツブロ"></a><br><br><br><br>メモ帳を開いたら、下記のように「初めてのHTMLだよ～！」を入力してみましょう。<br><br><br><br><a href="http://stat.ameba.jp/user_images/20111214/01/bluecrail/98/b8/j/o0375015011670577615.jpg"><img border="0" src="https://stat.ameba.jp/user_images/20111214/01/bluecrail/98/b8/j/t02200088_0375015011670577615.jpg" alt="クレールのコツブロ"></a><br><br><br><br>画像は見えました？<img src="https://stat.ameba.jp/blog/ucs/img/char/char2/029.gif" alt="あせる"><br>記述は「初めての<span style="color: rgb(0, 51, 255);">&lt;font&gt;</span>HTML<span style="color: rgb(0, 51, 255);">&lt;/font&gt;</span>だよ～！」と入力しました。<br><br>この<span style="color: rgb(0, 51, 255);">&lt;font&gt;&lt;/font&gt;</span>が<span style="color: rgb(255, 0, 0);">ｈｔｍｌタグ</span>になり、<span style="color: rgb(0, 51, 255);">&lt;font&gt;</span>が始まりで<span style="color: rgb(0, 51, 255);">&lt;/font&gt;</span>が終わりを示します。<br>次に入力したメモ帳を newtext.html といったファイル名を入力し、ファイルの種類を「すべてのファイル」を選択して保存をします。<br><br><br><br><a href="http://stat.ameba.jp/user_images/20111214/01/bluecrail/bd/2d/j/o0628009611670586797.jpg"><img border="0" src="https://stat.ameba.jp/user_images/20111214/01/bluecrail/bd/2d/j/o0628009611670586797.jpg" alt="クレールのコツブロ"></a><br><br><br>保存しましたら、お待ちかねブラウザで表示してみましょう。<img src="https://stat.ameba.jp/blog/ucs/img/char/char2/193.gif" alt="にひひ"><br>ブラウザはインターネットを見るものだと認識してもらえればいいかと思います。<br><br>ここでは「Firefox」を使用して表示します。<br>「ファイルを開く」で、先程html形式で保存したファイルを指定して、開きます。<br><br><br>すると・・・・・<img src="https://stat.ameba.jp/blog/ucs/img/char/char2/038.gif" alt="音譜"><br><br><br><a href="http://stat.ameba.jp/user_images/20111214/01/bluecrail/d2/d9/j/o0390016311670594074.jpg"><img border="0" src="https://stat.ameba.jp/user_images/20111214/01/bluecrail/d2/d9/j/o0390016311670594074.jpg" alt="クレールのコツブロ"></a><br><br><br>と、表示されましたが・・・・・・・・ん～良く分かりませんね？<img src="https://stat.ameba.jp/blog/ucs/img/char/char2/028.gif" alt="汗"><br><br><br>では先程の「newtext.html」をメモ帳で開いて<span style="color: rgb(0, 51, 255);">&lt;font&gt;&lt;/font&gt;</span>を<span style="color: rgb(0, 51, 255);">&lt;b&gt;&lt;/b&gt;</span>に変更します。<br>「保存したファイル上で右クリック」→「プログラムから開く」で編集できます。<br>もしくは、メモ帳を新しく開いて、htmlファイルをドラッグしても編集は可能です。<br><br><br><a href="http://stat.ameba.jp/user_images/20111214/01/bluecrail/45/19/j/o0375015011670599351.jpg"><img border="0" src="https://stat.ameba.jp/user_images/20111214/01/bluecrail/45/19/j/t02200088_0375015011670599351.jpg" alt="クレールのコツブロ"></a><br><br><br>上記のように変更しましたら、先程と同じように保存をして、ブラウザで開いて見ましょう。<img src="https://stat.ameba.jp/blog/ucs/img/char/char2/139.gif" alt="ニコニコ"><br><br>すると・・・・<img src="https://stat.ameba.jp/blog/ucs/img/char/char2/147.gif" alt="えっ"><br><br><br><a href="http://stat.ameba.jp/user_images/20111214/01/bluecrail/4c/f9/j/o0390016311670601678.jpg"><img border="0" src="https://stat.ameba.jp/user_images/20111214/01/bluecrail/4c/f9/j/o0390016311670601678.jpg" alt="クレールのコツブロ"></a><br><br><br>ぉお<img src="https://stat.ameba.jp/blog/ucs/img/char/char2/038.gif" alt="音譜">HTMLの文字が太くなって表示されました<img src="https://stat.ameba.jp/blog/ucs/img/char/char2/098.gif" alt="クラッカー"><br>これがHTMLです。<img src="https://stat.ameba.jp/blog/ucs/img/char/char2/105.gif" alt="チョキ"><br><span style="color: rgb(0, 51, 255);">&lt;b&gt;&lt;/b&gt;</span>は文字を太くする為の<span style="color: rgb(255, 0, 0);">ｈｔｍｌタグ</span>です。<br><br><br>先程の<span style="color: rgb(0, 51, 255);">&lt;font&gt;&lt;/font&gt;</span>は文字として認識してます。ノーマルの状態だと思ってください。<br>他にも、<span style="color: rgb(0, 51, 255);">&lt;i&gt;&lt;/i&gt;</span>や<span style="color: rgb(0, 51, 255);">&lt;u&gt;&lt;/u&gt;</span>、<span style="color: rgb(0, 51, 255);">&lt;s&gt;&lt;/s&gt;</span>などいろいろなhtmlがありますので色々と試してみてください<img src="https://stat.ameba.jp/blog/ucs/img/char/char2/188.gif" alt="べーっだ！"><br><br>ネットで調べてみるとゴロゴロとネタが転がっていますので、面白いですよ。<br><br><br><br><br><br>それでは今日はここまで<img src="https://stat.ameba.jp/blog/ucs/img/char/char2/139.gif" alt="ニコニコ"><br><br><br>次回はｈｔｍｌタグを使用して簡単なページを作成したいと思います。<br><br><br>長らくお疲れ様でした。<img src="https://stat.ameba.jp/blog/ucs/img/char/char2/029.gif" alt="あせる"><br><br><br><br>それでは、また次回まで・・・<img src="https://stat.ameba.jp/blog/ucs/img/char/char2/030.gif" alt="ぐぅぐぅ"><br>おやすみなさい。Zzz…(*´?｀*)｡o○<br><br><br>お、雨が降ってきました。気持ちよく眠れそうです。<br>・・・体調には気をつけて。<br><br><br><br><br>
]]>
</description>
<link>https://ameblo.jp/bluecrail/entry-11106396802.html</link>
<pubDate>Wed, 14 Dec 2011 00:04:25 +0900</pubDate>
</item>
<item>
<title>WEB制作を学びたい初心者・主婦の為の講座　～　あいさつ　～</title>
<description>
<![CDATA[ 初めまして。<br><br>クレールと申します。<br><br>ここでは「WEBサイトやWEBアプリケーションを制作したいけど、どうしたらいいの？」と困っている初心者や、主婦の方等の為の講座ブログです。<img src="https://stat.ameba.jp/blog/ucs/img/char/char2/188.gif" alt="べーっだ！"><br><br>とは言っても私も2年しか経っていないので、初心者みたいなものです。<br>それぐらい覚えることがたくさんあるわけで・・・・・<img src="https://stat.ameba.jp/blog/ucs/img/char/char2/028.gif" alt="汗"><br><br>結構基金訓練などでもWEBサイト、Flash、Iｌｌustratorなどがあると思います。<br>基金訓練に通っている人でもついてゆけずに途中でやめてしまう方も多いようです。<br><br>私も2年ほど前は基金訓練に通っていました。<br>と言っても、そこは10人の受講生がいたらしいんですが、一人辞めてしまってそうで<img src="https://stat.ameba.jp/blog/ucs/img/char/char2/028.gif" alt="汗"><br>その時休職中だった私に紹介で電話がきまして、「チャンス<img src="https://stat.ameba.jp/blog/ucs/img/char/char2/039.gif" alt="ビックリマーク">」と思いました<img src="https://stat.ameba.jp/blog/ucs/img/char/char2/105.gif" alt="チョキ"><br><br>昔からプログラムやサイト制作を勉強したかったんですが、独学は結構大変ですし、<br>専門学校に行く予算もないですから、あきらめつつもどこかでやりたい気持ちでしたから<br>こんな話が転がってき時は、嬉しくてたまりませんでした<img src="https://stat.ameba.jp/blog/ucs/img/char/char2/193.gif" alt="にひひ"><br><br>で、途中参加しましたが・・・・もうその時は受講期間の役3分の1は進んでいたわけで・・・・・<br>先生が何を言っているのか分かりませんでしたよ。(°Д°；≡°Д°；)<br><br><br>何とか必死で本を最初から呼んで、分からないところは聞いて・・・・・・みたな感じで、<br>他の9名にこの差を埋める為に努力しました。<br><br>javaの試験もあったようで、「なぬぅ～っ<img src="https://stat.ameba.jp/blog/ucs/img/char/char2/177.gif" alt="！？">」って思いました。で、結果は落ちました・・・・。<br>残念でしたよ、しばらくは「もう一度最初から授業を受けたい」なんて思っていました。<br><br>後述しますが、今はjavaも少々勉強中ですが、phpが得意となりました。(゜д゜；)ｴｯ・・・？<br><br><br>と、話が飛んだような気がしますが、<br>ここでは私なりに初心者や主婦の方々の為に講座をブログしていきたいと思いますので途中で断念した人も<br>また頑張ろうかなぁって思っている人も、これを気に覚えて頂ければ幸いです。<img src="https://stat.ameba.jp/blog/ucs/img/char/char2/139.gif" alt="ニコニコ"><br>宜しくお願いします。<br><br>いきなりプログラムは難しいと思いますのでｈｔｍｌやｃｓｓについて始めたいと思います。<br><br><br><br><br>では、本日はここまで・・・・・<img src="https://stat.ameba.jp/blog/ucs/img/char/char2/106.gif" alt="パー"><br><br><br><br><br>おやすみなさい。<img src="https://stat.ameba.jp/blog/ucs/img/char/char2/030.gif" alt="ぐぅぐぅ"><br><br><br><br><br><br><br><br>
]]>
</description>
<link>https://ameblo.jp/bluecrail/entry-11105468407.html</link>
<pubDate>Tue, 13 Dec 2011 00:20:54 +0900</pubDate>
</item>
</channel>
</rss>
