2009年12月8日火曜日

画像の表示の勉強

日は画像の表示の勉強です。
まず<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月6日日曜日

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

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

HTMLには大きく分けてインライン要素とブロックレベル要素の2つに分類されます。
インライン要素は基本1行の中に並べて配置することができます。
ブロックレベル要素は一個で1行を構成しますから、ブロックレベル要素同士を並べて配置することが基本できません。
ブロックレベル要素は他のブロックレベル要素・インライン要素・テキストを内側に含むことができます。
けれど、インライン要素にブロックレベル要素を含むことができません。

最初に本だけを読んでいるときは???
なんのことやら?理解するのが難しかったのですけど、実際自分でHTMLとCSSを書いていじってみると
よく解る!!!

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

インライン要素
a
img
span
input
textarea

ブロックレベル要素
h1〜h6
table
div
p
ol・ul
hr
form

2009年12月4日金曜日

枠線を付ける!!

枠線を付ける!!

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

border-style:枠線の種類

キーワード         種類

none(初期値)        枠線なし
dotted           点線
dashed           ダッシュ
solid            1本線
double           2本線
groove            窪んだ線
ridge            盛り上がった線
inset            枠内がくぼむ
outset           枠内が盛り上がる








2009年12月3日木曜日

メニュー反転

日は引き続き、メニューをHTMLとCSSで作ってみました。
メニュータグにカーソルを合わせると、色が変わるのと範囲を指定しました。

















まずHTMLで下のように記述し
<li><a href="">HOME</a></li>
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%;
}

2009年12月2日水曜日

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

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










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

ちなみに、私は黒の場合#000; 白の場合#fff; と記述してもOKと教わりました。
短縮されるので覚えておくと、便利ですよね ♪

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

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

2009年12月1日火曜日

ulタグとliタグ

今日は、昨日のおさらいです。
<ul>タグと<li>タグを使って、こんな感じのメニューを作りたいと思います。




xhtml

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"/>
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>メニュー</title>
<link rel="stylesheet" type="text/css" href="aaa.css">
<meta name="description" content="" />
<meta name="keywords" content="" />
</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月30日月曜日

特殊な文字


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

ブラウザ上に<p>と入力したい場合、ソース上に「<p>」と入力すると段落の解釈とされて、ブラウザには表示されません。
そんな場合は、「<」の代わりに「&lt;」「>」の代わりに「&gt;」と半角英数字で記述します。

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




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

<          &lt;         &#60;

>          &gt;         &#62;  

"          &quot;        &#34; 

&          &amp;        &#38; 
         
(半角スペース)    &nbsp;       &#160;

¥          &yen;        &#165;

©          &copy;       &#169;

®          &reg;        &#174; 

♥          &hearts;      &#9829;

2009年11月29日日曜日

XHTMLの基本のタグ

XHTMLの基本タグ集  その1

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

<p> </p>タグ
<p> テキストが入ります。 </p>
       ↓
段落。(ブロックレベル要素)

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

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

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

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


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

<hr> タグ
      ↓
水平の横罫線をひくことができます。
(ブロックレベル要素)




2009年11月28日土曜日

文字コードの指定方法

字コードを指定します。

あらかじめ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月27日金曜日

わたしの環境

日は、前回読んだ本の手順どうりに
早速XHTMLファイルを作成しようと思います。

ちなみに私の環境ですがMacBookでOS X 10.6ですので、「mi」というMac OS X 用のテキストエディタを使います。
キーワードや見出しの色づけ表示など、各種機能が充実していてテキスト編集作業がスムーズに行えます。特にソースコードを記述するとき便利なんです。


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

① まず最初にXHTMLの文書型宣言を記述します。
  私はコレを使います。↓
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
② <html></html>タグで文書全体を表します。
  私はこのタイプを使用↓
 
  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"lang="ja">
  
③ <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)で開いてみました↓
 作品とまでは呼べないけれど、感動!!ちょっと嬉しい♪