2016年5月30日月曜日

第６章 CSSとHTMLの基本

CSSを外部ファイルにする方法

スタイルシート3種類の適用方法の練習

要素の検証 Google Chrome
Google Chromeの標準機能「要素の検証」が神すぎてワロタ！！

要素の詳細を表示 Safari
SafariやChromeでサイトのCSSを簡単に調べる | A-tak-dot-com

スタイルシート3種類の適用方法の練習

３種類の方法で指定できるスタイルシート

CSSには3種類の場所から指定する方法があります。

正確に書いてあっても反映されない場合や

1ページ分だけにHTMLタグを使って特別なCSSを適用したい場合などに

この3種類を使い分ける必要が出てきます。

優先される表示順位は

1 < 2 < 3

です。

1.外部スタイルシート

HTMLからCSSファイルを呼び出す方法
CSSファイルをHTMLファイル内で呼び出す方法を紹介する。

CSSファイルの呼び出しは<head></head>内に記述する。

CSSファイルの呼び出し – HTMLファイル

<title>タイトル</title>

<link rel=”stylesheet” href=”CSSファイルへのパス” type=”text/css” />

</head>

CSSファイルへのパスは相対パス、絶対パスのどちらでも良い。

2.head要素のスタイルシート

headタグ内への記述する方法

headタグ内への記述は以下の通り。今回h1タグに対して、margin:0（余白ゼロ）

とfont-size:3em（文字の大きさを3emにする）のスタイル指定をする。

head内でのCSSの記述例 – HTMLファイル

<head>

<title>タイトル</title>

<style type=”text/css”>

h1 {

margin: 0;

font-size: 3em;

}

</style>

</head>

この記述方法のデメリットとして、まず、SEOの効果が下がる事が挙げられる。これは、CSSファイルを呼び出す方法と比べてbodyタグの位置が下に来るからである。詳しくは関連記事を参考にしていただきたい。

他にも、「1つのファイルが長くなるため単純に見づらいコードになる」、「それぞれのHTMLファイルにいちいち記述しなければならない」などのデメリットが挙げられる。

3.インラインスタイルシート

それぞれの要素に対するスタイル指定する方法

今回は特定のpタグに対してcolor: red（文字色を赤）とfont-size: 20px（文字の大きさを20pxにする）のスタイル指定をする。

特定のpタグに対するCSSの記述例 – HTMLファイル

<p style=”color: red; font-size: 20px;”>

このpタグに対してスタイルを指定する。

</p>

この記述方法のデメリットとして、

「全てのpタグに手動で書かなければならず、変更の際に面倒」

「コードが見づらくなる」などが挙げられる。

できる限りHTMLからCSSファイルを呼び出した方が良いだろう。

※教科書ではHTMLからCSSファイルを呼び出す方法が使われています。
しかし、間違ってhead要素のスタイルシートやインラインスタイルシート
になってしまっている場合があります。
意図的に使い分けをする以外はHTMLからCSSファイルを呼び出すようにしましょう。

スタイルシート3種類の適用方法の練習

以下のHTMLコードをコピーしてstyle.htmlを作成し、

style.cssというファイルとリンクして

コード内の指示に従って色を設定しましょう。

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<title>スタイルシート３種類の適用方法</title>
</head>

<body>
<div align="center" id="ichi">
<p><br />
    <br />
    <br />
    <font size="18px">この文字を外部スタイルシートで#ff0000の色にせよ。</font></p>
<p> </p>
<p> </p>
</div>
<div align="center">
<p><br />
    <br />
    <br />
    <font size="18px">この文字をhead要素のスタイルシートで#00ff00の色にせよ。</font></p>
<p> </p>
<p> </p>
</div><div align="center">
<p><br />
    <br />
    <br />
    <font size="18px">この文字をインラインスタイルシートで#0000ffの色にせよ。</font></p>
<p> </p>
<p> </p>
</div>
</body>
</html>

サンプル(回答例)
styletest.html
styletest.css

CSSを外部ファイルにする方法。

プリント(カラー)のほうの課題design_zeroでは、プリントの内容にそって正しく作成している場合

CSSがhead内に入っていては×ダメです。

head内に入ってしまっているCSSを外部ファイルに書き出す方法は以下の手順です。

