タグ別アーカイブ: 会話

ブログとは

8件の返信

こんにちは。あきです。


「ブログって何？何ができるの？」


初心忘るべからず。初心忘るべからず。

という事で今日もこの基礎中の基礎を会話形式でお届けします。


アキヒロ：
「先輩。先輩。ブログって…」


先輩：
「お前、今更『ブログって何？』とか聞かないでくれよ。」


アキヒロ：
「初心忘るべからず。初心忘るべからず。」


先輩：
「あー。分かった。分かった。本当に世話のかかる奴だな。お前は。」


アキヒロ：
「はい。世話のかかるかわいい後輩目指してます。」


先輩：
「まずだなブログとは”比較的頻繁に更新される日記的なホームページ”と誰かが言っていた。」


アキヒロ：
「えっ。先輩の定義はないんすか？」


先輩：
「うっさい。人によって定義が分かれるの。まあ用途は日記だけではないが、一般的には上記のように言われておる。」


アキヒロ：
「なるほど。でこのブログを使うと何ができてどんな所が良いんですか？」


先輩：
「まずブログを使うと簡単に自分のホームページを作れ、書いた文章をすぐホームページにのせる事ができるのだ。」


アキヒロ：
「そうですね。今は本当に沢山のブログサービスが無料で提供されているから便利ですよね。自分もlivedoorの無料ブログサービスを使ってＨＴＭＬとか意識する事なく、文章をすぐホームページに追加できました。」


先輩：
「うむ。無料サービスは豊富なデザインテンプレートが用意されているしな。それらを使って簡単に自分好みのサイトが作れるのも特徴の一つだな」


アキヒロ：
「はい。」


先輩：
「それとあと大きな特徴を上げるとコミュニケーション機能が付いているところだな。」


アキヒロ：
「コメントやトラックバック機能ですね。あとＲＳＳもかな。」


先輩：
「そうだな。これらを使うと他のブログ管理者や訪問者とコミュニケーションが取れる。これは本当に重要な機能だ。」


アキヒロ：
「一人で黙々と記事を追加していってもつまらないですもんね。」


先輩：
「その通り。それにこれらの機能を上手く使えばアクセスアップにも繋がる。」


アキヒロ：
「それが難しいんですけど…。」


先輩：
「まあな。ただ日々更新していけばページがどんどん追加されて検索エンジンにも検索されやすくもなるし。」


アキヒロ：
「これがブログでアフィリエイトするメリットでもありますよね。」


先輩：
「こう考えるとブログは本当に色々なメリットがあるな。」


アキヒロ：
「何かデメリットはあるんですか？」


先輩：
「うーん。そうだな。過去の記事が埋もれていってしまう事かな。だがこれも自分で目次を作れば解決できる。」


アキヒロ：
「なるほど。ブログとはを簡単にまとめるとこんな感じですかね。」



ブログとは


・頻繁に更新されるＷｅｂサイト


特徴


・技術的な知識なしに簡単に自分好みのＷｅｂページが作れる。


・ページの追加が容易。


・他の人とコミュニケーションがとれる。


・アクセス数を増やせる。



先輩：
「うむ。こんなところだな。」


アキヒロ：
「ありがとうございました。」

Pingツール

13件の返信

こんにちは。あきです。


「ピングサーバーからのアクセスは時間帯によって違うのか？」


なぜか”ピング”をカタカナで書くと色んな意味で少し妙な気分になるまだ未熟者のわたくしが、今日もPingに関する記事を書いていこうと思います。


 


前回の記事”Pingについて”で頂いたコメントから、”時間帯によってサーバーからのアクセスが異なる”というようなコメント頂いたので、検証していきます。


 


アキヒロ：
「時間帯によってＰｉｎｇサーバーからのアクセスって異なるんですか？先輩。」


先輩：
「ああ。おそらくな。」


アキヒロ：
「なぜこの様な現象が起きるのですか？」


先輩：
「まず基本的なPingサーバーの仕組みを説明するとだな。」


アキヒロ：
「いや。仕組みはいいです。理由を教えてください。」


先輩：
「うるさい。仕組みをまず喋らせろ！」


アキヒロ：
「はー。はい。それで仕組みは？」


