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

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

[PR]

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

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に書けます。今の時代は非効率なので、あまり使われません。たぶん。
使い方としては、
ラーメンだと

ラーメン

になります。

●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タグ

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

subタグ

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

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

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

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

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