FC2ブログ

スポンサーサイト

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

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

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

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

感想・・・

昨日・今日と2日間かけてテキストエディタで、サイトを完成することができました。

サイトのテーマは趣味のサイトで、僕のテーマはテニスのサイトです。

気をつけていたことは、すべてCSSにてレイアウトしてみようと頑張ってみました。

1コマ目~6コマ目

制作実習

出来上がったサイトは

ハマーがテニスにハマッたわけ

になります。

是非見てください。

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

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

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

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

感想・・・

今日は、HTML/CSSのタグを練習してきたので、テキストエディタと画像編集ソフトのみで、ホームページ制作に挑む

サイトのテーマは趣味のサイトで、今回は趣味のテニスをテーマにしてみたいと思う。

明日のブログに出来たタグとHTMLについて発表していきたいと思います

予定では、HTMLに内容 CSSでレイアウトや見栄えの演出をする予定にしている。

1コマ目~6コマ目

制作実習

 

このページのトップへ移動する。

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

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

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

感想・・・

今日でHTMLでの学習は終了となり、明日はいよいよ演習課題に入ります。

今日まで学習してきたHTMLとCSSのタグを駆使してWEBページを作成していきたいと思います。

そのうち今まで作成した成果をWEB上に掲載したいと思います。

1コマ目

WEB制作のワークフロー ベーシックデザイン P23~41

表示を統一させるために、レイアウトは表を使って表示させる。

データ量・・・4~5秒で表示したほうがよいので、8M~10Mぐらいに抑えておくこと。

チームワーク

チームワークに大切なのは、コミュニケーション能力・・・組織でWEBを制作するにあたって、目的を明確にするため。

ワークフロー(作業手順)

企画・計画・・・組織でWEBを制作するためには、クラインアント・組織を含めた共通の「認識・目的」を持つために行う。

設計・・・設計図を書く。 構造やリンク等を設計する。 現在ツリー構造での制作が多いみたいだ。(クライアントが更新する方法を設計も考慮)

製造・・・WEBを制作する。 設計図に基づいて製造する。  変更部分はクライアントの意向しだいである。

テスト・・・WEBを作成して、動作の確認 計画・企画どうりにできたかテストする。 デバック(不具合)等の修正をする。

運営・・・更新作業 (クライアントが更新する場合もある。)そのままWEB制作会社で行うケースもある。

重要になってくるのは、下に行けばいくほど高くなってくる。

 

2コマ目

役割分担(WEB制作に関わるスタッフ)

ディレクションスタッフ・・・現場監督

プランニングスタッフ・・・計画を立てる人(大体は現場監督が兼任する。)

制作スタッフ・・・WEBの制作~テストをする人まで含む。

  • デザイン・・・レイアウト 色づかい・・・deramweaver
  • コンテンツ・・・WEBページの本文・写真
  • プログラム・・・スクリプト・機能 JavaScript Flash

職業訓練で学習している部分はこの制作スタッフ部分の勉強が主

WEB制作の流れ

コンセプトの設定・・・クライアントから話を聞き箇条書きで要点(目的を設定する。)

ターゲット(WEBページを見る人)を絞る。・・・どんな環境の人が利用しているのか予測する。

コンセプト(サイトの内容を膨らませる)を立案する。

コンテンツのリストアップ・・・ブレインストーミング(箇条書きで挙げていく)

コンテンツの分類・・・フォルダ化にして情報を整理をする

情報の構造化・・・各コンテンツをどのような構造にしていくかを構想する。

デザインのガイドライン・・・大体の方針を決めて、方向性(何色を使うのか)を決める。 基調色(ブルーが強い) ・アクセント(補色で赤色が多い)

トッページのデザイン・・・サイトの顔となるので、ラフスケッチを描く。

デザインのフォーマット(画面の構成)を決める

コーディング・・・javascriptを使用して機能を作る。

デバック・・・環境の違い(OS・ブラウザ・解像度)を確認して、レイアウトが崩れていないかチェックする。 リンク切れ。 データサイズ

データ(ファイル)管理・・・下記のようなルールをあらかじめ決める。

  • 命名規則・・・(例)全て小文字、拡張子 html 
  • ディレクトリ(フォルダ)構成
  • バージョン管理・・・ どれが新しいファイルなのか(チェックイン・・・サイト構成ファイルの一覧に入れる/チェックアウト・・・修正中のフラグを立てる。)
    ※ WEB制作で制作したファイルをファイルサーバーとゆう機械に入れ、分かるようにするようにチェックイン・チェックアウトをする。

 

3コマ目

WEB制作ツール

コンテンツ作成ツール

  • スキャナ・デジタルカメラ
  • 編集ソフト(フォトレタッチ・ペイント)・・・Photoshop・Fireworks等、
  • グラフィックソフト(ドローイング)・・・Illustrator・Fireworks等、

コーディングツール

  • WEBソフト・・・Dreamweave・Golive