先輩：
「通常Pingにより更新通知を受けたPingサーバーは通知を受けたサイトの最新情報を取得し、取得した順に最新記事を表示していく。」


アキヒロ：
「はい。」


先輩：
「以上だ。」


アキヒロ：
「それだけですか。でなぜ時間帯によってアクセスが違うんですか？」


先輩：
「だから説明しただろ。Pingサーバーは通知を受けた順に最新の情報を表示していくからだよ。」


アキヒロ：
「じゃあブログの投稿頻度が多い時間帯に更新通知してしまうと…。」


先輩：
「そうだ。ブログサーバーの最新記事欄に表示される時間は少しだけという事だ。」


アキヒロ：
「ははー。という事は皆があまり投稿しない時間帯に更新通知をすればいいんですね。」


先輩：
「そうとも限らない。もし閲覧者が少ない時間帯だったら意味がないからな。閲覧者が多く、投稿が少ない時間帯を狙うべきだな。」


アキヒロ：
「例えば？」


先輩：
「うーん。だいたい朝の８時から９時位の会社が始まる前の時間や昼休み１２時から１時。それに夕方学校が終わる時間帯だな。」


アキヒロ：
「でもそんな時間に記事を投稿なんてできませんよ。」


先輩：
「一つは予約機能を利用すると便利だ。後は”ぶろっぐぴんぴん”というツールを使いPingだけを手動で送信するといいかもしれん。」


アキヒロ：
「どこからこのツールは取得できるんですか？」


先輩：
「これはBlogPeople　というサイトのみから提供されている。その為、会員登録しないとダウンロードできない。」


アキヒロ：
「でも無料なんですよね？」


先輩：
「もちろんだ。会員登録したら会員ページトップの左メニュー”その他サービス/ツール”からダウンロードが可能だ。」


アキヒロ：
「わかりました。」


先輩：
「このツールを使うと一括で色々なPingサーバーに通知する事ができる。通知できる件数が制限されているブログなんかにはとても便利なツールだ。」


アキヒロ：
「へー。」


先輩：
「さらにトラックバックも一括送信可能なんじゃ。」


アキヒロ：
「それは便利だ。」


先輩：
「しかしスパムのように悪用して使わないように。」


アキヒロ：
「はい」


先輩：
「以下の四角い枠で囲まれている追加ボタンをクリックし、Ping URLを設定すれば何件でも追加できる。」





アキヒロ：
「わかりました。やってみます。ありがとうございました。」


それでは今日も応援よろしくおねがいします。

Pingについて

10件の返信

こんにちは。あきです。


「Pingってアクセスアップに本当に効果があるの？」


とふと疑問に思った今日この頃いかがお過ごしでしょうか。


さてこのPing機能。アクセスアップに効果があるのか疑問に感じる前にそもそもこのPingって何？という所から今日も入っていきたいと思います。


 


先輩：
「はろー。はろー。どうだ元気にしていたかね？」


アキヒロ：
「なんか妙にハイテンションですね。いい事でもあったんですか？」


先輩：
「むふふ。実はメイドカフェのラムネちゃんから昨日メールが、あっ….。」


アキヒロ：
「……………………………。」


先輩：
「えー、おほん。そういえばラムネって最近見かけないな。昔は良く飲んでいたんだが。」


アキヒロ：
「もういいです。今日はPingについて教えてください。」


先輩：
「よし。まかせとけ。でPingの何が知りたいんだ？」


アキヒロ：
「そもそもPingって何なんですか？」


先輩：
「これはだな記事の更新を知らせるための仕組みだ。これを利用するとPingサーバーというところに更新情報が通知される。 」


アキヒロ：
「Pingサーバー？」


先輩：
「うむ。インターネット上には色々なブログからの更新情報をまとめているサイトがあるんだ。こんな感じで」


にほんブログ村


アキヒロ：
「へー。」


先輩：
「そしてこのPingサーバに、更新したことを通知することを 『Pingを打つ』 と言う。 」


アキヒロ：
「なるほど。でPingを打つことのメリットは？」


先輩：
「たとえば上記のサイトにPingを打つと、自分のブログの更新情報を表示できるようになる。その為、サーバーの訪問者に更新情報を知らせる事ができるようになるのだ。それを見た人がお前のブログに来てくれるかもしれん。 」


