ホームページの勉強日記

画像の表示の勉強

2009-12-08T15:53:00.005+09:00

今日は画像の表示の勉強です。

まず＜img src="画像パス" alt="代替テキスト"＞

をHTMLに記述するのですが。

画像のサイズも一緒に決めてしまいます。

＜img src="画像パス" alt="代替テキスト" height="" width=""＞

前回作成した、トップページ画面に画像を挿入してみます。

今回私の記述はこんな感じです。

↓

HTML

＜img id="photo" src="./画像名" alt="ミニピン" width="80" height="80" /＞

CSS

#photo {

float:left;

}

画像となりの記述は＜p＞タグを使っています。

インライン要素とブロックレベル要素

2009-12-06T22:43:00.003+09:00

インライン要素とブロックレベル要素

HTMLには大きく分けてインライン要素とブロックレベル要素の２つに分類されます。

インライン要素は基本１行の中に並べて配置することができます。

ブロックレベル要素は一個で１行を構成しますから、ブロックレベル要素同士を並べて配置することが基本できません。

ブロックレベル要素は他のブロックレベル要素・インライン要素・テキストを内側に含むことができます。

けれど、インライン要素にブロックレベル要素を含むことができません。

最初に本だけを読んでいるときは？？？

なんのことやら？理解するのが難しかったのですけど、実際自分でHTMLとCSSを書いていじってみると

よく解る！！！

というのは、float要素を教わったから。

float要素の説明も、だいたい回り込ませるって表現されていますけど「浮かせる」っていう表現があてはまるようです。

インライン要素

img

span

input

textarea

ブロックレベル要素

h１〜h６

table

div

ol・ul

form

枠線を付ける！！

2009-12-04T20:10:00.002+09:00

枠線を付ける！！

CSSでほぼすべての要素に枠線を付けることができるので、様々な表現ができますね。

border-style:枠線の種類

キーワード　　　　　　　　　種類

none(初期値)　　　　　　　　枠線なし

dotted　　　　　　　　　　　点線

dashed　　　　　　　　　　　ダッシュ

solid　　　　　　　　　　　　１本線

double　　　　　　　　　　　２本線

groove 　　　　　　　　　　　窪んだ線

ridge　　　　　　　　　　　　盛り上がった線

inset　　　　　　　　　　　　枠内がくぼむ

outset　　　　　　　　　　　枠内が盛り上がる

メニュー反転

2009-12-03T17:11:00.010+09:00

今日は引き続き、メニューをHTMLとCSSで作ってみました。

メニュータグにカーソルを合わせると、色が変わるのと範囲を指定しました。

まずHTMLで下のように記述し

CSSの記述は

li {

width:120px;

list-style:none;

float:left;

text-align:center;

font-size:14px;

border-right:none;

}

li a {

padding:15px;

display:block;

text-decoration:none;

color:#696969;

background:#f96dc0;

border-right:1px solid #fff;

background:#f96dc0 url(画像のファイルパス) no-repeat 105px 96%;

}

li a:hover {

color:#fff;

background:#df108a url(画像のファイルパス) no-repeat 105px 50%;

}

HTMLとCSSでカラーチャートを作ってみる

2009-12-02T18:35:00.005+09:00

今日は、カラーチャートをHTMLとCSSで作ってみました。
　　　　　　　　　↓

色を指定するには、キーワードと１６進数及び１０進数によって指定することができるんですが、インターネットで検索すると見本がたくさん出てくるので、ここは無理に覚えなくてもよさそうですね。

ちなみに、私は黒の場合＃000; 白の場合＃fff; と記述してもOKと教わりました。

短縮されるので覚えておくと、便利ですよね ♪

あとは、Photoshop（フォトショップ）のスポイトツールを使って色を吸い出したりする方法もあるみたいで、自分の使いたい色はほとんど使えそうです。