FTP(ファイルアップロード)ツール

  • FFFTP等(フリーソフトのものが多い)

企画書・設計書ツール

  • Word・・・文章を作る
  • Excel・・・表を作る
  • Powerpoint・・・プレゼンテーションソフト(授業中にプレゼンテーションをする予定)

 

4コマ目

WEBページをインターネットに公開する WEBサイト作成術 P248~254

いままで、HTMLで作成したデータをWEBサーバーに送る。

今回配布されたセミナー用の情報を使用する。

必要な情報は、

WEBサーバーのアップロードをする先のアドレス

ユーザーアカウント

パスワード

今回は、FFFTPとゆうソフトを使用してアップロードをする。

  1. FFFTPソフトを立ち上げる。
  2. 右側にあるホストの立ち上げをクリックする。
  3. 立ち上がった画面にホストの設定名に名前を付ける ※ここは任意で名前を付ける。
  4. ホスト名を入れる。 ※ここは、アップロードするWEBサーバーへアクセスするため、サーバーのアドレス(ftpで始まる)を入れる。
  5. WEBサーバーで設定されているFTPアカウント・パスワードを各設定項目入力欄に入力する。
  6. ローカル初期フォルダの設定項目で、今回アップロードしたいフォルダを選択する。
  7. ホストの初期フォルダの設定項目は記入しなくてもよい。
  8. OKボタンをクリック
  9. ホスト一覧が表示されるので、接続をクリック

 

5コマ目

WEBページをインターネットに公開する続き WEBサイト作成術 P248~254

  1. 接続したら、FFFFTPのメイン画面が出てくるので、右側に出ているindex.htmlを削除する。
  2. 左側の項目を全部選択して、左側(WEBサーバー側)にドラック&ドロップしてファイルをアップロードすると完了

6コマ目

明日・明後日からの制作の予習

明日・明後日で、HTMLタグを使用して、趣味のサイトを作成する。

今回僕の趣味のテーマてして、テニスを題材にしたいと思います。

 

このページのトップへ移動する。

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

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

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

感想

1コマ目

WEBサイト基礎知識

教科書・・・WEBクリエーターのためのベーシックデザイン ウイネット社から販売

教科書内容  目次

一部・・・知識編  P1~122まで

二部・・・演習課題 P123~154

セミナー中は第一話のみ。

進み具合

6月15日・18日はチャプターの1~3まで。

1~3はワークフロー・WEBシステム(仕組み)

6月27日~29日はチャプター4~5まで。

4~5はレイアウト・色(WEBデザイン関連)

7月23日~25日はチャプターの6~7

6~7はユーザビリティ・WEBページのタブー(失敗事例)

チャプター1  WEBの仕組み ベーシックデザイン P3~4

WEBに必要なもの

1・ユーザーのコンピューター

専門用語で、クライアントコンピューター

ブラウザ

WEBページをコンピューター上に表示させるソフト・・・代表例でインターネットエクスプローラ

インターネット

クライアントとWEBサーバーを繋ぐ役割。

2・WEBサーバー(ちょっと大き目のタワー型のパソコン)・・・専門用語で、サーバー

WEBページの提供 WEBページの構成ファイルの保存

WEBサーバーソフト

WEBサーバーにアクセスしたら、データをクライアアントに送るソフト 代表ソフト Apache(アパッチ),IIS(マイクロソフト社)

ソフト同士のやりとり

プロトコル(通信にあたっての約束事)WEBのシステムでは、HTTPとゆう約束事で決められている。

2コマ目

続き

アドレスの仕組み

http://www.XXXX.ac.jp/seminar/test/excel.html

http://・・・お約束事 相手のサーバーにHTTPを使用して通信をするとの命令

XXXX.ac.jp・・・通信相手のWEBサーバーの名前 jpは日本の記号 acは教育機関の称号

/seminar・・・ディレクトリ名 WEBサーバーのどのフォルダへアクセルするかを記述している。

excel.html・・・ファイル名 大抵はhtmlファイルが指定されている。

同じディレクトリにあるデータをアンカータグでアクセスする場合は、ファイル名を記述するだけでもよい。

クライアントのパソコンからWEBサーバーのパソコンにデータを送るためには?

FTPクライアントソフト

WEBページ開発用のコンピューターで開発したWEBページをサーバーと交信するために使用する。

FFFTP等のソフトがある。

FTPサーバーソフト

サーバーがFTPソフトからのアクセスを受けるために使用する。

サーバーと交信するプロトコル(取り決め事)が

FTPとゆうプロトコル

レンタルサーバーの利用

個人でサーバーの運営は大変なので、サーバー会社がレンタルしてくれるサービス

主流は、このレンタルサーバーを借りてWEBページを運営する。

WEBページを構成する要素 ベーシックデザイン P5~9

最近では、HTMLファイルだけではなく、画像データ、CSS、JavaScriptなどの処理プログラムなどで構成される。

クライアント側の処理プログラム