アキヒロ：
「えー？本当ですか？何かトップページに表示されない限り、期待できそうにないな。」


先輩：
「うむ。たしかにな。俺も２０個ぐらいのPingサーバーに更新情報を送っているがほとんどそれらのサーバーからの訪問者はない。 」


アキヒロ：
「やっぱり。」


先輩：
「でも、それ以外にもメリットはあるぞ。」


アキヒロ：
「何ですかそれは？」


先輩：
「更新pingを打つとping先のサイトにリンクが貼られる。という事は…。 」


アキヒロ：
「SEO対策につながるんですね。」


先輩：
「そういうことだ。リンクはされるばされるほど検索エンジンに引っかかりやすくなるからな。」


アキヒロ：
「なるほど。でもLivedoorって１０個までしかPing送信できないんだよな。」


先輩：
「そんな時はこんなサイトを利用すると便利だ。」


 


Pingサーバー一括送信サービス PinGoo!


PingLiner -トラックバックping一括送信サービス-


 


先輩：
「Pingをここに送信する事でこれらのサービスが一括で多くのPingサーバーに自動送信してくれる。」


アキヒロ：
「へー。それは便利だ。」


先輩：
「また噂によると以下のサイトにPingを送信すると一日の訪問者が１０人増えた人もいるそうだ。」


ブログクリップ






先輩：
「ここには会員登録しなければPingは送れない。だが無料だから登録するといいぞ。その他にもネタが尽きたとき利用するといいことがあるかもしれんぞ。」


アキヒロ：
「分かりました。登録しときます。」


先輩：
「それとYahooにもPingサーバーがあるようで、ここに送信するとYahoo!ブログ検索で表示されやすくなるようだ。送信先はこれだ。」



http://api.my.yahoo.co.jp/rss/ping?u=[あなたのサイトのRSSファイルのアドレス]




アキヒロ：
「わかりました。Pingはやっぱり使い方によってアクセスアップに繋がるようですね。」


先輩：
「そうだな。実際にサーバーからのアクセスはなくてもSEOに有効に働き、自然と検索エンジンの上位に表示されているのかもしれん。」


アキヒロ：
「わかりました。今日も色々ありがとうございます。それじゃラムネちゃんによろしく！」


先輩：
「う、うるさい。」


以上Ping送信についてでした。

ＪａｖａＳｃｒｉｐｔの動作

10件の返信

こんにちは。あきです。


さて今日はこの折りたたみメニュー（クリックするとメニューが開きます。）





を例にJavaScriptについて学んでいきます。



アキヒロ：
「先輩。前回はバトンの解答ありがとうございます。相変わらず寂しく悲しい毎日を送っているようで。僕はうれしいです。」


先輩：
「うるさい。俺の日常に触れるなと前から言ってるだろ。


　　　それで。今日は上記の”折りたたみメニュー”処理をを説明すればいいのか？」



アキヒロ：
「はい。お願いします。」


先輩：
「それでだ。最初にこの仕組みを明かすとこの処理は単純にサブメニューを隠して表示しているだけなのだ。」

アキヒロ：
「へー。でメインメニューをクリックするとサブメニューを表示する処理が実行されるんですね。」

折りたたみメインメニュー

　　　・サブメニュー１
　　　・サブメニュー２
　　　・サブメニュー３

先輩：
「そうだ。このサブメニューを初期表示で隠すためには
　　　<HEAD>～</HEAD>部分に以下の様な
　　　スタイルシートを記述する。」


<style type=”text/css”>
<!–

.sub{

display : none

;}

–>

</style>


先輩：
「この記述により、初期表示時に


　　　折りたたみメインメニュー

とメインメニューのみ表示することが可能となる。」


アキヒロ：
「はあ。」


 


先輩：
「そしてこれがメインメニューをクリックすると実行されるJavaScriptの処理だ。」

<script Language=”JavaScript”>
<!–


function pMenu(id)

{


var el = document.getElementById(id);


if (el.style.display=="block")
  　　el.style.display
= ‘none’;
else

  　　el.style.display
= ‘block’;


}

// –>
</script>

