こんにちは。あきです。
ロッキー写真集第７弾でございます。
バンフの滝は小さめ。
湖は本当にいい感じです。
滝
31件の返信
月別アーカイブ: 2006年6月
ＣＳＳ
こんにちは。あきです。
前回先輩よりテーブルタグについて学び
今日はＣＳＳ（スタイルシート）について学びます。
アキヒロ：
「先輩。今日はスタイルシートです。
お願いします。」
先輩：
「また来たのか。たまには休ませてくれよ。」
アキヒロ：
「いいじゃないですか。どうせ暇なんだから。」
先輩：
「うるさい。仕方がない。それでは教えてやろう。」
アキヒロ：
「お願いします。」
先輩：
「まずＣＳＳとはCascading Style Sheetsの略だ。」
アキヒロ：
「で、直訳すると？」
先輩：
「知らん。英語は嫌いだ。お前英語勉強してるんだろ。訳してみろよ。」
アキヒロ：
「うーん。分かりません。」
先輩：
「なんだ。お前。何年勉強してるんだ？」
アキヒロ：
「むっ！おそらくですな。
作業を段階的に行う見栄えの紙だから…。
『見栄えを段階的に設定するファイル』
じゃないっすかね。」
先輩：
「これはWebページのレイアウトを定義する為の規格です。」
アキヒロ：
「ちっ。知ってるなら言わせるなよ。」
先輩：
「なんか言ってかね？」
アキヒロ：
「いえ。続けてください。」
先輩：
「ＨＴＭＬのタグにフォントサイズや色をいちいち設定するのは面倒だろ。」
アキヒロ：
「確かに記事の文章や見出しなんかのスタイルは一括で管理して指定したいですね。」
先輩：
「このＣＳＳを使うと複数のＨＴＭＬのデザインをまとめて調整する事が可能になるのだ。どうだすごいだろ。」
アキヒロ：
「これは使えますね。先輩は別にすごくないけど」
先輩：
「いつもそれだな。一言多いんだよな。お前は。まあそれでだ。スタイルシートの指定方法には３種類ある。」
アキヒロ：
「３種類？」
先輩：
「そうだ。
・インラインスタイルシート ・埋め込みスタイルシート ・外部スタイルシート
の３つだ。ほとんどのブログで使われてるのは外部スタイルシートだな。」
アキヒロ：
「詳しく教えてください。」
先輩：
「まずインラインスタイルシートだがこれは各タグに style=”” と属性を設定する事でフォントサイズなどを指定できる。」
アキヒロ：
「はあ。」
先輩：
「ブログのタイトルに使われる見出しタグ<h1>を例にすると」
<h1 style=”font-size:80px;”>こんにちは</H1>
先輩：
「と設定するとこんな感じで特大のこんにちはが表示できる。」
こんにちは
アキヒロ：
「うわっ！うっとうしい。でもこれタグ毎に設定するんですよね。」
先輩：
「まあな。これじゃあ一括設定できるＣＳＳの良さが活かされないな。次は結構使えるぞ。」
アキヒロ：
「埋め込みスタイルシートですか。」
先輩：
「これは各ＨＴＭＬの<head>～</head> 内に
記述するんだ。」
<HEAD>
<STYLE type=”text/css”>
<!–
h2{
font-size : 12px;
}
–>
</STYLE>
</HEAD>
先輩：
「この様に記述する事でこのＨＴＭＬで<h2>タグを使用した文字列は全てフォントサイズが12pxになる。」
アキヒロ：
「なるほど。これを指定したＨＴＭＬファイル内でのみ有効なんですね。」
先輩：
「そういうことだ。そして最後が外部スタイルシート。」
アキヒロ：
「はい。」
先輩：
「これは完全に独立したスタイルシートファイルを作るのだ。こうする事で複数のＨＴＭＬのスタイル情報を一括で管理できる。」
アキヒロ：
「これが通常使われている方法か。」
先輩：
「ただのテキストファイルにスタイルを設定し拡張子を.cssにすれば作成できる。」
アキヒロ：
「ずいぶん簡単ですね。」
先輩：
「うむ。そしてそのスタイルを適用したいＨＴＭＬにスタイルシートを読み込みますよ。と以下の様に設定する事でＨＴＭＬとＣＳＳが関連付けられるのだ。」
<head>
<link href=「スタイルシートのファイル名」
rel=”stylesheet” type=”text/css” />
</head>
アキヒロ：
「なるほど。なるほど。良くわかりました。で今日の小技は。」
先輩：
「結局それが目的かよ。しょうがない。それじゃリンク文字にマウスを置くと色が変わる方法を教えよう。」
a:hover { color:#FF0000; }
a:hover { background:#FF0000; }
先輩：
「上が単純にリンク文字の色下は背景式の色が変わる。スタイルシートにこれらを設定するとリンク文字全てに適用される。」
アキヒロ：
「おお。面白い。今日も色々ありがとうございました。」
テーブルタグについて
こんにちは。あきです。
前回先輩よりブログデザインで意識する事に
ついて学んだアキヒロ。今日はテーブルタグについて学びます。
アキヒロ：
「それじゃあ今日はテーブルタグについてお教えください。」
先輩：
「うむ。テーブルタグとは基本的に表を作成する為のタグだという事はいいな。」
アキヒロ：
「ええ。こんなのですね。」
| セル１－１ | セル１－２ |
| セル２－１ | セル２－２ |
先輩：
「うむ。このタグはこのようにただ表を作成するだけでなく、文字や画像をバランスよく綺麗に表示するのにも非常に有効なタグなんだ。」
アキヒロ：
「はあ。」
先輩：
「まず画像を貼り付けた場合、画像のすぐ横に何か説明文を入れたい時があるだろう。」
アキヒロ：
「いえ。特には。下に説明文を書けばいいじゃないですか」
先輩：
「うるさーい。俺は横に書きたいんだ。文字が画像に回り込んだりせず綺麗に並べて書きたい事がしょうっちゅうあるんだ！」
アキヒロ：
「分かりましたよ。まあまあそんなに興奮しないで」
先輩：
「ふーっ。ふーっ。そんな時は以下の様に書くと綺麗に表示される。」
——————————————————————
<TABLE cellSpacing=5 cellPadding=10 border=0>
<TBODY>
<TR>
<TD><IMG style=”src=”side1.jpg” border=0>
<TD vAlign=top>
これは川です。<BR>
くもが川にうつってました。<BR>
とてもきれいでした。<BR>
すこし小さい川でした。
</TD>
</TR>
</TBODY>
</TABLE>
——————————————————————
 | これは川です。 くもが川にうつってました。 とてもきれいでした。 すこし小さい川でした。 |
アキヒロ：
「小学生の作文ですか？」
先輩：
「うるさい！配置はどうだ？美しくないかね？」
アキヒロ：
「はあ。まあ。でもただの自己満足な気が。」
先輩：
「まったく。お前って奴は本当につまらん奴だの。この画像、見てみろ。素晴らしいだろ。
ほら何か感想を言ってみろ！」
アキヒロ：
「はあ。青いです。」
先輩：
「『はあ。青いです』
なんだその反応。もっと気持ちを込めて言葉にしろ！」
アキヒロ：
「先輩も変わらないでしょ。それより。先輩。また話が大きく横にそれてます。いくつか分からない言葉があるんで教えてください。
この『cellpadding』ってなんですか？」
先輩：
「ああ。これはだな各セル内の余白を設定できるんじゃ。」
アキヒロ：
「『cellspacing』は？」
先輩：
「これはテーブルの罫線の幅を設定する為のものだ。枠がないから分かりにくいのだろう。実際に枠を表示してみよう。」
| これは川です。 くもが川にうつってました。 とてもきれいでした。 すこし小さい川でした。 |
先輩：
「『border』を設定すると外枠の幅が決められこれを”0″にするか、何も設定しないと枠を消すことができるのだ。」
アキヒロ：
「へー。でも設定するの面倒くさそうだし画像なんてめったに使わないから、あまりこのタグを使うメリットが感じられないなあ。」
先輩：
「そうか？横に並べても適切に表示できるというのはあることに非常に役に立つと思わないか？」
アキヒロ：
「あること？」
先輩：
「そうだ。」
アキヒロ：
「うーん。なんでしょう？」
先輩：
「お前もっと考えろよ。それはだな
記事の目次だ。」
アキヒロ：
「記事の目次？」
先輩：
「そうだ。記事を書くたびに目次をトップに追加していくだけだと、縦幅がどんどん長くなり最新記事に行くまでにスクロールを多くしなければならなくなるだろう。」
アキヒロ：
「はい。」
先輩：
「だがこのテーブルタグを使い、余白や罫線の幅などを調節して横に並べて表示すれば、見やすい目次を作る事ができるのだ。こんな感じで」
| TEST ・TEST11111 ・TEST2 ・TEST3 ・TEST4 | TEST ・TEST1 ・TEST22222 ・TEST3 ・TEST4 | TEST ・TEST1 ・TEST2 ・TEST333333 ・TEST4 |
アキヒロ：
「なるほど。これはいいですね。」
先輩：
「まだ他にも画像を丸く表示したり、額縁を付けたりと色々な小技があるのだがそれらはあまり覚える必要はないだろう。」
アキヒロ：
「わかりました。」
先輩：
「以下のサイトにアクセスしてみろ。簡単にテーブルを作る事ができる。
アキヒロ：
「わかりました。今日もありがとうございます。」
アフィリエイトとは
こんばんは。今日はアフィリエイトについてお届けしていきます。
<$MTInclude file="link_tmpl/article/aff01.html"$>
デザインについて
こんにちは。あきです。
前回先輩よりHTMLの骨組みについて学び、
今日は使えるタグについて学ぶ予定ですが…。
アキヒロ：
「先輩。先輩。それじゃあ今日は文字色を変えて動かしたり、点滅させたりする方法と
ステータスバーに文字を流す方法を教えてください。」
先輩：
「お前な。そんなに覚えてどうするんだ。」
アキヒロ：
「どうするって。当たり前じゃないですか。自分のサイトに使うんですよ。」
先輩：
「なぜ使いたいんだ？」
アキヒロ：
「そりゃ伝えたい情報を色々目立たせる事ができるじゃないですか。」
先輩：
「全部使うつもりか？おい？」
アキヒロ：
「なんだ。やだな先輩。今日はやけにシリアス顔ですね。」
先輩：
「お前な。少し訪問者の視点に立って考えてみろ。お前のような貧弱ブログにわざわざ訪問してくれる人達は、それ以外の色んなブログに最初に訪問していて目がクタクタなんだぞ。」
アキヒロ：
「はあ。」
先輩：
「ただでさえお前の意味不明な文章読むに多大な労力を必要とするのに、その上こんな事されてみろ。」
動物達
こんばんは。あきです。
今日の写真館はバンフ観光中に出くわした
動物達をご紹介します。
熊です。
毎年何人かが彼らに襲われ被害にあってるそうです。
エルクです。