今ページを見ているクライアントにのみプログラムが適用される。

Java・JavaScript・・・直接HTMLに記述が可能

WEBページの見栄え(色使い)を変更したりなど。

WEBサーバー側の処理プログラム

WEBサーバーにアクセスしたクライアント全員の情報に対してのプログラムが可能。

アクセスカウンターやアクセス解析等

ASP・PHP・・・直接HTMLに記述が可能

Perl・Javaサーブレット・・・サーバーソフトがこのプログラムを起動するために使用するものがCGI

プラグイン

プラグインとは、WEBページを作り、その中に新たな枠を設けてその部分にプログラム(ゲームや動画等のコンテンツ)を起動させる技術。

プラグインで必要になるのは、そのプログラムに必要なソフトをクライアントコンピュータにダウンロードしておかないと起動しないので注意!!

WEBページの記述言語の体系 ベーシックデザイン P6~9

WEBページはHTMLが基本

最新のWEBページは

HTMLでレイアウト・CSSでレイアウトの構成(見栄え)・XMLでデータの構成と分けられて構成させるのが主流ブログなどがその代表的なWEBページ。

・マークアップ言語

SGMLからWEBページに簡略かしたものが、HTML。

SGMLから分かれたもので、

HTML・・WEBページを記述するためのマークアップ言語

XML・・・データー構造を記述。  ブログ等で使われる。

これは、表示するレイアウト(HTML)・データそのもの(XML)を分けましょう。

なので、HTMLでレイアウト

XMLでデータの構造(日付・タイトル・本文)を構成。

CSSで見栄えのデザインと分けてWEBページを作成する事が多い。

・スクリプト言語

・プログラミング言語

3コマ目

ユーザー環境により違い ベーシックデザイン P10~11

ガンマによる画像の明るさによる違い

画面解像度による違い

フォントの違い

機種依存文字・・・半角カナ、○で囲まれた数字、ローマ数字

表示されているウィンドウの違い

ブラウザの種類とバージョンの違い ベーシックデザイン P12~13

ブラウザのシェアが高いのが、一位・・・インターネットエクスプローラが85% 二位・・・Firefox8.8%

ブラウザの種類・バージョンの違いにより多少異なるので注意する。

表示解像度について ベーシックデザイン P16~17

表示解像度については、最も小さい画面に合わせて幅を合わせて作ると、基本的にはどの解像度でも表示が崩れない。

VGA 640×480

SVGA 800×600・・・この部分を基準にして考える

XGA 1024×768

SXGA 1280×1024

UXGA 1600×1200

だいたい使用できるのが、760ぐらいの幅で作成するとよい。

幅の指定をどうすればよいか。

テーブルを使うってCSSで幅を指定してあげる。

表示速度の違い。

現在、ブロードバンドが普及してきたのだが、電話回線等でインターネットを繋いでいる人もいるのも現状。

なので、繋がりやすさを考え、だいたい5メガぐらいのWEBページを目指して表示させる。

WEBのメディア特性 ベーシックデザイン P18~21

双方向性・・・掲示板など伝え手と、受け手で双方向で情報を交換できる。

情報の専門性・多様性・・・専門的な部分に対してWEBは情報を発信しやすい。

情報の信憑性、情報源の特定・・・ここが、誰でも発信できるので信憑性が薄い

4コマ目

HTML/CSS

表の行や列をグループ化する方法 WEBサイト作成術 P213~218

表の列をグループかする方法

<colgroup span="ここにグループ化したい列を入れる。"></colgroup>・・・例 3と入力すると、1~3列目がグループとして設定される。

<colgroup span="1" class="number"></colgroup>・・・ここで、1列目をグループ化している。
<colgroup span="1" class="houmen"></colgroup>・・・ここで、2列目をグループ化している。
<colgroup span="1" class="d-shoukai"></colgroup>・・・ここで、3列目をグループ化している。
※尚クラス設定をしているので、この各列に各クラスの設定をしている。

行をグループ化する方法

<thead></thead>・・・表のヘッダー部分をグループ化する

<tfoot></tfoot>・・・表のフッター部分をグループ化する

<tbody></tbody>・・・表の本体部分をグループ化する

<thead>・・・ここから
<tr>
<th>出口番号</th><th>出口の方面</th><th>紹介</th>
</tr>
</thead>・・・ここまでが、ヘッダーとして行をグループ化している。
<tbody class="gaien-e">・・・ここから(gaien-eのクラス設定がされている。)
<tr>
<th>出口1</th><td>外苑東通り方面</td><td>乃木坂の途中、乃木公園や乃木神社への出口です。</td>
</tr>
<tr>
<th>出口2</th><td>外苑東通り方面</td><td>出口1の道路を挟んだ反対側に出ます。</td>
</tr>
<tr>
<th>出口3</th><td>外苑東通り方面</td><td>エスカレーターを上がって、外苑東通りに出ます。</td>
</tr>
<tr>
<th>出口4</th><td>外苑東通り方面</td><td>健保会館(はあといん乃木坂)の入口に出られます。</td>
</tr>
</tbody>・・・ここまでが、表の本体部分としてグループ化している。
<tbody class="reien">・・・ここから(reienのクラス設定がされている。)
<tr>
<th>出口5</th><td>青山霊園方面</td><td>出口1~4とはホームの反対側にあり、青山霊園の方面に出ます。</td>
</tr>
</tbody>・・・ここまでが、表の本体部分としてグループ化している。 ここで2個本体としてグループを作ってある。