先輩：
「まあおそらく分けがわからんだろう。」


アキヒロ：
「はい。全然分かりません。」


先輩：
「こんな物は覚えなくてもいいんだ。Webで探せば似たような処理はいくらでも見つかる。


　　　とにかくこれも<HEAD>～</HEAD>部分に記述する。で、この処理を追うために

　　　function pMenu(id)

　　　というのだけ覚えろ。」



アキヒロ：
「なんですか？これは？」


先輩：
「これはだな関数とよばれていて”pMenu“というのは関数の名前だ。」


アキヒロ：
「ああ。この関数の中で実際にプログラムの処理が実行されるんですね。」


先輩：
「その通り。そしてこのpMenu関数は以下の様にbody欄から呼び出される。」

 


<body>


<p><
a href=”javaScript:pMenu(‘pdMENU1′)”>折りたたみメインメニュー</a></p>


<ul class=”sub” id=”pdMENU1″>


<li><a href=”“http://netbusiness.rash.jp/”“>サブメニュー１</A></li>
<li><a href=”“http://netbusiness.rash.jp/”“>サブメニュー２</A></li>
<li><a href=”“http://netbusiness.rash.jp/”“>サブメニュー３</A></li>


</ul>
<br>


</body>
</html>


アキヒロ：
「この箇所から呼び出されるのですね。」

 


“javaScript:pMenu(‘pdMENU1′)”


 

先輩：
「そうだ。これは誰かが折りたたみメインメニューをクリックする事で呼び出される。」


アキヒロ：
「なるほど。クリックされる事でHead部に記述してあるpMenu関数が呼ばれ書いてあるJavaScriptが実行されてようやく各サブメニューが表示されるのか。」



先輩：
「そうだ。そしてもしこのpMenu関数を他のWebページでも使用したい場合はこの関数を別のファイルに書き拡張子を(.js)にして保存すればいいんだ。」



アキヒロ：
「そうすることでいちいちhead部に書くことなく色々なWebページから同じ関数を呼び出す事ができるというわけですね。」


 


先輩：
「そういうことだ。」


アキヒロ：
「なるほど。この例のようなJavaScriptを使うとまたサイトマップなどに役に立ちそうですね。」


先輩：
「そうだな。ページを占有することなくメニューを表示できるからとても便利だ。」



アキヒロ：
「またまたとても参考になりました。」


先輩：
「うむ。俺はいつでも最高に役に立つ男なのだ。ようやくわかったかね。」


アキヒロ：
「それでは。また！」


先輩：
「お、おい。何かつっこんで..。あーあ。」



このページのコメント欄もこのサブメニューの仕組みを利用してます。

バトン

10件の返信

こんにちは。あきです。


今日自分は朝の６時に起きてワールドカップを
観戦しました。ここカナダでは全ての試合を
見ることができます。結果は残念でしたけれど。

１点目を取られたあの場面


「川口！出るな！」


とおもいっきり日本語で叫んでました。

「な、何？何ていったの？」


とホストマザーもビックリ。

ついつい興奮しすぎました。



 


さて本日はよくコメントを頂く
『おやじの、小遣い増やすどぉ』のおやじさんから
バトンが回ってきたので、その質問に答えていこうと
思います。


 


ただいくつかの質問が既に自己紹介で書いてある
こととダブっているので、またここで例の二人に登場してもらい、先輩がこれらの質問に
答えた場合を想定して書いていきたいと思います。


 


アキヒロ：
「それでは今日は以下の質問に答えてください。」


先輩：
「う、うむ。」


 


１. 回す人５人を最初に書いておく


残念ながら私の友達は皆忙しく、このバトンを
回しても答えられそうな人が見あたりません。


決して友達がいないわけではありません。
ただ皆とても多忙なだけです。



２. お名前は？


後輩から先輩と呼ばれております。


３. おいくつですか？


えーじゃあ５つ程頂けますか？


アキヒロ：
「先輩！物の数じゃなく年齢です。」


えっ。そうなの。


もうすぐ大厄を迎えるいろんな意味で年頃の男です。



４. ご職業は？


しがないプログラマーです。


５. ご趣味は？


フィギア集め。


あっ！じゃなくて



人の体いえ生命の進化と神秘について学ぶことです。


 