1.CSSスタイルの<style>の中のbodyを選択

2.CSSスタイルのパネルの右上の項目をクリックしCSSルールを移動を選択

3.新規スタイルシートを選んでOKをクリック

4.basic.cssという名前をつけて保存

5.人によってはこのコマンドが出るのではいを選ぶ

6.CSSスタイルのパネルを確認　basic.cssが出来ている

ソースコードの隣に、basic.cssが出来ている

basic.cssの左の三角をクリックするとbodyがその中に移動している

2016年5月27日金曜日

第６・７章 CSSとHTMLの基本

例として、このウェブサイトを最終的に作成したいとする。

CSSとは？HTMLとどう関係しているのか？
を
http://www.htmq.com/csskihon/401.shtml
を
見ながら確認していきます。

↑のページの工程を大まかに追っていくとこのようになります。

１. WEBの完成図の全体像(構造)を図に書く
２.その図に合わせたHTMLタグをつける(マークアップする・構造付けをする)
見出し(h1.h2.h3.h4.h5.h6)・段落(p)・表(table tr th)・リスト(ul li)などの要素に分け

３.<div>や<span>でスタイリングのためのタグ付けをする
見出し・段落・表・リストで分類できないものにはdivかspanをつける

divとspanは何が違うのか？

divはブロック要（前後を改行して“かたまり”をつくる)

spanはインライン要素（行中にそのまま続いていく）

４. CSSの設計をする
　　　id属性やclass属性で各部分に名前を付けてセレクタを設計する

５. CSSでスタイル指定する

読み方を間違いやすいHTMLタグやCSSタグ

HTMLタグの読み方辞典

http://www.coolwebwindow.com/cssref/html-tag-ref.html

今さら聞けない！読みづらいCSSプロパティの正しい読み方
http://creativememomemo.com/css_property_readings/

以下より引用

スタイルシートが必要な理由

現在、ウェブページを制作する言語として広く利用されているHTML4.01やXHTML1.0には、 <center>や<font>などの装飾目的の要素（タグ）や属性が存在しています。また、<table>タグでレイアウトをまとめるなどの方法を駆使すれば、 HTMLだけでウェブページの見栄えを制御することもできなくはありません。

しかし、ウェブページのスタイリングにHTMLを用いるべきではありません。

HTMLは情報構造を定義するための言語であり、見栄えの制御のために本来の役割とは違った使い方をすると、文書の情報構造がでたらめになってしまうからです。

コンピュータや検索エンジンに理解されないでたらめな文書構造になってしまえば、せっかくの情報もうまく活用されません。

また、HTMLの要素（タグ）をどのように表示するかは、ユーザーエージェント（ブラウザ）によって異なることがあります。 HTMLタグを駆使してある閲覧環境では見栄え良くレイアウトできたとしても、他の閲覧環境ではまったく意図しないレイアウトになってしまうこともありえます。

ポイント：　HTMLは骨組み、CSSは装飾　

CSSを使用したWEBレイアウトの基本

(1)divボックスを作る

　　方法A＝HTMLソースに<div>〜</div>を直打ちする

　　方法B=画面上のバー「挿入>レイアウトオブジェクト>Divタグ」
　　方法C=挿入パネルの「Divタグの挿入」

(2)divボックスに名前を付ける

　　方法Aの場合＝<div id="~">...</div>または<div class="~">...</div>と直打ち

idとclassの違い

■[id] =１ページ内で１つのみ

それぞれの要素は1つのidしか持つことが出来ません。
個々のページでそのidを使用した要素もまた、たった1つでなければなりません。
もし同じidを2つ以上の要素で使用すると、バリデーションチェックでエラーが出てしまいます。
例：バナー画像は１ページに１つしかないのでidで設定する

■[class]=1ページ内で複数

複数の要素で同じclassを使用することが可能。
複数のclassを同じ要素内で使用することも可能。
もしページ上で何度も使用されるスタイル設定ならば、classを使う。
例：ページの中で複数箇所を赤文字表示にしたい場合はclassで設定する。

　　方法B・Cの場合
　　＝出てくるウインドウの指示に従って操作するとidやclass名をつける事が出来る
　　

(3)名前を付けたdivボックスの設定を作る
　・dreamweaver上でdivボックスを選択し、
　　選択した状態でCSSスタイルのパネルの右下の
　「新規CSSルールのボタン」をクリック。