CSSの設定を

/*ここからテーブルスタイルの設定*/

/*table要素*/・・・全体のテーブル設定
table {
margin : auto;
border-style : solid;
border-with : 2px;
border-color : #000;
border-collapse : collapse;
width : 85%;
}

/*th,td要素*/セル・見出しセルの設定
th,td {
height : 3em;
border-style : solid;
border-with : 1px;
padding : 0.5em;
}

/*th要素*/・・・見出しセルの設定
th {
background-color : #fb5;
}

/*thead要素*/・・・ヘッダーの行のグループの設定
thead {
vertical-align : middle;・・・垂直位置の設定・・・ここで真ん中に表示する設定
}

/*d-shoukai クラス要素*/・・・3列目のグループにd-shoukai クラスが掛っているので、それの設定
.d-shoukai {
vertical-align : top;・・・垂直位置の設定・・・ここで、上に揃う設定になっている。
}

/* number クラス要素*/・・・1列目のグループにnumberクラスが掛っているので、それの設定
.number {
width : 4em;・・・幅の設定・・・ここで、1列目が4文字分の幅が空くように設定されている。
}

/* houmen クラス要素*/・・・2列目のグループにhoumenクラスが掛っているので、それの設定
.houmen {
width : 9em;・・・幅の設定・・・ここで、2列目が9文字分幅をとる設定になっている。
text-align : center;・・・行揃えの設定・・・ここで、2列目が真ん中に揃うように設定されている。
vertical-align : middle;・・・垂直位置の設定・・・ここで、真ん中に揃う設定になっている。
}

/* gaien-e クラス要素*/・・・ここでは、2行目から5行目までにこのgaien-eクラスが掛っている
.gaien-e {
background-color : #bfa;・・・2行目から5行目まで#bfa色が背景色に設定されている
}

/* reien クラス要素*/・・・6行目にreienクラスが掛っている
.reien {
background-color : #ffa;・・・6行目に#ffa色が背景色に設定されている
}

/*ここまで、テーブル要素*/

で、HTMLの適用タグは

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

テーブルタグでのCSSでの注意点

重複部分の設定に関しては、範囲が狭い部分の記述が優先される。

なので、行で設定した背景色よりも、セル部分にかかった背景色の方が優先される。

※ただし、同じ部分にクラスが2つ設定されていた場合には後に記述したスタイルが適用される。

5コマ目

テーブルのセルの結合 WEBサイト作成術 P219~221

<td rowspan="結合したい行の数値"></td>・・・結合したい数値分行が結合されます。

<td colspan="結合したい列の数値"></td>・・・結合していたい数値列分が結合されます。

結合したら、その後にある行または列を削除すること。

でないと、表が崩れてしまう。

<tr>
<th>出口1</th><td rowspan="4">外苑東通り方面</td>・・・ここで、4行結合<td>乃木坂の途中、乃木公園や乃木神社への出口です。</td>セルは3つ
</tr>
<tr>
<th>出口2</th><td>出口1の道路を挟んだ反対側に出ます。</td>・・・ここからセルが1つ少なくなっている。
</tr>
<tr>
<th>出口3</th><td>エスカレーターを上がって、外苑東通りに出ます。</td>・・・おなじくセルは2つになる。
</tr>
<tr>
<th>出口4</th><td>健保会館(はあといん乃木坂)の入口に出られます。</td>・・・おなじくセルは2つになる。
</tr>

表にタイトルを追加 WEBサイト作成術 P222~224

<caption></caption>タグをの間に記述する。

そのままだと、表の上にスタイルが適用しないで、表示されるので、

CSSで下記のように記述する。

/*captionの設定(表のタイトル)*/
caption {・・・表のタイトルタグの設定記述
background-color : #350;・・・背景の設定
color : #fff;・・・文字色の設定
}

6コマ目

番号付きリストの作成 WEBサイト作成術 P226~229

<ol></ol>タグを使用する。このタグは番号入りリストのタグ  オーダードリストの略(番号付き)

<li></li>上のタグの中にこのタグを入れる。リストの各行の定義  リストアイテムの略

<ol>・・・ここが、番号付きタグの設定開始
<li><a href="shuuhen.html">乃木坂の周辺</a>・・・<a href="shuuhen.html#eki">乃木坂駅</a>と<a href="shuuhen.html#kouen">乃木公園</a></li>・・・この<li></li>で区切られたところが、リストの行
<li><a href="history.html">乃木坂の歴史</a></li>・・・2項目目のリスト
<li><a href="about.html">このサイトと作者について</a></li>・・・3項目目のリスト
</ol>・・・ここで、番号つきタグの設定終了