６. 好きな異性のタイプは？


そんな。恥ずかしくて


『萌える子と燃えるような恋をしてみたい』


なんて言えません。



７. 特技は？


パソコンのタイピング


アニメのキャラクター当てクイズ



８. 資格、何か持ってますか？


パソコン検定３級


アニメ検定特級



９. 悩みが何かありますか？


女友達が一人もいないこと



１０. お好きな食べ物とお嫌いな食べ物は？


好きな食べ物：牛丼とラーメンとかりんとう


嫌いな食べ物：辛い物となまいきな後輩


 


 


アキヒロ：
「先輩。俺は食べ物じゃない。」


先輩：
「ははは。冗談だよ。冗談。」



１１. 貴方が愛する人へ一言


僕が悩んでいる時、いつも側にいてくれて
本当にありがとう。大好きだよ。


 


 


 


 


 


 


 


ナナ！


 


 


 


 


 


アキヒロ：
「それ先輩が飼ってる猫じゃないですか。」


先輩：
「うるさい。」



１２. 回す人５人を指名すると同時に、
　　　その人の他者紹介を簡単にお願いします。

ああ。もう少し友達がいれば
紹介できるのだけれど…。


 


 


 


アキヒロ：
「はい。それではどうもです。」


 

ＪａｖａＳｃｒｉｐｔとは

14件の返信

こんにちは。あきです。


さて突然ですが




もう一度クリックすると閉じます。
JavaScriptを使うとこんな事ができます


ということで


今日はJavaScriptについて学んでいきます。



アキヒロ：
「先輩。今日はJavaScriptについて教えてください。」


先輩：
「なんだ。まだ知りたいことがあるのか。」


アキヒロ：
「いいじゃないですか。どうせ暇なんだから。」


先輩：
「こないだと同じ事言うな！」


アキヒロ：
「お願いしますよ。」


先輩：
「仕方がないな。で何が知りたいんだっけか？」


アキヒロ：
「Javaですよ。Java。」


先輩：
「お前。JavaとJavaScript一緒のものだと思ってないか？」


アキヒロ：
「違うんですか？」


先輩：
「まずそこから説明してやらなければならんのか。」


アキヒロ：
「よろしくです。」


 


先輩：
「まあ実際に使用する上で特に必要となる知識ではないが超簡単に説明してやろう。」


アキヒロ：
「なんだ。必要ないのか。じゃあいいっすよ。」


先輩：
「うるさい。黙って聞け。」


アキヒロ：
「は、はい。」


 


 


先輩：
「まずJavaScriptははじめNetscape社が開発し自身のブラウザNetscape Navigatorで使用していた言語なんだ。」


アキヒロ：
「へー。じゃあなんでJavaって名前がついてるんですか？」


先輩：
「これはJavaの開発元であるSun Microsystems社
        と一時期、協力関係にあった。その影響でつけられたと言われている。」


アキヒロ：
「でもまったく別物だと。」


先輩：
「うむ。すこし文法など似ているところがあるがまったく別の言語だと思っていい。日本語と韓国語ぐらい別物だと思え。」


アキヒロ：
「なんかよく分からない例えだな。それでどんな時にこれを使うんですか？」


 


先輩：
「まずだな、ＨＴＭＬだけで作成したページは文書を表示したり、リンクなどして別のWEBページを開く事はできるが、基本的は本や雑誌の用に動きのない静的なページだろ」

アキヒロ：
「はい。」


先輩：
「しかしこのJavaScriptを使えば訪問者に対して対話的なWEBページを用意できたり文字や画像などに動きを与え表現した動的なページを作る事ができるのだ」


アキヒロ：
「はー。中々賢いんですね。このJavaScriptは。」


先輩：
「そうだな。それでは簡単な書き方を説明しちゃる。」


アキヒロ：
「はい。」


 


先輩：
「まずJavaScriptを作成するのには方法が２つのあるHTMLに直接書き込む方法と外部ファイルにプログラムを書く方法だ」


アキヒロ：
「へー。ＣＳＳみたいですね。」


先輩：
「その通り。メリットもＣＳＳと一緒だ。複数のWEBページに同じ事を書かずに一括でプログラムを管理できる。」


