おやっさんのWEBサイト制作への道

WEBサイト制作ど素人のおやっさんが、HTML、CSS、PHPなど学んでいく技術ブログです。

[PR]

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

HTML/XHTML&CCS014（objectタグ,paramタグ,mapタグ,areaタグ,usemap属性,shape属性,coords属性）

★タグ
●objectタグ・・・objectは、画像・動画・音声・各種プラグインデータ・JAVAアプレット・他のHTML文書等の、様々な形式のデータを文書に埋め込むための汎用的なタグです。
書き方は
<object data="元データのパス" type="MIMEタイプ" width="幅" height="高さ"></object>
難しので”オブジェクトはいいデータタイプだ”で覚えます。
data="～.swf（flashの拡張子）の場合MIMEタイプは、
application/x-shockwave-flashです。

●parame

・・・paramは、<applet>や<object>でデータが実行される際に、必要となるパラメータを指定するタグです。name属性でパラメータの名前を指定して、value属性でその値を指定します。

nameの値がsrcの場合valueの値はオブジェクトのファイルパスを指定します。

nameをautostart(自動再生する）やnameをloop(繰り返し再生する）にした場合はvalueは
true(再生する）やfalse（再生しない）になります。

難しいので”パラメーターは名前がバルエ”で覚えます。

↑のflashソースが↓です。trueにしてみました。
<p><object date="http://blog.cnobi.jp/v1/blog/user/50c7fe0bb94d9aff445a7fb29619ca3a/1359297053" type="application/x-shockwave-flash" width="300" height="200">
<param name="src" value="http://blog.cnobi.jp/v1/blog/user/50c7fe0bb94d9aff445a7fb29619ca3a/1359297053" />
<param name="autostart" value="ture" />
<param name="loop" value="ture" />
</object></p>

↑のflashソースが↓です。falseにしてみましたが止まりません・・・本当は止まるハズです。
<p><object date="http://blog.cnobi.jp/v1/blog/user/50c7fe0bb94d9aff445a7fb29619ca3a/1359297053" type="application/x-shockwave-flash" width="300" height="200">
<param name="src" value="http://blog.cnobi.jp/v1/blog/user/50c7fe0bb94d9aff445a7fb29619ca3a/1359297053" />
<param name="autostart" value="false" />
<param name="loop" value="false" />
</object></p>

★クリッカブルマップ
マップ全体を<map>タグで定義し、<area>タグでリンク領域とそのリンク先を指定します。また、<src>タグでマップを適用する画像とその画像が使用するマップ名を指定します。

●usemap属性・・・#記号を頭につけたusemap属性の値と、map要素のname属性の値を関連付けます。imgタグに付ける。

●shape属性・・・リンク領域の形状を指定します。
種類は
rect・・・四角形（初期値）
circle・・・円型
poly・・・多角形です。

coords・・・リンク領域の座標をピクセル数で指定します。
rectは左上、右下です（XY,XY)です。
circleは中心点の座標と半径を指定します。（X,Y,半径)です。
polyは全ての角の座標を指定します。(X,Y,X,Y,X,Y・・・)です。
座標位置の計算は正直ムズイです。

★タグ

●mapタグ

・・・HTMLタグでひとつの画像に複数のリンクを設定することを、クライアントサイドイメージマップといいます。

クライアントサイドイメージマップでは、マップ全体を<map>タグで定義し、<map>～</map>間に <area>タグでリンク領域とそのリンク先を指定します。また、<img>タグでマップを適用する画像とその画像が使用するマップ名を指定します。

3種類のフルーツジュース

↓これが上のクライアントサイドイメージマップのソースです。
<p><img src="http://blog.cnobi.jp/v1/blog/user/50c7fe0bb94d9aff445a7fb29619ca3a/1347722379" alt="3種類のフルーツジュース" usemap="#map" /><map name="map"><area shape="poly" coords="10,20,100,20,55,190" href="http://blog.cnobi.jp/v1/blog/user/50c7fe0bb94d9aff445a7fb29619ca3a/1347722395" alt="オレンジ" /><area shape="poly" coords="105,20,195,20,150,190" href="http://blog.cnobi.jp/v1/blog/user/50c7fe0bb94d9aff445a7fb29619ca3a/1347722385" alt="メロン" /><area shape="poly" coords="200,20,290,20,245,190" href="http://blog.cnobi.jp/v1/blog/user/50c7fe0bb94d9aff445a7fb29619ca3a/1347722399" alt="ストロベリー"></map><p>

HTML/XHTML&CCS013（linkタグ,rel属性 ,href属性,type属性,style属性,supタグ,subタグ）

★タグ

●link

・・・その文書ファイルと関連する別の文書ファイルを指定し、その関係を定義するもので、～間で使用します。
これしか知らないのですが。

●rel属性

・・・現在のファイルとリンク先の外部のファイルの関係性を表すキーワードです。

●href属性

・・・リンクする外部リソースのURL。

●type属性

・・・リンクする外部リソースのMIMEタイプです。
（※MIMEタイプとは「タイプ名/サブタイプ名」の形式の文字列です。）

これしか知らないのですが、例えば
<link href="css/base.css" rel="stylesheet" type="text/css" />
これで外部CSSファイルが使えます。
※css/base.cssはリンク先のURL（パス）なのでこれは例で書いたもので、使う人の環境によってパスは違いますので。自分の環境のパスを入れてください。

●style属性

・・・style属性で、要素に対して直接スタイルを指定することができます。
CSSに記述するところをHTMLに書けます。今の時代は非効率なので、あまり使われません。たぶん。
使い方としては、
<p style="background-color: #ff0000">ラーメン</p>だと

ラーメン

になります。

●name属性・・・調べてもよくわからないのですがHTMLでは昔はid属性の代わりに使っていたそうです。

※XHTML1.0 Transition
formタグはnameのみは不可（HTML-lintで『

の属性 `name` はあまり薦められない属性です。id 属性を使いましょう。』と言われる）。よってid属性が望ましい。それに対してinputタグはname指定すること。idのみは不正です。間違えないように。inputタグをidのみ指定にするとget、post時に値を受け渡すことができませんでした、要注意。実際にはブラウザの互換性などを考慮してidとnameの両方併記が現実的。Transitionだと規制がゆるいのでそういう意味でも併記が現実的。←この辺がなんかのちがいですね。たぶん。

●data属性

・・・data属性は、オブジェクトの本体となるデータを設定するための属性です。
属性値にURI（※URLはURIの機能の一部を具体的に仕様化したものである。らしいです。）を指定することで、表示するオブジェクトの本体となるデータを設定することができます。たぶん、本体となるデータのある場所までのパスを入れろってことです。
使い方はdata="パス"です。

●value属性

・・・value属性は、入力コントロールの初期値やラベル、オブジェクトに与えるパラメータ、順序付きリストの項目番号を設定するための属性です。

input要素などの入力コントロールの要素には、属性値に任意の値や文字列を指定することで、初期値やラベルを設定することができます。
param要素には、属性値に任意のパラメータを指定することで、オブジェクトの実行時のパラメータを設定することができます。また、li要素には、属性値に任意の値を指定することで、順序付きリストの項目番号を設定することができます。

li要素のところは覚えない方向でいきましょう。

★タグ

supタグ

・・・<sup>～</sup>で囲まれたテキストを上付き文字として表示するタグです。
例えば、a2+b2+c2の2を上付き文字にします。
a²+b²+c²
CSSの設定は
/* supの設定 */
sup {
font-size: 70%;
}
にしてみました。
他に試したらpx,emもいけます。

subタグ

・・・<sub>～</sub>で囲まれたテキストを下付き文字として表示するタグです。

●spanタグ・・・spanタグはそれ自身は特に意味を持っていませんが、～で囲んだ範囲をひとかたまりとして、スタイルシートを適用するのに用います。divタグと似てますが、こちらはインライン要素です。たぶん段落の中のテキスト（文字）の一部分を装飾したいときに使うんだと思います。
先生の教えに反しますが時間がないので。こんな使い方ができます。

<p>絵の具の <span style="background-color: #0099FF">青色</span>と <span style="background-color: #FFFF00">黄色</span>を混ぜると <span style="background-color: #33CC33">緑色</span>になります。</p>

絵の具の青色と黄色を混ぜると緑色になります。

このようにインライン要素なので改行が入らないです。（※このブログのテンプレがwidthを指定していなければ、ブラウザのサイズによっては、自動改行は入ります。）

HTML/XHTML&CCS012（text-align,ブロック要素の中央揃え）

★CSS

●text-align

・・・行揃え
種類は、
{text-align: leff;}・・・左揃えです。
{text-align: right;}・・・左揃えです。
{text-align: center;}・・・左揃えです。

※インライン要素対象です。
※子孫要素も対象です。
（※文字や画像もインライン要素です。考え方としてこれが重要です。）

●ブロック要素の中央揃え

例えば、
#container{
width: ～px;
margin-left: auto;
margin-right: auto;
}
と記述すると、containerのidで囲まれた部分が中央にきます。

