FC2ブログ

スポンサーサイト

  1. トップ
  2. スポンサー広告
  3. スポンサーサイト
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
スポンサー広告 | コメントを書いてくれる人はこちら(-) | トラックバック(-) | [編集]
このページのトップへ移動する。

職業訓練WEBクリエーター科12日目

  1. トップ
  2. HTMLの直接入力について
  3. 職業訓練WEBクリエーター科12日目

職業訓練WEBクリエーター科12日目

感想

今日は昨日に引き続き、リンクの設定と画像の設定、表の設定をやった。

この部分に関しては、WEBページを作成するにはかなり使うので抑えておきたいポイントである。

1コマ目

リンクスポットの見栄えを調整する。 WEBサイト作成術 P160~163

アンカーの設定をするタグは a { }

a {
text-decoration : none;・・・ここでは、noneでなにも装飾しないように設定する。
}

アンカーのまだクリックされていないリンクスポットの設定 a:link {}で囲った部分で設定する。

a:link {
color : #170;・・・色を#170に設定
text-decoration : underline;・・・underlineで文字に下線を引いて表示する。
}

アンカーのクリック済みのリンクスポットの設定要素 a:visited {}で囲った部分で設定する。

a:visited {
color : #3a0;・・・カラーを#3a0に設定する。
}

アンカーのリンクスポットにマウスポインタが置かれたときの設定要素 a:hover {}で囲った部分で設定する。

a:hover {
color : #fff;・・・カラーを#fffに設定
background-color : #f80;・・・背景を#f80に設定
font-weight : bold;・・・文字を太字に設定
}

アンカーで選択中のリンクスポットの設定要素  a:active {}で囲った部分で設定する。

a:active {
color : #f00;・・・色を#f00に指定
background-color : #ffa;・・・背景を#ffaに設定
font-weight : bold;・・・文字を太字に設定
border-style : solid;・・・枠線の種類を1本線で表示する。
border-with : 1px;・・・枠線の太さを 1pxに設定
border-color : #f00;・・・枠色を#f00に設定
}

2コマ目

ページ内へのリンクを張る WEBサイト作成術 P164~166

ページ内にリンクを張る場合の時も、<a href="リンクの挿入"></a>タグを使用する。

飛ばしたいページのタグの部分にIDタグを挿入する。

<h2 id="eki">乃木坂駅</h2>・・・ id="eki"の部分がアンカー部分

飛ばしたいページのタグに飛ぶように、<a href="リンクの挿入"></a>で設定する。

<a href="#eki">乃木坂駅</a>・・・#ekiが飛ばしたいアンカーの名前 ※アンカーの名前の前に必ず#をつける。

別ページの特定箇所にリンクを張る。 WEBサイト作成術 P167~168

ジャンプさせたいページのリンクを指定して、その後にアンカーポイントを記入する。

例 <a href="shuuhen.html#eki">乃木坂駅</a>別ページから、shuuhen.htmlにリンクさせ、さらに#ekiでekiのIDで指定した場所を表示する。

※リンク先のファイルが長い場合は、普通に最初の画面が表示される時があるので、注意すること。

3コマ目

画像を表示する。 WEBサイト作成術 P174~182

イメージタグを使用する。

<img src="ここに、画像のファイルのパスを記述する。" alt="ここには、画像の代替え文字を記入"width="幅の数値を記述"height="高さの数値を記述">

altは必ず付けること、ブラウザ毎に画像を表示させない設定にしてる人がいるため、または目が見えない人にも何の写真なのか伝えるため。

ユニバーサルデザインを考慮する。

JPEG・・・写真の時に使用。

GIF・・・文字等に使用・アニメーション等もGIFで作る。

PNG・・・文字・イラスト等に使用。 GIFの特許権のためPNGができた。

行内の画像の表示位置の指定(一行の垂直位置の指定)。 WEBサイト作成術 P183~185

vertical-alignタグを使用する。

/*imgタグの部分で、topクラスの要素*/
img.top{
vertical-align : middle;・・・この部分で垂直位置の指定を行うmiddleなので、真ん中に表示設定の記述
}

他の指定タグが、

top・・・上の部分に合わせて表示される。

middle・・・真ん中の部分に合わせて表示される。