※Illustratorなどのような「文字や画像を自分が移動したい場所に配置する」
　という感覚ではなく、
　「文字や画像を入れたdivボックスの内と外に余白をどう作るか」
　を使ってレイアウトする感覚で操作していくとわかりやすい。

内(がわの余白)＝マージン margin
外(がわの余白)＝パディング padding

第５章のポイントまとめ

文字または画像にリンクをはる

<a href="リンク先のURL"> リンクをはる文字列</a>
<a href="リンク先のURL"> <img src="リンクをはる画像のURL"></a>

メールリンク
<a href="mailto:送信先に指定するアドレス">リンクを貼る文字や画像</a>

ターゲット設定

<a href="~" target="_blank">リンクをはるもの</a> _blank=新ウインドウを開く

<a href="~" target="_new">リンクをはるもの</a> _new=新タブを開く

2016年5月24日火曜日

「dezign_zero」の課題元データ

「dezign_zero」の課題

基本的に教科書で学習したことになっている内容です。

プリントを見ながら完成させましょう。

HD＞ユーザー(iMac○○)＞書類＞ 自分のサイトのフォルダ ＞

の中に　フォルダ名「dezign_zero」のフォルダがあるようにして下さい。

↓ 

Part4 Lesson-5(元データ)
http://artinkochi.flier.jp/cid/design_zero.zip

 の元データをその中に入れること。 

P.242のSTEP.17の１のcss.txtの内容

最初のデータの状態(画像と文章がバラバラに並んでいる状態)

↓

完成の状態

プリントの通りにやると実際の操作画面と違う所。

プリントはDreamweaver8のWindows版

教室のパソコンはDreamweaver CS6のMac版のため
違う表示になったり、細かい部分でエラーが出る場合があります。
(おおまかには、ほぼ同じです。)

----------------------------------------------
1 P.236ページ以降
　margin や padding の css表記が違う

----------------------------------------------

P.236の６
[.sidebox p]の
「border−bottomを消す」は、
CS6では

border-bottom-width: 1px;

border-bottom-style: solid;

border-bottom-color: #bbbbbb;

の３行を消す

----------------------------------------------

3
P.237 の11
line-height:13px;
は、13のあとに[px]を必ず入れる事。
入れないと13em(13文字分)と設定されて
行と行の間が13文字分づつ開いてしまいます。
----------------------------------------------

4 P.240〜241の「○○行目」の教科書の説明の通りにすると実際のデータが異なります。

以下のように操作して下さい。

----------------------------------------------

5
P.242のSTEP.17の１のcss.txtの内容

----------------------------------------------

6
P.242の[4]は、
画像の[imgbox]の方が正しい。
下の文章の説明の[inforbox]は[imgbox]の間違い。
----------------------------------------------
7
P.234 の10
CS6では「複合」の項目を選ぶ
なぜなら[p.sidetrick]は

pというタグとsidetrickというクラスを
合体して出来ているため----------------------------------------------

2016年5月20日金曜日

Dreamweaverのインジケータを使用した修正方法

1.修正したい箇所をクリックして2.3秒待機2.インジケータが表示されるので、インジケータをクリック

3.該当部分に適用されているCSSのコードが一覧表示される

4.その中で自分が直したい部分に関するCSSコードを見つける
(例えば、ホームボタンの右側にある隙間を調整しようとしているとすると
ul liの項目の中のmargin-right:6px:の部分の6pxが知りたい数値)

5.ul liの項目を選択すると、左のコードの欄はCSSのul liの行に自動で移動する
(左のコードの欄のコードの意味がそのままわかればコードを直に修正する)

6.わからない場合は、
右のCSSスタイルのパネルもul liの項目が選択された状態に自動的になるので

7.CSSスタイルのパネルのul liをダブクリック

8.するとul liのCSS定義のウインドウが開く
marginの数値はカテゴリのボックスの中にあるのでボックスを選択してmargin-rightの数値を確認修正(６pxが正しい数値)

2016年5月17日火曜日

課題のよくある質問と修正箇所

[1]

メニューボタンとメニューボタンの間に青いアンダーバーが出て消すことができない

青いアンダーバーの正体は空白に貼られたリンクです。