<div id="contants01">
<div id="contants02">
<h2>らーめん<h2>
<h3>みそらーめん<h3>
<h3>カレーらーめん<h3>
<h3>とんこつらーめん<h3>
</div>
</div>
↑のソースはHTMLで記述すると↓のようになります。

らーめん

みそらーめん

カレーらーめん

とんこつらーめん

↑のCSSの記述は・・・
/* div#contents01設定 */
div#contents01 {
border: solid 1px #000000;
background-color: #00ff00;
width: 500px;
height: 300px;
}

/* div#contents02設定 */
div#contents02 {
border: solid 1px #000000;
background-color: #ff2211;
width: 300px;
height: 200px;
margin: auto;
}

/* div#contents02 h2,h3設定 */
div#contents02 h2,h3{
text-align: center;
}
となります。

contents02がcontents01の中で左右の幅が等しい中央にきてますよね。
margin: auto;のCSSの記述でそうなってます。上下は真ん中にくると思ったけどこないようですね。

ちなみに、h2,h3タグの中のテキストがインライン要素なので、text-align: center;で真ん中にきてます。rightなら右、leftなら左に来ます。

●コメントアウト

上のCSSの記述のところに/* div#contents01設定 */ありますよね。
これは、コメントアウトと言ってブラウザが/* */の中に書いたものをプログラムとして読み込まないようになります。ここにCSSの説明など書けば、誰が見てもわかりやすいよになりますよね。使ってったほうが良いらしいです。