表示例が下に表示されます。(尚リンクは飛ばないので、削除させていただきました。)

  1. 乃木坂の周辺・・・乃木坂駅と乃木公園
  2. 乃木坂の歴史
  3. このサイトと作者について

箇条書きのリストを作成 WEBサイト作成術 P230~231

<ul></ul>タグを使用する。

<li></li>は番号付きリスト同様に行の設定で使用

<ul>・・・この部分が箇条書きリストのタグ
<li><a href="shuuhen.html">乃木坂の周辺</a>・・・<a href="shuuhen.html#eki">乃木坂駅</a>と<a href="shuuhen.html#kouen">乃木公園</a></li>・・・この<li></li>で区切られたところが、リストの行
<li><a href="history.html">乃木坂の歴史</a></li>・・・2項目目のリスト
<li><a href="about.html">このサイトと作者について</a></li>・・・3項目目のリスト
</ul>・・・ここで箇条書きリスト終わり

表示が下記

  • 乃木坂の周辺・・・乃木坂駅と乃木公園
  • 乃木坂の歴史
  • このサイトと作者について

項目入りリストの作成 WEBサイト作成術 P232~234

<dl></dl> データリストの略 項目入りリストの設定タグ

<dt></dt>リスト項目の設定タグ

<dd></dd>リストの内容の設定タグ

記述例がこちら

<dl>・・・項目入りリストの設定
<dt>名前</dt>項目のリスト
<dd><a href="mailto:username@xknowledge.co.jp">知識 太郎</a></dd>・・・内容
<dt>趣味</dt>2項目のリスト
<dd>散歩</dd>・・・内容
<dt>好きな食べ物</dt>3項目目のリスト
<dd>ブルーベリー</dd>・・・内容
</dl>

表示例がこちら 尚メールアドレスリンクは削除しています。

名前
知識 太郎
趣味
散歩
好きな食べ物
ブルーベリー

リストの中にリストを作る WEBサイト作成術 P 235~237

<li></li>の中にリストタグを入れる。

リストタグは、<ol></ol>(番号付きリスト)<ul></ul>(箇条書きリスト)<dl></dl>(項目入りリスト)がリストタグである。

例が、

<ul>
<li><a href="shuuhen.html">乃木坂の周辺</a>
<ol>・・・ここから項目の項目
<li><a href="shuuhen.html#eki">乃木坂駅</a></li>
<li><a href="shuuhen.html#kouen">乃木公園</a></li>
</ol>・・・ここで、項目の項目の終わり
</li>
<li><a href="history.html">乃木坂の歴史</a></li>
<li><a href="about.html">このサイトと作者について</a></li>
</ul>

で、表示すると

  • 乃木坂の周辺
    1. 乃木坂駅
    2. 乃木公園
  • 乃木坂の歴史
  • このサイトと作者について

になる

リストにスタイルのCSS設定 WEBサイト作成術 P238~244

CSSで設定する。タグは下記参照

/*ここからリストに関する設定項目*/
/*ul liの設定(箇条書きリストの中の行項目の設定)*/・・・liだけで設定すると、olタグのliタグにも同じ設定になるため。
ul li{
list-style-image : url("img/point.png");。・・・箇条書きのマークに画像を使う設定をかけている。
}

/*ol liの設定(番号付きリストの中の行項目の設定)*/・・・liだけで設定すると、ulタグのliタグにも同じ設定になるため。
ol li{
list-style-image : none;・・・ここでは、上で行った設定が反映されてしまうので、画像を使う設定を解除する設定に変更。
list-style-type : lower-roman;・・・ここで、リストの先頭の種類を小文字のローマ字の設定に変更
}

/*dtの設定(リスト項目名の設定)*/
dt {
float : left;・・・ここでリストの項目名は左に回りこむ設定に変更
}

/*ddの設定(リストの内容項目の設定)*/
dd {
margin : 0 7em;・・・ここで、文字間の余白を縦・・・0 横・・・7文字に設定なので、項目名リストは改行されずに表示される設定に変更
}
/*ここまでがリスト項目の設定要素*/

このページのトップへ移動する。

職業訓練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要素に設定されているので、上に揃う。
}

このページのトップへ移動する。

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

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

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

感想

今日は、CSSとHTMLのタグの学習だった。

Dreamweaveがないと、大変なのを昨日に引き続き身をもって体験した。

1コマ目

昨日の補足・・・背景について

bgcolorはJavaScriptでの背景設定

backround-colorはCSSでの背景設定

フォルダ・ファイルについて

フォルダ・ファイルの構成,名前は正確に。

ファイルの汎用性を考えて、半角でつけるように気をつける。
※半角英数字は文字コードが共通。

