サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
体力トレーニング
park16.wakwak.com/~html-css
■ 見出し 見出し「34号のおへや」を目立つようにしましょう。 <font> タグを使ってもできるけど、ここでは見出しっぽく、見出しタグ <h1>~</h1> を使いましょう。 見出しタグは <h1> から <h6> まであります。 <h1> が一番大きくて、<h6> が一番小さいです。<font> タグとは逆になります。 ちょっとやってみましょうか。 <h1>34号のおへや</h1> <h2>34号のおへや</h2> <h3>34号のおへや</h3> <h4>34号のおへや</h4> <h5>34号のおへや</h5> <h6>34号のおへや</h6> って書くと 34号のおへや 34号のおへや 34号のおへや 34号のおへや 34号のおへや 34号のおへや てな具合になりました。 見出しだから、段落タグ <p> みたいに1行空くんですね。 あと、勝手に太字になってます。 ちなみに、<fo
文字の大きさを変える <font size="1~7">text</font> 大きい文字にする <big>text</big> 小さい文字にする <small>text</small> 太字にする <b>text</b> 斜体にする <i>text</i> 下線を入れる <u>text</u> 取消線を入れる <s>text</s> 強調文字にする <strong>text</strong> 上付き文字にする <sup>text</sup> 下付き文字にする <sub>text</sub> 等幅フォントにする <tt>text</tt> フォントを指定する <font face="フォント名1、フォント名2、フォント名3">text</font> 文字の色を変える <font color="RGB値またはカラーネーム">text</font> 見出しをつける <h1>text</h1>
■ リンク講座 ここでは、リンクの方法について説明しています。 「え゛~、リンクなんてホームページ作成講座でもうやったじゃーん!」とお思いの方もいらっしゃるでしょうが、再度整理する意味で読んでみて下さい。 ◆絶対パスと相対パス 「あわわ・・・、そんな言葉知らないよ~。」 でしょー。だからちゃんと整理しなくちゃ。 HTML でリンク先のファイルの位置を記述する方法としては、絶対パスと相対パスの2種類あります。 ちなみにパスというのは進路とか道順という意味です。リンク元ファイルから、リンク先ファイルまでの道順というわけですね。 わかりやすいように2時間かけて図をつくりました。苦労してるでしょ(^^; 絶対パスは、ファイルの URL をサーバの名前から全部記述する方法です。 例えば、このページにリンクするときのURLは、 http://park16.wakwak.com/~html-css/li
◆背景色を指定する HTML では、<body> タグに bgcolor プロパティを使ってページ全体の背景色を指定したり、<table> タグ、あるいは <tr> タグ、<td> タグなどで同じように bgcolor プロパティ使ってセルに背景色をつけたりしました。CSS ではこの他に、段落や文字にも背景色をつけることができます。 色の指定方法は前に勉強したとおり、#rrggbbやカラーネーム など5種類あります。 transparent プロパティは背景色透過です。つまり、背景に何も指定しないってことです。 (css file) h3{ text-align:center; background-color:rgb(128,0,50); color:rgb(100%,100%,100%); } div{ background-color:#30f; color:#000; } span
<ul> <li>Teaser feat.Clench & Blistah</li> <li>real Emotion</li> </ul> Teaser feat.Clench & Blistah real Emotion
■ 検索エンジン登録 まずはお手軽な、検索エンジンに登録することからはじめましょう。 さて、検索エンジンってどのくらいあるものなのでしょう? あまりインターネットをやらない人でも一度くらいは聞いたことがあるというのがこちらですね。 ■ Yahoo! JAPAN その他、思いつくものをあげれば、こんなところでしょうか。 ■ infoseek ■ goo ■ Google ■ MSN サーチ ■ Excite ■ フレッシュアイ ■ BIGLOBE サーチ Attayo もちろん他にもたくさんありますが、あげたらきりがないので割愛させていただきます。 もっと知りたい人はこちらをご覧下さい。 ■ サーチエンジン登録ガイド ものすごい数ですね。 お時間のある方は、このページをこれ以上読む必要はありません。 サーチエンジン登録ガイドさんにある検索エンジンに片っ端から登録しまくってください。最も効果的
◆枠線のスタイルを指定する (css file) p{ background-color:#fc3; border-width:10px; width:300px; } .solid{ border-style:solid; } .double{ border-style:double; } .groove{ border-style:groove; } .ridge{ border-style:ridge; } .inset{ border-style:inset; } .outset{ border-style:outset; } .none{ border-style:none; } (html file) <p class="solid"> solid</p> <p class="double"> double</p> <p class="groove"> groove</p> <
<p style="background-color:#cf6;width:300px;"> スタイルシートで幅(width)、高さ(height)を指定した四角形の範囲をボックスといいます。</p> スタイルシートで幅(width)、高さ(height)を指定した四角形の範囲をボックスといいます。 <p style="background-color:#ff6;width:300px;height:200px;"> widthプロパティ、heightプロパティを使えば、ボックスの大きさを指定することができます。プロパティ値にはmm、cm、pxといった長さを指定する単位を使うか、あるいは親要素に対する割合(%)を使うことができます。width、heightともにデフォルトはautoで、自動的にテキストが入る大きさになります。</p> widthプロパティ、heightプロパティを使えば、ボ
超初心者のためのホームページ作成講座、HTML、スタイルシート(CSS)講座、NetscapeComposerの使い方
■ クリッカブルマップ クリッカブルマップを使うと、1つの画像や写真(イメージ・ファイル)から複数のリンクを張ることができます。 クリッカブルマップにはクライアントサイド・クリッカブルマップとサーバサイド・クリッカブルマップの2種類があります。 クライアントサイドはブラウザで実行するので超初心者でも簡単に作ることができます。一方、サーバサイドの方は文字通りサーバが実行することになるので、そのためのソフトが必要になるし、サーバにプログラム(CGI)を作る必要があるので、超初心者には作ることはできません。もちろん34号もわかりません。ということでこの講座ではクライアントサイド・クリッカブルマップを勉強します。 ちなみに、クリッカブルマップではなくイメージマップという場合もあります。クライアントサイド・クリッカブルマップはクライアント・イメージマップということになります。 能書きはこれくらいにし
◆ボックスの幅と高さを指定する (css file) div{ background-color:#fc3; width:400px; height:150px; } (html file) <div> 幅 width プロパティ、高さ height プロパティを使えば、ボックスの大きさを指定することができます。プロパティ値には長さを指定する単位を使うか、あるいは親要素に対する割合を使うことができます。このボックスは幅400px、高さ150pxですね。 </div> 幅 width プロパティ、高さ height プロパティを使えば、ボックスの大きさを指定することができます。プロパティ値には長さを指定する単位を使うか、あるいは親要素に対する割合を使うことができます。このボックスは幅400px、高さ150pxですね。
■ ページの基本構造 <html> <head> <title>title</title> <meta http-equiv=・・・> <mata name=・・・> <mata name=・・・> </head> <body bgcolor=・・・> document </body> </html> HTMLを宣言する <html> <head>header</head> <body>document</body> </html> ページ情報を記述する部分を指定する <head>header</head> ブラウザに表示される部分を指定する <body>document</body> タイトルを記述する <title>title</title> ページの内容を記述する <mata name="description" content="ページの内容"> ページに関連するキーワードを記述す
■ 用語集 このホームページに出てくる用語について、予め説明しておきましょう。 管理人の勝手な解釈に基づいていますので、間違っているかも知れません(特に英語のスペルはあやしい)。 とりあえず、このホームページでは、こういう意味で使っています。 ホームページ(homepage) ホームページとは、本来は、いわゆる「トップページ」のこと。 野球のホームベースをイメージして下さい。 バッターはホームベースの横に立ち、打って、一塁に向かって走ります。一塁から二塁、三塁を回って、またホームベースに戻ってきますね。 ホームページも同様です。 インターネットをしていて、みなさんがまず立ち寄るのが、トップページ(表紙)ですね。それから、興味のある内容を見に行きます。見終わったら、またトップページに戻り、ほかにおもしろそうな内容があれば、また見に行きます。掲示板に行って、感想を書く場合もあるかも知れません。
そんなとこ、わざわざ<strong>強調</strong>しなくても そんなとこ、わざわざ強調しなくても
■ タグに対する設定の方法 タグにスタイルを設定する場合は、 タグ{ プロパティ:値; } となります。 例えば、見出しタグ <h2> に文字色黄色、背景色青、テキストの位置中央を設定する場合は、 h2{ color:#ffff00; background-color:#0000ff; text-align:center; } となります。 同じスタイルをいくつかのタグに設定したい場合はこのようにすることもできます。 タグ1,タグ2,タグ3{プロパティ:値;} タグをカンマ(,)で区切って並べます。{ }の中のプロパティと値は同じです。 上記の例を <h3> と <h4> にも適用したい場合は、 h2,h3,h4{ color:#ffff00; background-color:#0000ff; text-align:center; } となります。 <h2>h2の見出しだよ!</h2>
プロパティによっては他にも値がありますが、これだけ覚えておけば十分です。 ◆斜体文字にする (css file) div{ font-style:italic; } (html file) <div>犬も歩けば棒にあたる。いてっ☆</div> ◆スモールキャップ (css file) div.caps{ font-variant:small-caps; } (html file) <div>End of the World</div> <div class="caps">End of the World</div> スモールキャップを適用すると、タグに囲まれた文字列は全て大文字になり、なおかつ通常の大文字より小さく表示されます。日本語では使われません。 文字の大きさ(font-size)を指定している場合には、大文字にはなりますが小さく表示されずに指定した大きさのままです。 ◆文字の太さを
■ HTMLタグ&スタイルシート・ミニ辞典 ■ 項目をクリックすると、説明やサンプルが表示されます。 廃止される予定のタグ(deprecated)も堂々と掲載していますので、同じページにあるスタイルシートで代替できれば、そちらを使った方が良いでしょう。 Netscape や Mozilla では表示されないタグやプロパティも含まれています。 画像や写真素材は使用してはいけません。 おおまかな分類はこちら↓を参考にして下さい。
■ スタイルシートってどんなの? スタイルシート(Cascading Style Sheet:CSS)っていうのは、HTML で作ったページの見栄えをもっとよくするための技術です。 HTML だと、ページのレイアウトを整理するのに、<table> や <blockquote> を駆使してたと思うけど、CSS を使えば、簡単(?)にもっと細かく作れるようになります。レイアウトだけじゃなく、文字の大きさや色、字体、行間なんかも自由自在になります。 見栄えなんかどうでもいいやって人も覚えとけば便利。 ページの外にスタイルの設定を書き込んだシートを作って、これをページに適用することができるから、たくさんページを作ってもスタイルを設定したシートを修正するだけで、すべてのページを修正することができます。 それでは、実際に試してみましょう。 まずメモ帳(テキストエディタ)で、普通の HTML ファイルを
予想通り、厳しい結果です。 検索キーワード「スタイルシート」の結果ではほとんど来てくれる人はいないですね。「スタイルシート講座」で検索してくれれば、ほとんどの人が来てくれそうなんですけど。 これではロボット型検索エンジンから訪れる方が少ないものうなずけますね。 検索結果が表示されてお目当てのサイトを見つけるまで、通常何ページくらい見るものなのでしょう。 まあ、5 ページくらいがいいところでしょうか。1 ページ 10 件として 50 位くらいまでに表示されていないとなかなか来てもらえないことになります。 そういえば、Excite は Google と提携しているはずですが、微妙に順位が違いますね。理由はわかりません。 infoseek はつらいです。なんでこんなに悪いのかなぁ。 ロボット型検索エンジンで上位に表示されるにはどうしたらいいのでしょう。 上位に表示されるしくみは、検索サイトを運営
◆リストマークを変更する (css file) ul.kuro{ list-style-type:disc; } ul.siro{ list-style-type:circle; } ul.sikaku{ list-style-type:square; } ul.suuji{ list-style-type:decimal; } ul.roma1{ list-style-type:lower-roman; } ul.roma2{ list-style-type:upper-roman; } ul.alpha1{ list-style-type:lower-alpha; } ul.alpha2{ list-style-type:upper-alpha; } ul.nasi{ list-style-type:none; } (html file) <ul class="kuro"><li>In
■ マスローの欲求階層説ってご存じですか? 心理学を勉強された方はよくご存じでしょう。実は経営学における動機づけ理論(motivation theory)の基礎にもなっています。 マスロー(A.H.Maslow,1908-1970)は有名な心理学者で、人間が持つ内面的欲求を五段階に体系化した人です(ゆえにマスローの欲求五段階説とも言われます)。 つまり、人間の持つ欲求は、生理的欲求-安全への欲求-社会的欲求-自我欲求-自己実現欲求といった形で低次元の欲求から高次元の欲求へと5つの階層をなしており、低次元の欲求が満たされてはじめて高次元の欲求へと移行するというものです。 生理的欲求とは、いわゆる人間の三大欲求と言われる食欲・性欲・睡眠欲です。安全への欲求とは、自分や家族を危険から守りたいという欲求、社会的欲求とは、仲間はずれにされたくない、人から愛されたいという欲求、自我欲求(または自律欲求
◆絶対的な位置指定 position プロパティは位置の指定方法を決めます。絶対的な位置を指定するときは、プロパティ値を absolute にします。 絶対的な位置は、まわりの段落(ブロック)や画像などに関係なく、ある基準(通常は画面の端)からどのくらい離れているかで決定されます。 <html> <head> <title>絶対的な位置指定</title> <style type="text/css"> <!-- div{ background-color:#60f; color:#fff; width:300px; padding:10px; position:absolute; } .position1{ background-color:#f60; top:200px; left:150px; } .position2{ background-color:#080; top:300p
次のページ
このページを最初にブックマークしてみませんか?
『超初心者のためのホームページ作成講座 - HTML - CSS - Mozilla Composer』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く