CSSは/* コメン */
HTMLは
です。囲みは（、/* */)半角英数で、コメントは全角でもＯＫだそうです。

HTML/XHTML&CCS011（vertical-align,class,width,height）

★CSS

●vertical-align

・・・行の中でテキストや画像などの縦方向の揃え位置を指定する。
書き方は
{vertical-align: text-top;}・・・同じ段落の他のコンテンツの上揃いで表示する。
{vertical-align: text-bottom;}・・・同じ段落の他のコンテンツの下揃いで表示する。
{vertical-align: middle;}・・・同じ段落の他のコンテンツの中央揃いで表示する。
{vertical-align: baseline;}・・同じ段落の他のコンテンツの下揃いで表示する。（※デフォルトです。）
{vertical-align: super;}・・同じ段落の<span class=""></span>などでボックス化した所を上付き文字にします。
{vertical-align: sub;}・・同じ段落の<span class=""></span>などでボックス化した所を下付き文字にします。

{vertical-align: -50px;}・・・・数値、割合で指定する事もできます。いずれも基準はベースラインになります。

↓ベースラインとはこんな感じの考え方です。
ベースライン説明

※tableのセル内だとvertical-alingの値はbaseline,top,middle,bottomになります。

cat

↑上の段落のソースは
<p><img src="http://blog.cnobi.jp/v1/blog/user/50c7fe0bb94d9aff445a7fb29619ca3a/1347266869" alt="猫" class="cat02" />cat</p>です。

CSSは
img.cat02 {
vertical-align: -50%;
}です。どうやらマイナスでcatが上にいくと考えたほうがよさそうです。imgが下に50%行った的な考えかな？

●width

・・・幅です。
書き方は
{width : ～px;}
{width : ～%;}
です。

●height

・・・高さです。
書き方は
{height : ～px;}
{height : ～%;}
です。

↓padding,width,heighe,の関係はこんな感じです。

★HTML,CSS
●class属性・・・CSSを適応するところを指定する事ができる属性です。
↓例です。
<img src="～" alt="～" class="add" />
↑のHTMLの記述、このimgタグだけに、例えばfolatのrightをCSSでしたい場合は
img.add {folat: right;}です。（※addというクラス名のimgタグという意味です。）
.=classです。

idとの違いは同じページ内で複数のタグに、同じclass名を指定できるところです。

div .add {folat: right;}
↑のように書くとdivタグの中のコンテンツのaddと言うクラス名のものという意味です。

<img src="～" alt="～" class="add even" />
↑のようにclass名を複数個書けます。
1ページ内のclassを少なくするためにこんな書き方をするそうです。
要は組み合わせの問題です。（※効率的にCSSを記述するってことです。）
でもレンダリング（※たぶん、ページを表示させること。音声も含まれたりします。要はCPUの負荷的なところの問題です。）速度は落ちます。