拡張子について

.HTML採用すること

UNIX(WEBサーバーのOSのほとんどがこのUNIX)でのWEBページの拡張子は.HTML。

世界標準は.HTML

ウィンドウズのOSのみ、.HTMでWEBページを表示している。

.jpeg・.jpgファイルも同様に世界標準は.jpeg

ただし、画像関係のファイルについてはそんなに気をつけなくてもよい。

HTML・CSSのタグの勉強続き

セレクタとは?

この{と}で囲まれた部分をセレクタとゆう

h{
background-color : #350;
color : #fff;
font-size : 3em;
}

文字の周囲に余白を指定する。 WEBサイト作成術 P104~107

タグはpadding :で、文字の周りの部分の余白の範囲を設定する。

/*クラスの要素*/
.head{
background-color : #fff;
padding : 3em;・・・この部分にで文字も回りの余白を設定の記述
}

2コマ目

ブロックの周囲の余白の設定 WEBサイト作成術 P108~110

タグはmargin : で、ブロックの周りの部分に余白の範囲を設定する。

/*クラスの要素*/
.contents{
background-color : #fb5;
padding : 0.5em;
margin : 0;・・・この部分がブロックの余白の設定の記述
}

ブロックに枠線を引く WEBサイト作成術 P111~117

タグはborderタグで、ブロックの周りの部分に枠線が入る。

/*クラスの要素*/
.contents{
background-color : #fb5;
padding : 0.5em;
margin : 0;
border-style : solid;・・・この部分が枠線の種類の記述
border-with : 3px;・・・この部分が枠線の太さの記述
border-color : #350;・・・この部分が枠線の色の記述
}

場所を指定して設定を記述する場合

padding margin borderので設定できます。区切りは、半角スペースを入れる。

例・・・padding : 0.5em 1.5em 2.5em 3.5em;と記述すると、上に0.5em、右に1.5em、下に2.5em、左に3.5emが余白ができるとゆう意味。

4箇所記述した場合、

: 1番目は上の間隔 二番目は右の間隔 三番目は下の間隔 四番目は左の間隔 ;

3箇所記述した場合

: 1番目は上の間隔 二番目は右と左の間隔 三番目は下の間隔;

2箇所記述した場合

: 1番目は上と下の間隔 二番目は右と左の間隔;

1箇所記述した場合

: 1番目は全体の間隔;

または、上 -top,下 -bottom,右 -right,左 -leftと個別に設定して入力することも可能。

margin-right :3em・・・こうすると、右部分の余白の設定が3em分広がるような設定になります。

行間を指定する WEBサイト作成術 P118~122

line-height : タグで指定する。

/*クラスの要素*/
.honbun{
background-color : #fff;
line-height : 1.5;・・・この部分が行間の設定記述
}

3コマ目

一文字目に変化をつけるには WEBサイト作成術 P123~125

一文字目の変化

first-letterタグを使用する。

/*h2の最初の1文字の要素*/
h2:first-letter {・・・この部分に指定する。ただし終わりに半角スペースを必ず入れる。(インターネットエクスプローラーのバグ対策)
color : #fff;
font-size : 1.3em;
}

インデント(文字間)をつけるには?

text-indent : タグを使用する。

/*クラスの要素*/
.honbun{
background-color : #fff;
line-height : 1.5;
text-indent : 1em・・・この部分がインデント
}

文字の表示位置の設定 WEBサイト作成術 P126~128

text-align : タグを使用

/*h1の要素*/
h1{
background-color : #350;
color : #fff;
font-size : 3em;
margin : 0;
text-align : center・・・この部分が表示位置の設定
}

right・・・右寄せ

left・・・左寄せ

center・・・中央寄せ

文字装飾の設定 WEBサイト作成術 P129~138

文字の太さの設定

font-weight :タグを使用

表示指定が、bold normal 100~900までの数値 bolder lighter

font : の字体(イタリック体)の設定

font-style : タグを使用

表示指定が、normal italic oblique

フォントの種類かフォント名の設定

font-family : タグを使用

表示指定が、serif等

文字の間隔の設定

letter-spacing : タグを使用

表示指示がem px pt

CSSはこんな感じ

/*h2の最初の1文字の要素*/
h2:first-letter {
color : #fff;
font-size : 1.3em;
font-style : italic; ・・・ここが、フォントの字体の設定の記述
font-family : serif;・・・ここが、フォントの種類またはフォント名の設定の記述
}
/*h2の要素*/
h2{
background-color : #fb5;
font-size : 1.2em;
letter-spacing : 0.5em;・・・ここが、文字の間隔の設定の記述
}
/*クラスの要素*/
.head{
background-color : #fff;
padding : 3em;
margin : 0;
font-weight : bold;・・・ここが文字の太さの設定の記述
}

4コマ目

スタイルを指定する。 WEBサイト作成術 P139~144

<div></div>タグで記述する。

このタグはブロックの範囲を指定するので、タグが入っていてもOK