例：ホームのボタンの場合

<a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('navi01','','img/navi_home_on.png',1)"> 

<img src="img/navi_home.png" alt="ホーム" width="201" height="37" id="navi01" /></a>

答：

 の部分に空白があります。

この空白を<a href= ~> 〜 </a>の外側へ移動する

(※空白を消すとデザイン上の隙間がなくなってしまうので消さないこと)

移動例1

 <a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('navi01','','img/navi_home_on.png',1)"> 

<img src="img/navi_home.png" alt="ホーム" width="201" height="37" id="navi01" /></a>

移動例2

<a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('navi01','','img/navi_home_on.png',1)"> 

<img src="img/navi_home.png" alt="ホーム" width="201" height="37" id="navi01" /></a> 

それでも治らない場合
</li> <li>が消えている可能性大

[2]

さっきまで出来ていたhtmlファイルの表示がいきなり崩れた
画像が全部いきなりでなくなった。背景画像が出ない。

答：[絶対パスと相対パス][階層構造]を理解して正しく修正することでなおります。

[相対パス]

今編集しているhtmlファイルから見て表示したいファイルがどこにあるか

今編集しているhtmlファイルの

　１つ外のフォルダ(１階層上)に表示したい画像がある場合= ../フォルダ名/画像名

　２つ外のフォルダ(２階層上)に表示したい画像がある場合= ../../フォルダ名/画像名

　同じ階層のフォルダに表示したい画像がある場合=  フォルダ名/画像名

[絶対パス]

ネット上のどこにそのファイルがあるか

http://自分のサイトのURL/フォルダ名/画像名

[3]

.DS_storeファイルがエラーを起こす場合
フォルダを選んでPUTすると
.DS_storeファイルがエラーを起こす場合があります。

送りたいデータ自体を選択してPUTするようにしてください。

どうしても.DS_storeファイルを削除したい場合は

http://inforati.jp/apple/mac-tips-techniques/system-hints/how-to-troubleshoot-mac-finder-window-and-icon.html
↑
の

個別のフォルダから.DS_Storeを削除する方法

を行ってください。

[4]

メニューボタンを押すと違う所へ行く

メニューボタンのリンクがオカシイ時におこるので確認する

確認方法

(1)Safariの画面上のメニューの「表示」の中に「ステータスバーの表示」が出てくる場合はステータスバーの表示がまだされていないので、選択。

(※「ステータスバーを隠す」が出てくる場合はもう表示されるようになっているので変更しない)

(2)各HTMLファイルのメニューボタンを[WEB確認用URL]のリンクから確認する

(カーソルをボタンの上におくと左下にそのボタンにリンクされているURLが表示されます。)

この左下のURLが

http://artinkochi.flier.jp/2016/出席番号/kadaisite/〜〜.html

になっていない場合リンクが間違っています。

(〜〜の部分は、ホームのボタンはindex、おすすめアイテムの場合はproducts、

ショップ情報の場合はP.136の作業以前はabout、P.136の作業以降はshop)

CID2016WEB

自分のサイトのindex作成

2016年5月30日月曜日

5/30 CSSについて

スタイルシート3種類の適用方法の練習

HTMLからCSSファイルを呼び出す方法

CSSファイルの呼び出し – HTMLファイル

head内でのCSSの記述例 – HTMLファイル

特定のpタグに対するCSSの記述例 – HTMLファイル

CSSを外部ファイルにする方法。

2016年5月27日金曜日

第６・７章 CSSとHTMLの基本

読み方を間違いやすいHTMLタグやCSSタグ

HTMLタグの読み方辞典

http://www.coolwebwindow.com/cssref/html-tag-ref.html

以下より引用

スタイルシートが必要な理由

idとclassの違い

■[id] =１ページ内で１つのみ

■[class]=1ページ内で複数

第５章のポイントまとめ

2016年5月24日火曜日

「dezign_zero」の課題元データ

「dezign_zero」の課題

プリントの通りにやると実際の操作画面と違う所。

プリントの通りにやると実際の操作画面と違う所。

プリントはDreamweaver8のWindows版

2016年5月20日金曜日

Dreamweaverのインジケータを使用した修正方法

2016年5月17日火曜日

課題のよくある質問と修正箇所

.DS_storeファイルがエラーを起こす場合