baseline・・・下の部分に合わせて表示される。・・・インターネットエクスプローラーは対応していない。

4コマ目

画像の左右の端に文字列を表示する。 WEBサイト作成術 P186~191

CSSにfloatで回り込みの設定をする。

/*imgタグの部分で、.honbun_photoクラスの要素*/
img.honbun_photo {
float : right;・・・この部分で回り込みの設定をする。 ここではrightなので右に回り込みの設定をしている。
}

CSSで回り込みの設定の取り消しをする場合clearで指定する、

/*contentsクラスの要素*/
.contents {
background-color : #fb5・・・背景の色設定;
padding : 0.5em;・・・文字の間隔の設定
margin : 0;・・・ボックスの間隔指定
border-style : solid;・・・枠線の種類の設定
border-with : 3px;・・・枠線の太さの設定
border-color : #350;・・・枠線の色の設定
clear : both;・・・この部分で、回り込みの取り消しをする。 ここでは、bothなので、右・左の要素両方で取り消しの設定をしている。
}

画像が、段落や枠線等の要素に対しては画像を無視して表示(枠線や段落は後ろに回りこんでしまう)してしまうので、タグに対して、ボックスの高さを指定する設定をする。 

/*photoクラスの要素*/・・・このクラスで、高さのボックスを指定している。
.photo {
height : 180px;・・・ここで高さを180ピクセルで指定している。
}

<p class="photo honbun">・・・ここで、photoクラスの設定とhonbunクラスの設定を指定している。
<img src="img/sekihi.jpg" alt="乃木坂の石碑" width="240" height="180" class="honbun_photo">現在の乃木坂は、かつて「幽霊坂」と呼ばれていました。その坂の途中には乃木希典(のぎまれすけ)の邸宅があり、彼の死後に「乃木坂」と改称されました。
</p>

このタグの中でクラスhonbun_photoで設定した回り込みが適用している。

ここで、バグ発見それは・・・

インターネットエクスプローラ6.0では、photoで指定しボックスの高さの指定で、180pxで指定したのですが、この数値を低く設定しても見栄えが変わりませんでした。恐らく、写真の高さの要素が選択されたと思われます。

</div>
<p class="contents">

このタグにも回り込み設定が掛かっているので、contentsのクラスで、回り込みの設定を解除している。

<a href="index.html">トップページへ</a>
</p>

5コマ目

画像にリンクを張るには WEBサイト作成術 P192~193

<a href="リンクの挿入"></a>タグで、<img src="" alt="" width="" height="">タグを囲むと画像にリンクを張ることができる。

例<a href="mailto:username@xknouwledge.co.jp"><img src="img/mail.png" alt="作者へメール" width="60" height="30"></a>

ここで、画像にボーダーラインの表示をしないように設定するため、CSSで設定する。

/*imgタグの部分で、リンククラスの要素*/
img.link {
border : none;・・・この部分でリンクの画像に、枠線を表示させないように設定している。
}

よって記述するタグは、イメージタグにlinkクラスの指定をしている。

<a href="mailto:username@xknouwledge.co.jp"><img src="img/mail.png" alt="作者へメール" width="60" height="30" class="link"></a>

6コマ目

背景に画像を張り込む WEBサイト作成術 P194~202

背景設定はCSSで、bodyタグにて設定をする。

/*bodyの要素*/
body{
background-color : #bf8;・・・背景色の設定
background-image : url("img/back.png");・・・背景画像の指定の設定。 img/back.pngが画像のパス
background-position : right;・・・背景画像の表示位置の指定の設定。 ここでは、右側に設定する。
background-repeat : repeat-y;・・・背景画像の繰り返しの設定。・・・ここでは、Y軸に繰り返し表示する設定。
}

背景画像の呼び込み

background-image : url("ここに画像のパスを指定");

背景画像の表示位置の設定

background-position : ここに位置を設定;

設定は、水平位置では、left・right・center 垂直位置は、top・center・bottom

背景画像の繰り返しの設定

background-repeat : ここに、繰り返し範囲の指定設定;

設定は、repeatが縦横繰り返す。 repeat-x X軸だけ繰り返す。 repeat-y Y軸だけ繰り返す。 no-repeat 繰り返さずに、一箇所だけ表示