<span></span>タグで記述する。

はタグの一部(インライン)の範囲を指定してあげる。

がある。

リンクを張る WEBサイト作成術 P146~154

href・・・ハイパーリファレンスの略

<a href="リンクの名前"></a>のタグで記述する。

別のフォルダ上にあるリンクについては、 WEBサイト作成術 P152~153にて記述してある。

<a href="○○○/リンクの名前"></a>と記述すると、親ファイルの中の○○○フォルダに移動する。

<a href="○○○/△△△/リンクの名前"></a>と記述すると、親フォルダの中の○○○フォルダさらにその中の△△△フォルダに移動する。

<a href="../リンクの名前"></a>と記述すると親フォルダの前の階層のフォルダに移動する。

<a href="../../リンクの名前"></a>と記述するた親フォルダの前の前の階層フォルダに移動する。

/○○○と記述しないように注意!!

これはWEBサーバーの初めの画面に戻ってそこから、○○○のフォルダに移動する命令になるので注意!!

5コマ目

実際に異なるフォルダへリンクしてみよう。

異なるフォルダにHTMLファイルを移動した時には今まで、リンクしたファイルのリンク切れを起こすので、すべてのリンクに対して変更をする必要がある。

これは、HTMLファイル・CSSファイル両方のファイルが必要である。

6コマ目

電子メールのリンクを張る WEBサイト作成術 P155~159

<a href="リンクの挿入"></a>タグの中に

mailto:メールアドレスを入れる。

つまり<a href="mailto:メールアドレス"></a>となる。

 

このページのトップへ移動する。

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

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

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

感想

今日からは自分でHTMLタグの記述とCSSの設定をする学習に移った。

いかにDreamweaveとゆうソフトがありがたいのかを今日は身をもって体験した。

1コマ目

簡単な先生の自己紹介・・・先生の担当はWEBのネットワーク関連とHTML・CSSが担当分野だそうだ。

この3日間で使用する教科書  HTMLとスタイルシートによるWEBサイト作成術

HTMLとは?

WEBページの記述言語・・・これは英語や日本ごのように、コンピューターがわかるようにしたいわばコンピューター語です。

おもに、ページの構文(内容)などを記述する言語です。

CSSとは?

書式の指定する言語

これは、HTMLで記述した文章の書式(文字の大きさや字体など)を指定するために使います。

最近では、見栄えのデザインに使用している。

HTMLでは、構文CSSでデザインを決める感じかな。

サイト作りのコツ WEBサイト作成術 P24~30

サイトを作るために、自分の気になっている内容などを見つける。

存在するサイトを調べて「まだないサイト」をみつける

2コマ目

サイトの構成を考える WEBサイト作成術 P31~36

ブレインストーミング・・・とりあえず思い当たる内容を挙げていく。

フォルダ分け・・・思いついた内容をフォルダごとに整理する。

見やすいサイト名(英語などわかりにくいタイトルをつけない)・・・タイトルを見てなにについて書かれているサイトなのかわかりやすくする。

WEBサイトを作るのに必要なソフト WEBサイト作成術 P42~45

WEBブラウザ・・・インターネットを見るためのソフト。 例、インターネットエクスプローラ・ファイアーフォックス等。

テキストエディタ・・・HTMLを記述できるソフトで、windowsではメモ帳で、WEBデザインソフトでは、Dreamweave等がある。

グラフィックソフト・・・画像を加工するソフトで、windowsではペイントWEBデザインソフトでは、Fireworks等がある。

FTPソフト・・・WEBページをネットワーク上のサーバーにアップロードするためのソフトで、代表的なのが、フリーソフトのFFFTPがある。

ページの作成 WEBサイト作成術 P46~49

今回作成に使用したソフトは、フリーソフトのTeraPadとゆうテキストエディタを使用しました。

windowsメモ帳でも作成できるのですが、フリーソフトのTeraPadのほうが使いがってがよいので、作成しました。

ページの雛形の作成

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">・・・現在のHTMLのバージョンの記述
<html>
   <head>
     <meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS">・・・メタタグでこの部分は文字コードの記述
     <title>タイトル</title>・・・タイトルの記述
   </head>
   <body>
    <p>ここに段落を挿入</p>・・・ここから本文
   </body>
</html>

HTMLの構文を作成する際に、決まった文章を記述する必要があるので、これの作成を行いました。

以降HTMLのデータを作成する場合はこの雛形を利用して作成します。

3コマ目

メタダグ WEBサイト作成術 P58~60

メタタグとは実際にはWEBページ上では表示されませんが、HTMLのより詳細の情報をより的確に指示するために使用します。

どんなコンピューターの環境でも文字が表示されるように、どの文字コードで書いてるか記述する。

文字コードにはいくつかの規格があり現在3種類の文字コードが広く使われている。

Shift-JIS・・・ウィンドウズ系のパソコンで広く使われている文字コード

EUC・・・UNIXやMACなどのOSで広く使われている文字コード