アキヒロ：
「なるほど。」


先輩：
「でもまあブログで使う場合はほとんど直接HTMLに書き込むのが普通だな。」


アキヒロ：
「へー。」


先輩：
「直接書き込む場合、通常は以下の様に記述をし<HEAD>～</HEAD><BODY>～</BODY>の間
　　　どちらでも記述できる。」

<SCRIPT TYPE=”text/javascript”>


『ここにJavaScriptプログラムを記述する』
</SCRIPT>

アキヒロ：
「うーん。」


先輩：
「まあこの例を見ろ。」

<HTML>
<HEAD><TITLE></TITLE></HEAD>
<BODY>


<SCRIPT TYPE=”text/javascript”>
      document.write(“先輩だぞ(^_^)”)
</SCRIPT>


</BODY>
</HTML>


先輩：
「これを実行するとWebページに


　　　『先輩だぞ(^_^)』
　　　
　　　と可愛く表示される。」


アキヒロ：
「ああ。とてもうっとうしい見たくもない。」


先輩：
「くっ！ただブログで使用する場合は
　　　<HEAD>～</HEAD>に処理を記述して
        <BODY>～</BODY>側からはその処理を呼び
        出すのが一般的な使われ方だな。」


アキヒロ：
「ふーん。」


先輩：
「それではこのページのトップで使った
　　　小技を例に説明していこう。」


アキヒロ：
「はい」


先輩：
「と思ったらもうタイムアップだ。
　　　この説明は次回じゃな。」


アキヒロ：
「えー。これからだったのに。」


それでは次回この処理について説明していきます。

ＣＳＳ

22件の返信

こんにちは。あきです。


前回先輩よりテーブルタグについて学び
今日はＣＳＳ（スタイルシート）について学びます。



アキヒロ：
「先輩。今日はスタイルシートです。
      お願いします。」


先輩：
「また来たのか。たまには休ませてくれよ。」


アキヒロ：
「いいじゃないですか。どうせ暇なんだから。」


先輩：
「うるさい。仕方がない。それでは教えてやろう。」


アキヒロ：
「お願いします。」


先輩：
「まずＣＳＳとは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; }


先輩：
「上が単純にリンク文字の色下は背景式の色が変わる。スタイルシートにこれらを設定するとリンク文字全てに適用される。」


アキヒロ：
「おお。面白い。今日も色々ありがとうございました。」

テーブルタグについて

18件の返信

こんにちは。あきです。


前回先輩よりブログデザインで意識する事に
ついて学んだアキヒロ。今日はテーブルタグについて学びます。



アキヒロ：
「それじゃあ今日はテーブルタグについてお教えください。」


先輩：
「うむ。テーブルタグとは基本的に表を作成する為のタグだという事はいいな。」


アキヒロ：
「ええ。こんなのですね。」











セル１－１ セル１－２
セル２－１ セル２－２




先輩：
「うむ。このタグはこのようにただ表を作成するだけでなく、文字や画像をバランスよく綺麗に表示するのにも非常に有効なタグなんだ。」


アキヒロ：
「はあ。」


先輩：
「まず画像を貼り付けた場合、画像のすぐ横に何か説明文を入れたい時があるだろう。」


アキヒロ：
「いえ。特には。下に説明文を書けばいいじゃないですか」


先輩：
「うるさーい。俺は横に書きたいんだ。文字が画像に回り込んだりせず綺麗に並べて書きたい事がしょうっちゅうあるんだ！」


アキヒロ：
「分かりましたよ。まあまあそんなに興奮しないで」


先輩：
「ふーっ。ふーっ。そんな時は以下の様に書くと綺麗に表示される。」

——————————————————————


<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

アキヒロ：
「なるほど。これはいいですね。」


先輩：
「まだ他にも画像を丸く表示したり、額縁を付けたりと色々な小技があるのだがそれらはあまり覚える必要はないだろう。」


アキヒロ：
「わかりました。」


先輩：
「以下のサイトにアクセスしてみろ。簡単にテーブルを作る事ができる。


　　　テーブルタグ作成ツール」


アキヒロ：
「わかりました。今日もありがとうございます。」

デザインについて

10件の返信

こんにちは。あきです。