色の組み合わせ１つでもイメージがだいぶ変わって見えるので、センスが問われたりもするので、色の勉強は別でしないといけないですね、こんなときにカラーコーディネーターの資格を持っている方や勉強している方が近くに居たら心強いですね！！

ulタグとliタグ

2009-12-01T16:14:00.007+09:00

今日は、昨日のおさらいです。

<ul>タグと<li>タグを使って、こんな感じのメニューを作りたいと思います。

xhtml

↓

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

</head>

<body>

<ul>

<li>aaaaa</li>

<li>bbbbb</li>

<li>ccccc</li>

<li class="rline">ddddd</li> ←　d列の右にかかるボーダーラインを

<li>aaaaa</li>　　　　　　　　消したいので、class要素で指定。

<li>bbbbb</li>

<li>ccccc</li>

<li class="rline">ddddd</li>

</ul>

</body>

</html>

CSS

↓

* {

margin:0; padding:0;　　　　← ブラウザ標準のスタイルシートをクリアするため。

}

body {

line-height:1.8;　　　　　

text-align:center;

}

ul {

width:523px;　← 120×4＝liの幅、(5×2)×4＝paddingの幅、(1×4)−1＝borderの幅

}

li {

width:120px;

list-style:none;　　　　　　　

float:left; 　　 ← floatをleftにかけることによって、横並びにできます。

padding:20px 5px;　　 ← ulで指定した横幅に収まるように5pxとりました　

font-size:16px;　　　　　　 20pxは上下幅。

border-right:1px solid #fff;　　 ← 行間に線を入れて見やすくします。

border-bottom:1px solid #fff;

background:#0000ff;

color:#fff;

}

.rline {

border-right:none;　　← class要素。右の線を無くします。

}

特殊な文字

2009-11-30T17:48:00.012+09:00

Q、特殊な文字を入力したい。

ブラウザ上にと入力したい場合、ソース上に「」と入力すると段落の解釈とされて、ブラウザには表示されません。

そんな場合は、「<」の代わりに「＆lt;」「>」の代わりに「＆gt;」と半角英数字で記述します。

このように、記述するとブラウザ上ではこうなります。

　　　　　　　↓

表示する文字　　　　入力する文字　　　　入力する数字　　　　

<　　　　　　　　　　＆lt;　　　　　　　　　＆#60;

>　　　　　　　　　　＆gt;　　　　　　　　　＆#62;　　

"　　　　　　　　　　＆quot;　　　　　　　　＆#34;　

&　　　　　　　　　　＆amp;　　　　　　　　＆#38;　

(半角スペース)　　　　＆nbsp;　　　　　　　＆#160;

¥　　　　　　　　　　＆yen;　　　　　　　　＆#165;

®　　　　　　　　　　＆reg;　　　　　　　　＆#174;　

♥　　　　　　　　　　＆hearts;　　　　　　＆#9829;

XHTMLの基本のタグ

2009-11-29T18:02:00.002+09:00

XHTMLの基本タグ集　　その１

XHTMLでホームページを作成するためには、いくつかのタグを使用して記述していくことが必要となっています。
そこで、基本のタグをまとめてみることにしました。

 タグ
 テキストが入ります。 
　　　　　　　↓
段落。（ブロックレベル要素）

 タグ
テキストが入ります テキストが入ります
　　　　　　　↓
改行。