Unicode(UTF-8)・・・世界共通の文字コードにしようと最近広まってきた文字コード

文字コードとは、コンピュータで認識文字を認識するためにあらかじめ決められた数字のコード

Aは65番等決められている。

これが、規格によって異なる。

なので、インターネットのソースを表示すると、時々文字化けするソースがでてくるのもこのためである。

HTMLのルール WEBサイト作成術 P63~67

<!--コメント-->で囲むと、コメントになり、ブラウザ上では表示されないので、メモ(ここに何を表示しているか等)を入れるとソースがわかりやすくなる。

タグの中にはブラウザによっては対応していないタグがあり、対応していないタグは無視して表示される。

4コマ目

トップページの作成 WEBサイト作成術 P70~76

トップページは必ずindex.htmlにする。

半角スペースの入力はほとんどブラウザで表示されない。

使用タグ一覧

・・・段落

br・・・改行

hr・・・水平線

見出しを作るには WEBサイト作成術 P77~80

見出しにはh1~h6までレベルがある。

1が大見出しで6にいくにつれて小見出しになっていく。

文字の表示の大きさは各ブラウザによって異なる。

スタイルシートを作成・保存 WEBサイト作成術 P82~P86

スタイルシートの記述はこんな感じ

/*bodyの要素*/・・・/*~*/で囲った部分はコメントなので、表記されない
body{
background-color : #bf8;・・・設定の終わりには必ずセミコロンを入れる
}
/*h1の要素*/
h1 {
background-color : #350;
color : #fff
}

background-colorは背景色の設定

colorは文字色設定

#bf8は色を16進数で表示されている。

1~9までは、1~9

10~16までは、a~fで表記されている。

色の指定順番は、左から赤・緑・青の順番である。

なので、#bf8は赤が11・緑が15・青が8なので、白色に近い黄緑色の設定となる。

5コマ目

CSSをindex.htmlにリンクさせる。 WEBサイト作成術 P85~86

index.htmlのヘッダタグの中に

<meta http-equiv="Content-Style-Type" content="text/css">・・・メタタグで、CSSの種類を設定する記述
<link rel="stylesheet" href="nogizaka.css" type="text/css">・・・CSSのリンクを張る記述

を入れる。

HTMLに直接CSSを埋め込む WEBサイト作成術 P94

ヘッダに直接

<style type="text/css">
h1 {
background-color : #000;
color : #fff
}
</style>

のように<style type="text/css"></style>の間にCSSを記述する方法

タグの中で直接指定する方法 WEBサイト作成術 P94

<h1 style="background-color : #00f">
乃木坂周辺案内へようこそ
</h1>

のように記述する。

CSSの使い勝手 WEBサイト作成術 P95

CSSファイルを作成して使用すると、1つのファイルで共有してページを作ることができるので、統一感ができてくる。

その中でも、個別に設定したい時などは、直接タグを記述すると便利

なので、全体のページレイアウトはCSSファイル・ある一部分の装飾は直接CSSを記述する方法が便利。

CSSファイルの2つ以上のリンクについて WEBサイト作成術 P88~89

同じ部分での書式設定があった場合、優先順位は、後にリンクされたCSSの方が優先される。

CSSファイルのコメントの入れ方 WEBサイト作成術 P93

/*と*/で囲まれた部分はCSSでコメント表示になるので、反映されない。

6コマ目

CSSファイルのクラス設定 WEBサイト作成術 P96~97

/*クラスの要素*/
.head{・・・クラスの名前は任意。
background-color : #fff;
}
/*クラスの要素*/
.contents{・・・クラスの名前の前にピリオドをつける。
background-color : #fb5;
}
をCSSファイルを記述

index.htmlの記述は、

<p class="head">・・・クラスの名前
「乃木坂周辺案内」は、乃木坂の周りを紹介するサイトです。
</p>
<p class="contents">・・・ピリオドは外す
乃木坂の周辺・・・乃木坂駅と乃木公園<br>
乃木坂の歴史<br>
このサイトと作者について
</p>

と変更するとクラスを設定すると反映される。

クラス指定の仕方 WEBサイト作成術 P97~99

タグの指定方法が様々あるので、教科書にわかり易く記述してあるので参照する。

クラスの名前は、内容の意味から作るとわかりやすくなる。

文字の大きさを指定する。 WEBサイト作成術 P100~103

h1{
background-color : #350;
color : #fff;
font-size : 3em;・・・ここがフォントサイズの設定の記述
}

文字の大きさ記述の設定は教科書 WEBサイト作成術 P101を参考にしてください。

種類はem・%・px・pt等がある。

px・ptはサイズがフォントサイズの大きさが変わらなくなるので、注意

 

このページのトップへ移動する。

サイズ変更ボタン サイズ縮小ボタン サイズ拡大ボタン サイズリセットボタン
RSSフィード

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

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

10 | 2018/11 | 12
- - - - 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ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。