前回先輩よりHTMLの骨組みについて学び、
今日は使えるタグについて学ぶ予定ですが…。

アキヒロ：
「先輩。先輩。それじゃあ今日は文字色を変えて動かしたり、点滅させたりする方法と
       
ステータスバーに文字を流す方法を教えてください。」

先輩：
「お前な。そんなに覚えてどうするんだ。」

アキヒロ：
「どうするって。当たり前じゃないですか。自分のサイトに使うんですよ。」

先輩：
「なぜ使いたいんだ？」

アキヒロ：
「そりゃ伝えたい情報を色々目立たせる事ができるじゃないですか。」

先輩：
「全部使うつもりか？おい？」

アキヒロ：
「なんだ。やだな先輩。今日はやけにシリアス顔ですね。」

先輩：
「お前な。少し訪問者の視点に立って考えてみろ。お前のような貧弱ブログにわざわざ訪問してくれる人達は、それ以外の色んなブログに最初に訪問していて目がクタクタなんだぞ。」

アキヒロ：
「はあ。」

先輩：
「ただでさえお前の意味不明な文章読むに多大な労力を必要とするのに、その上こんな事されてみろ。」

続きを読む →

タグと要素について

12件の返信

こんにちは。あきです。


前回先輩よりHTMLとは何かを学んだアキヒロ。今日はHTMLの
タグについて学びます。



アキヒロ：
「こんにちは。先輩。それでは今日もよろしくお願いします」


先輩：
「うむ。それでは今日は前回に引き続き日本の総理大臣について説明すればいいんだな。」


アキヒロ：
「勘弁してください。」


先輩：
「冗談だよ。それではタグについて説明していく。」


アキヒロ：
「はい。」


先輩：
「まずタグとは『<』と『>』で囲まれている
      文字列を指す。」


アキヒロ：
「？？？」


先輩：
「例えばWEBページのタイトルを指定する場合

　　　<title>タイトル名</title>
　　　

とこのように記述するとタイトルが表示される。」


アキヒロ：
「はあ。」


先輩：
「そして『<title>』を開始タグ、『</title>』を終了タグと呼ぶ。これらは『title』タグと呼ばれていて開始タグと終了タグは基本的にセットで指定するんじゃ。」


アキヒロ：
「へー。」

先輩：
「HTMLは「HyperText Markup Language」 の略称だ。
        この中の Markup は「“マーク(印)”をつける」という
        意味がある。つまりHTMLとはタグを用いて、文書に
        マーク(印)をつけていく、言語なんだ。」

アキヒロ：
「なるほど。」

先輩：
「あと一つタグ以外に要素という言葉も覚えておけ」


アキヒロ：
「要素？」


先輩：
「うむ。要素とは


　　　『【開始タグ】【内容】【終了タグ】』


　　　の『』で囲まれた全体を呼ぶ。先程の例だと
　　　『<title>タイトル名</title>』


　　　の『』の中が要素だ。とこれらを「title」タグと
 　　 呼ぶ人もいれば、「title」要素と呼ぶ人もいる」

アキヒロ：
「なんか分かったような、分かんないような。」


先輩：
「うむ。とにかく要素とは開始タグと終了タグの間にある内容も含めた全体を指すと覚えておけ」


アキヒロ：
「こんなつまんない事よりか、色変えたり文字を動かしたりする方法を教えてくださいよ。」


先輩：
「お前が基本から学びたいと言ったんだろうがー」


アキヒロ：
「そうでしたっけ？」


先輩：
「まったく。とにかくだこれらは基礎の基礎だからしっかり覚えておけ。そしてこれらがHTMLの簡単な骨組みだ。」


<html>


 <head>
     (タイトルなど表紙を構成する要素)
 </head>


 <body>
     (見出しなどの本文を構成する要素)
 </body>


</html>


アキヒロ：
「これだけですか。」


先輩：
「うむ。タグを多く使うと非常に複雑に感じるが
　　　これらにタイトルと本文を加えればWEBページが
　　　できてしまう。」


アキヒロ：
「へー。それじゃ次は色々なタグについて
　　　教えてください。」


先輩：
「それは次回じゃな。」


アキヒロ：
「またか。わかりました。それでは。」