==教えることは自分育て==

<   2007年 06月 ( 20 )   > この月の画像一覧
|TOPに戻る
SNF「ブログでCSS」講座第1回目(6/18)
1.復習編が終わりました。

(1)Webページの基本構造
(2)Webページのソースの見方
(3)タグのおさらい

タグのおさらいの意味で、宿題で一つのサムネイルを作っていただきました。
本来は下のように多数の写真を一覧表示するための手法です。
クリックすると大きく表示されます。デフォルトでは大きい画像は左隅に配置されます。



次回は、2.準備編はカスタマイズのときにするとして後に回し、本日は3.CSS編に入ります。
事前にテキストに目を通されておいてくださいね。m(__)m
[PR]
by otomi7771 | 2007-06-25 12:56 |TOPに戻る
絶対パスと相対パス
パス(PATH)というのは、道順と言う意味です。

絶対パスと言うのは、その名の通りURLを先頭からすべて記述した絶対アドレス(http://ではじまるURL)の事で、 現在地に関係なく、フルパスでアドレスを示します。 ブログがこれですね。

相対パスは、リンク元となるファイルの現在地を基準として、リンク先ファイルの位置を指定する方法です。

サーバー上のファイル構造とローカル(自分のPC)でのファイル構造を同じにしておけば、 相対パスでの記述でメンテナンスが楽になります。 普通のHPでは、相対パスが使われています。

★但し、サイト外部へのリンクやドメインの違うサーバーへのリンクは、常に絶対パスです。

わかったかな~?
??という方→説明サイトへ
[PR]
by otomi7771 | 2007-06-23 21:52 | ├絶対パスと相対パス |TOPに戻る
リンクについて
リンクタグは<a href="URL" target="_blank">画像あるいは文字</a>です。
エキサイトブログの場合、フォルダはエキサイトの管理下です。自分でフォルダはいじれません。ですからURLは絶対パス(http://で始まるURL)になっています。

Qの解答

リンクは初級で学ばれたと思いますが、URLの最後の
拡張子によってweb上で開かれるソフトが違います。

クリックして、立ち上がるソフトをご確認ください。

.index.htm,.index.htm(ウェブ頁)・・・・・・・・・InternetExplorer
.wmv(動画)・・・・・・・・・・・・・・・・・・MediaPlayer
.doc(ワード文書)・・・・・・・・・・・・Microsoft Word
.mid,.mp3(音楽)・・・・・MediaPlayer
.css(スタイルシート文書)
・・・・・Notepad(メモ帳)
.swf(フラッシュ)・・・・・・・・・・・FlashPlayer
.PDF(PDF)・・・・・・・・・・・AcrobatReader


ブラウザの標準機能だけでは再生することができない音声や動画などを再生するためのソフトのことはプラグインソフトと言います。詳しくはサイトをご覧下さい。→説明サイト
言葉等わからない時は、Googleで検索すると勉強になりますよ。
[PR]
by otomi7771 | 2007-06-23 13:48 | ├リンクについて |TOPに戻る
画像のぼかし方
背景の画像は、文字入れの邪魔にならないように、白くぼかしたいときがありますね。
その時は、Jtrimを使うと簡単にできます。

b0063421_13422157.jpgツールの【新規作成】→【キャンバスの色】を下やじるしで【白】を選び、OK。

ツールの【開く】→画像を選んで、 キャンバスに画像をだす。→【リサイズ】で適当な大きさにする。→OK。
b0063421_13522433.jpg

b0063421_13591443.jpgメニューバーの【カラー】→【グラデーション】。

色1、色2は白が無難です。画像処理によっては、色を選んでも可。

不透明度は、お好きな数値で。→OK。
↓全体にぼけました。
b0063421_1453133.jpg


b0063421_1412971.jpg【加工】→【フェードアウト】

1回目は四角いままフェードアウト。
2回目は【円形フェードアウト】にチェックをいれ、円形にフェードアウト(2重フェードアウト)。
数値はお好みで、いろいろ試してみて下さい。

b0063421_1432435.jpg      b0063421_14322263.jpg

[PR]
by otomi7771 | 2007-06-22 13:36 | ├Jtrim(画像作成) |TOPに戻る
画像から別の画像へのリンク
ある画像から、別の画像へのリンクをタグで作りましょう。
最初に画像を2枚アップしておきます。

椿


画像タグはリンクタグと組み合わせて使うと、デフォルトでは画像の周りに枠が付きます。
その枠を除くには、imgの方に、border="0" を入れましょう。枠が消えます。
                        ↓ 
椿

最後に画像のエキサイト擬似タグを削除します。決してアップロード済みの画像は削除しませんように。

参考までに、下にサムネイルのタグを載せておきます。コピペして画像URL だけ変えて利用なんていうのもよし!! でも最後は自分でタグを書き込んで、作成できるようにしましょう。

何も指定しない(デフォルト)ですと、左寄せになります。右寄せのタグは、align="right "
左寄せはalign="left"です。
今回は<center></center>で挟んで中央に配置しました。

<center><a href="http://pds.exblog.jp/pds/1/200706/18/21/b0063421_16542246.jpg" target="_blank"><img src="http://pds.exblog.jp/pds/1/200706/18/21/b0063421_1654525.jpg" alt="椿" width="240" height="180" border="0"></a></center>
[PR]
by otomi7771 | 2007-06-18 16:54 | ├タグでサムネイル |TOPに戻る
サムネイル(1)
サムネイルとは、「親指の爪」の意から転じて縮小された画像のこと。通常は多数の画像を一覧表示するために使う手法です。小さい画像をクリックすると同じ画像が大きく拡大されて表示されます。

バラ


まず大きな画像を1枚UPします。(←この場合400×300)

最初は画像タグを書きます。
<img src="http://pds.exblog.jp/pds/1/200707/12/21/b0063421_9193790.jpg" alt="バラ" width="120" height="90" border="0"> (←幅と高さを小さく設定して、見かけを小さくします。縦・横の比率は変えないように。)
                 ↓
画像をリンクタグで挟みます。この時画像URLは同じものです。
                 ↓
<a href="http://pds.exblog.jp/pds/1/200707/12/21/b0063421_9193790.jpg" target="_blank"><img src="http://pds.exblog.jp/pds/1/200707/12/21/b0063421_9193790.jpg" alt="バラ" width="120" height="90" border="0"></a>
                 ↓
中央寄せにしました。これで出来上がりです。
<center><a href="http://pds.exblog.jp/pds/1/200707/12/21/b0063421_9193790.jpg" target="_blank"><img src="http://pds.exblog.jp/pds/1/200707/12/21/b0063421_9193790.jpg" alt="バラ" width="120" height="90" border="0"></a></center>
[PR]
by otomi7771 | 2007-06-18 13:07 | ├タグでサムネイル |TOPに戻る
サムネイル(2)
2行×4列のサムネイルを作って見ましょう。

まず8枚の画像をUPします。

2
一組のサムネイルはもう出来ましたね。画像はデフォルトでは、左寄せで表示されます。それをコピー&ペーストすると画像はくっつきます。



そこで一組目にインラインCSSで、<img>にmarginを設定すれば余白ができます。
タグは下です。尚、小さい画像サイズは120×90にしました。
<img src="http://pds.exblog.jp/pds/1/200605/22/41/b0018441_3182314.jpg" width="120" height="90" border="0" style="margin:2px;">



一枚目のサムネイルのタグを8枚コピー&ペーストします。
余白がなくなれば自動的に下に回ります。



画像のURLを替えれば、はい出来上がり。



160×120にすると、下のようになります。


[PR]
by otomi7771 | 2007-06-18 11:04 | ├タグでサムネイル |TOPに戻る
サムネイル(3)
このサムネイルは<div>で枠を作っています。そして、その中に画像と文字を配置して画像はサムネイルにしています。p14の基本的な枠の最後に勉強します。

上・・・擬似タグとタグの混在。
下・・・タグのみ。 少し難しいですね。

b0063421_13562.jpg
月の輪椿
草野町椿ウォーキング
b0063421_22322939.jpg
岩根椿
草野町椿ウォーキング



月の輪

月の輪椿
草野町椿ウォーキング
月の輪

岩根椿
草野町椿ウォーキング



<div>の枠を二つ並べたいときは、スタイルに float:left; を付け加えます。
[PR]
by otomi7771 | 2007-06-18 10:04 | ├タグでサムネイル |TOPに戻る
主なタグの説明
良く使われている主なタグに付いて、簡単に説明しておきます。

h(heading)ヘディング・・・・・・・・・・・・・・・見出し。
p(paragraph)パラグラフ・・・・・・・・・・・・・段落。
a(anchor)アンカー・・・・・・・・・・・・・・・・・・リンクの作成。
div(division)ディビジョン・・・・・・・・・・・・・複数の要素をグループ化。
span(〃)スパン・・・・・・・・・・・・・・・・・・・・・・文字の装飾範囲を指定。
br(break)ブレイク・・・・・・・・・・・・・・・・・・・行の途中で改行。
blockquote(〃)ブロッククウォート・・・・・・・引用文。
embed(〃)エンベッド・・・・・・・・・・・・・・・・・プラグインを埋め込む。
marquee(〃)マーキー・・・・・・・・・・・・・・・・文字や画像を移動。
style(〃)スタイル・・・・・・・・・・・・・・・・・・・・HTMLの中でCSSを指定。
img(image)イメージ・・・・・・・・・・・・・・・・・・画像の埋め込み。
align(〃)アライン・・・・・・・・・・・・・・・・・・・・・・・・配置の指定。
src(source)ソース・・・・・・・・・・・・・・・・・・・画像のある場所。
hr(horizontal rule)ホリゾンタルルール・・水平線。

[PR]
by otomi7771 | 2007-06-15 19:37 | ├タグの説明 |TOPに戻る
タグの記述の補足
タグの記述は、基本的には開始タグと終了タグで挟む。

(例)<h1>見出しの文章</h1>
(例外)単体のタグは終了タグがない・・・<img><br><hr>

タグは要素、属性、値から成り立っている。要素にいくつも属性を設定できる。値は ="" とダブルコーテーションの中にかく。
b0063421_20352577.jpg
属性の区切りは半角のスペースです。
属性の順番はどうでも構いません。

<img>要素でいえば、src、alt、borderも属性です。ですから、属性と属性の間は半角スペースが入ります。

その他の注意事項

1)タグは半角。alt を全角で入れたあと、半角に戻すのを間違えないように。
2)ゆっくり、正確に打ちましょう。
3)""のどちらか一方かけてもダメ。
4)スペルの間違いは認識しません。見直しましょう。
5)半角スペースを2回入れてもダメ。スペースのサービスは必要なし。
[PR]
by otomi7771 | 2007-06-15 18:22 | ├タグの説明 |TOPに戻る