<h１〜h６> タグ
<h１>見出し </h１>
　　　　　　　↓　
h1,h2,h3,h4,h5,h6とブラウザでは６段階の大きさで表示されます。
あくまで、内容的に階層の違いを示すもので、文字の大きさを変えるために使用するものではないので要注意です。
(ブロックレベル要素）

<a href="URL"></a１>タグ
<a href="URL">クリックさせるテキストが入ります</a１>
　　　　　　　↓　
リンクを張り、自動的にほかのページを呼び出します。
http://などで始まるURLを指定し、ブラウザに表示されたテキストをクリックするとURLのページにリンクします。
(インライン要素)

<a href="mailto:メールアドレス"> </a>タグ
<a href="mailto:メールアドレス"> ××××××＠×××.×××.jp </a>
　　　　　　　↓
リンク先にメールアドレスを指定し、ブラウザに表示されるリンクをクリックしたときにメールソフトが起動します。
宛先欄に指定したメールアドレスが入力された状態でメールソフトが起動します。
(インライン要素)

 タグ

　　　　　　↓
ブラウザには表示されない、コメントをソースに書き込めます。
ソースに注釈があると、更新などの際に見やすく便利なので、コメント等を記述しておきます。

<hr> タグ
　　　　　　↓
水平の横罫線をひくことができます。

(ブロックレベル要素）

文字コードの指定方法

2009-11-28T21:25:00.004+09:00

文字コードを指定します。

あらかじめXHTML文書内に、使用する文字コードを記述しておくことで、ブラウザによる文字化けを防ぐことができます。
headタグ内に、下のmetaタグを記述します。

<meta http-equiv="Content-Type" content="text/html; charset=文字コード" />

文字コードは他にもあるようですが、私はShift_JISで書くことにしました。

他の文字コード

EUC (EUC-JP)
JIS (ISO-2022-JP)
Unocode8 (UTF-8)

わたしの環境

2009-11-27T16:41:00.001+09:00

今日は、前回読んだ本の手順どうりに

早速XHTMLファイルを作成しようと思います。

ちなみに私の環境ですがMacBookでOS X 10.6ですので、「mi」というMac OS X 用のテキストエディタを使います。

キーワードや見出しの色づけ表示など、各種機能が充実していてテキスト編集作業がスムーズに行えます。特にソースコードを記述するとき便利なんです。

１、ページの基本的な枠組みを記述します。

①　まず最初にXHTMLの文書型宣言を記述します。

　　私はコレを使います。↓

　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
　"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

②　<html></html>タグで文書全体を表します。

　　私はこのタイプを使用↓

③　<head></head>タグで囲み、文書についての情報を記述していきます。

④　<head></head>の中に<title></title>をはさみ、

　　中に入れたい文字列（タイトル）を入力します。

<title></title>はブラウザに表示すると、タイトルに入力した文字列がタイトル　　　バーに表示されます。

⑤　そして<body></body>タグを使ってブラウザに表示する部分を表します。

　　つまり、こういう記述になります↓

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

　"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

　<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"lang="ja">

<head>

<title>

　　　　XHTMLの基本勉強

</title>

</head>

<body>

　　　　こんにちは

</body>

</html>

　ブラウザ(Safari)で開いてみました↓

　初作品とまでは呼べないけれど、感動！！ちょっと嬉しい♪　　　　

XHTMLとCSSの基本勉強スタート

2009-11-26T16:06:00.007+09:00

こんにちは、今更ですが私ホームページを自分で作成したいと思いました。

これからどれくらいでマスターできるか解りませんが、なるべく短期間で学習して皆さんに公開しても恥ずかしくないレベルまではいきたいと思っております。

と、ここで宣言してしまいましたので後にはひけません。。。。

なので、日付をおって、今日はどのくらい学習したのかだったり、重要なポイントだったりを記していけば、後で役立つかもしれませんので、その過程をブログにアップしていこうと思います。

まず、勉強法ですが

１、参考書（夫の使っていたもので、ちょっと古いけれどまだまだ使えそう。）

２、ネットを駆使して。

３、先輩に聞く（疑問に思ったことなどアドバイスを頂く為、私の場合夫に教えてもらいます。）

その都度、良い学習法があったら変えてみようとも思いますが、「学校に行かずともホームページは作れるんだ！」を心に頑張ってみようと思ってます。

ではでは、まずは１日目

ホームページ作成マスターブック〜HTML&スタイルシート基本編という本を読破しました。

といっても、まだ何となく概要をつかんだ程度、ちょっと難しいところはさらっと流して実践で体当たりしようと思ってます。

お気に入りサイト

2009-11-25T18:17:00.002+09:00

忍者ツール