※idは1ページに一つしか同じid名を使えないのでレンダリングのときは、id="id名"で探します。classは1ページに同じクラス名を何個でも使えるのでレンダリングのときはまずclassを探して、その次にclass名を探します。なのでclassをいっぱい使うとレンダリング速度は落ちます。

HTML/XHTML&CCS010（background-image,background-repeat,background-position,float,clear）

★CSS

●background-image

・・・背景画像の表示です。（※background-colorよりも優先されます。）
書き方は
{ background-image: url( 画像のパス);} です。
あくまで画像のパスなので、階層がある場合は画像のファイル名を入れてもだめです。

●background-repeat

・・・背景画像の繰り返しです。
{ background-repeat: repeat;}・・・縦横くり返しです。(※デフォルトでなってます。）
{ background-repeat: repeat-x;}・・・横をくり返しです。
{ background-repeat: repeat-y;}・・・縦をくり返しです。
{ background-repeat: no-repeat;}・・・くり返し無しです。

●background-position

・・・背景画像の表示位置です。
考え方として{ background-position: x座標 y座標 ;}みたいな感じです。
値の種類は、
x座標はleft,center,right,pxがあります。pxだと、例えば-3pxだと左へ3px背景画像が移動します。3pxだと右へ3px背景画像が移動します。
y座標はtop,center,bottom,pxがあります。pxだと、例えば-3pxだと上へ3px背景画像が移動します。3pxだと下へ3px背景画像が移動します。（※少しややこしいけど覚えましょう。）
※pxで指定することは、あんまりないそうです。
デフォルトで{ background-position: left top ;}的なものになっています。

メニュー

●醤油ラーメン

●塩ラーメン

●味噌ラーメン

●とんこつラーメン

上のラーメンゾーンのソースは、
<div id="ramen">
<h3 id="button">メニュー</h3>
<p>●醤油ラーメン</p>
<p>●塩ラーメン</p>
<p>●味噌ラーメン</p>
<p>●とんこつラーメン</p>
</div>
です。
ラーメンゾーンのCSSは、
メニューボタン：

h3#button {
background-image: url(http://blog.cnobi.jp/v1/blog/user/50c7fe0bb94d9aff445a7fb29619ca3a/1347456692);
background-repeat: no-repeat;
padding-left: 20px;
}
ラーメンイメージ：

div#ramen {
background-image: url(http://blog.cnobi.jp/v1/blog/user/50c7fe0bb94d9aff445a7fb29619ca3a/1347460117);
background-repeat: repeat;
background-position: center top;
}
です。

●float

・・・右寄せ、左寄せ
書き方は、
{ float: left;}・・・左寄せです寄せです。
{ float: right;}・・・右寄せです。
{ float: none;}・・・無しです。

●clear

・・・回り込み解除です。
書き方は、
{ clear: left;}・・・左のみ回り込み解除です。
{ clear: right;}・・・右のみ回り込み解除です。
{ clear: none;}・・・回り込みを解除しないです。
{ clear: both;}・・・左右どちらでも回り込み解除です。（※ほとんどこれしか使いません。）

こんにちわだにゃん。うちはスコティッシュフォールド。よくわからん種類の猫にゃん。

↑上の画像と文のソースは
<p><img src="http://blog.cnobi.jp/v1/blog/user/50c7fe0bb94d9aff445a7fb29619ca3a/1347266869" alt="猫" />こんにちわだにゃん。うちはスコティッシュフォールド。よくわからん種類の猫にゃん。</p>です。

こんにちわだにゃん。うちはスコティッシュフォールド。よくわからん種類の猫にゃん。

です。

↑上の画像と文のソースは
<p><img src="http://blog.cnobi.jp/v1/blog/user/50c7fe0bb94d9aff445a7fb29619ca3a/1347266869" alt="猫" class="cat01" />こんにちわだにゃん。うちはスコティッシュフォールド。よくわからん種類の猫にゃん。</p>です。

CSSでfloatを右寄せに設定してます。CSSの記述は。
img.cat01 {
float: right;
}

↓先生お勧めのサイトシーイング
ANESSA
TUBAKI
アクアレーベル
資生堂の化粧品のサイトです。
↓資生堂の大元？のサイトもリンクしときます。このサイトから上でリンクしてあるサイトにとべます。
ワタシプラス