表を作るには、WEBサイト作成術 P204~207

<table></table>タグを使います。

表タグで全体の枠を作成します。

<tr></tr>タグで行を作成します。

<td></td>タグで、一つのセルを作ります。

<th></th>タグは、同じセルなのですが、見出しとして定義します。

例・・・ここでは、行が5行で、列が2列の表が表示されます。

<table>
<tr>
<th>出口1</th><td>乃木坂の途中、乃木公園や乃木神社への出口です。</td>
</tr>
<tr>
<th>出口2</th><td>出口1の道路を挟んだ反対側に出ます。</td>
</tr>
<tr>
<th>出口3</th><td>エスカレーターを上がって、外苑東通りに出ます。</td>
</tr>
<tr>
<th>出口4</th><td>健保会館(はあといん乃木坂)の入口に出られます。</td>
</tr>
<tr>
<th>出口5</th><td>出口1~4とはホームの反対側にあり、青山霊園の方面に出ます。</td>
</tr>
</table>

下記のように表示されます。

出口1乃木坂の途中、乃木公園や乃木神社への出口です。
出口2出口1の道路を挟んだ反対側に出ます。
出口3エスカレーターを上がって、外苑東通りに出ます。
出口4健保会館(はあといん乃木坂)の入口に出られます。
出口5出口1~4とはホームの反対側にあり、青山霊園の方面に出ます。

出口1~5が見出しセルの<th></th>で書かれており、その詳細情報が、<td></td>で表示されています。

表にスタイルを適用させる WEBサイト作成術 P208~212

ここではスタイルを適用させるために、CSSにこうやって記述した。

/*table要素*/
table{・・・この部分がテーブル全体に掛かる要素
margin : auto;・・・ブロック間の余白の設定。ここでは、autoなので、自動で余白が設定されている。
border-style : solid;・・・枠線の種類の設定。ここでは、solidなので、1本線の設定
border-with : 2px;・・・枠線の太さの設定。ここでは、なので、2pxに設定されている。
border-color : #000;・・・枠線色設定。ここでは、#000なので黒色に設定されている。
border-collapse : collapse;・・・表のセルとセルの隙間の設定。ここでは、collapseなので、セルとの隙間を開けない設定
width : 75%;・・・全体の幅の設定。ここでは75%なので、全体の幅の75%で表示される。
}
/*th,td要素*/
th,td{・・・この部分で、テーブルのセルと見出しセルの設定要素
height : 3em;・・・高さの設定。ここでは、3em;なので3文字分の高さを開ける設定。
border-style : solid;・・・枠線の種類の設定。ここでは、solidなので1本線に設定。
border-with : 1px;・・・枠線の太さの設定。ここでは、1pxなので太さが1ピクセルの枠線の表示設定
padding : 0.5em;文字間の余白設定。ここでは、0.5emなので0.5文字分の余白が文字とセルの間に設定される。
}

/*th要素*/
th{・・・見出しセルの設定
background-color : #fb5;・・・背景設定。ここでは色は#fb5(オレンジっぽい色)で設定されている。
width : 4em;・・・幅の設定。ここでは、4emなので4文字分の幅が取られる。
}

/*td要素*/
td{セルの設定要素
vertical-align : top;・・・文字の垂直位置設定。ここでは、top要素に設定されているので、上に揃う。
}

スポンサーサイト
このページのトップへ移動する。

評価・感想を書いてくれた人の内容

この記事に対する評価・感想を投稿

管理者にだけメッセージを送る

トラックバック トラックバックURL:
http://hamacom.blog4.fc2.com/tb.php/34-03d04b7e
サイズ変更ボタン サイズ縮小ボタン サイズ拡大ボタン サイズリセットボタン
RSSフィード

ブロとも申請フォーム
ブログ内検索

最近のエントリ
ユーザータグ
カレンダー

08 | 2018/09 | 10
- - - - - - 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 - - - - - -

ハマーにメールを送る

私ハマーにご意見・ご感想・調べてほしい事・オススメサイト等ありましたら気軽にメールしてください。

最近のコメント
全ての記事を表示する
カテゴリー
QRコード

QRコード

覗いてくれた人

月別アーカイブ
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。