2010年12月31日金曜日

ホームページを作ろう - 演習(3)

演習(3) - サイトマップ(ラフ)の作成

コンテンツシート(ラフ)」で考えた内容について具体的なページとして展開した「サイトマップ(ラフ)」を作成します。

今回は、トップページ、サブトップページ(大學トップ)、詳細ページ(朱熹章句序から伝十章)までの各ページに展開する事にしました。

ここで考えるサイトマップは制作するページ、その関係(文書としての階層およびリンク)について図式化します。ただし、実際の制作では、レイアウトによってはリンクの関係や階層関係が変化すること考えられます。

では、実際のサイトマップ(ラフ)のサンプルを以下のURLから参照してください。

http://hitp.konjiki.jp/hpex/hpex.html#s3

2010年12月30日木曜日

ホームページを作ろう - 演習(2)

演習(2) - コンテンツシート(ラフ)の作成

サイト構築企画書」で設定したサイト概要に従って、大雑把(ラフ)なページごとの内容(コンテンツ)を考えます。このとき作成するドキュメントが「コンテンツシート(ラフ)」です。

今回は、トップページの内容として、
  • サイト見出し(古典を読もう)
  • サイト紹介文(考えられる場合は、サンプルのように内容を記述しておきます。)
  • 新着情報
  • 書籍目次
  • リンク集
を考えました。実際には、この段階で、ある程度ページレイアウトの構想も考えながら内容を考えています。

他のページも同様に考えていきます。

では、実際のコンテンツシートのサンプルを以下のURLから参照してください。

http://hitp.konjiki.jp/hpex/hpex.html#s2

ホームページを作ろう - 演習(1)

ホームページを作ろう - 演習(1)

スペシャル企画(1)では、XHTML と CSS の学習コンテンツを紹介しましたが、第2弾では、実際にサンプルのホームページを作成していきます。いわゆる、演習ですネ!!

タイトルは、

— ホームページを作ろう — 
ホームページ制作演習編 
— 個人ホームページの制作を例に —

まず、最初は、どのようなホームページを作成するのか、その概略を考えます。

そのとき作成される書類(ドキュメント)が「サイト構築企画書」です。

商用でクライアントから依頼されて作成する場合は、とても神経を使う部分でしょうが、今回は個人ホームページなので、気楽に考えてください。

サイト構築企画書において考える内容は、主に以下のような事項です。
サイト目標
ここでは、どんな情報を発信したいのか、その概略を考えます。

ターゲット
サイト目標を達成するためのユーザ層を考えます。ただし、インターネットは世界中からアクセスできます。つまり、想定したユーザ以外もアクセス可能だということは忘れないようにしましょう。

コンテンツ概要
ここでは、サイト目標を具現化するための、具体的なコンテンツ(発信情報)を考えます。

サイト概要
サイトの概要、すなわち、どのようなページ構成にするのか、その概略を考えます。

スケジュール
商用の場合には、納期が存在しますから、細かい作業ごとのスケジューリングを行う必要があります。ただし、今回は個人サイトですから、とくにスケジューリングは行いません。

費用
商用の場合では、制作費の明細あるいは概算を考えます。今回は個人サイトですが、実際には、新しくソフトウェアを購入しなければならない場合とか、画像等をネット上から購入したりする予定がある場合には、その費用について考えます。今回は、パソコンとインターネット環境はすでにあるものとして、それ以外はとにかく「無料」ということで話を進めていきます。
ドキュメントのサンプルは、HITP 文書ライブラリ Web版 を参照してください。

2010年12月28日火曜日

ホームページを作ろう - スペシャル企画(1)

ホームページを作ろう - スペシャル企画

『HITP 文書ライブラリ』のブログ版とWeb版連動、歳末・新春スペシャル企画です。

XHTMLとCSSをマスターして,ホームページを作ろう!!

ホームページの基礎(1. XHTML 編)目次

ホームページの基礎(2. CSS 編)目次

2010年12月27日月曜日

ホームページを作ろう - 1.19 画像を表示しよう

1.19 画像を表示しよう

Webページには,画像を表示することができます。これは普通にページを見ていれば分かることですが,まずは,その画像のファイル形式(ファイルフォーマット)と呼ばれる部分から説明します。

1.19.1 画像形式

Webページに画像を表示する場合,その画像形式が何でもいいというわけにはいきません。主に使用できる形式と,その特徴を以下に示します。
GIF(Graphics Interchange Format)形式
GIF形式は,最大256色までの色を扱うことのできる圧縮画像形式です。色数の少ないロゴ,リンクボタン,アイコン,イラストなど, 単色ベタ面を多く含む平坦な画像に向いています。逆に写真やスケッチなどの多くの色数を必要とする画像には不向きです。

GIFには,通常の画像以外に以下のような拡張された形式もあります。

透過GIF
特定色を透明化し,画像の背景を透過表示するGIF形式です。
アニメーションGIF
複数画像を1つのファイルに収録してアニメーション表示するGIF形式です。
インターレースGIF
画像ファイルの読み込み時に段階的に画像を表示するGIF形式です。

JPEG(Joint Photograph Experts Group)形式
JPEG形式は,最大1670万色まで扱うことができる圧縮画像形式です。このため,多くの色数を必要とする写真,グラデーションのように色調が連続して変化する画像に適しています。また,インターレースGIFに相当するものとしてプログレッシブJPEGがあります。

PNG(Portable Network Graphic)形式
GIFの代替フォーマットとして開発され,256階調や1677万色などが扱え,理論上最大280兆色まで対応しています。また,画像に付属するテキスト情報,パレット情報,αチャンネル,ガンマ値なども個別に記録できる形式です。

GIFとの差異は以下のようなものです。
  • PNGはアルファチャンネルを利用して透過GIF同様の表現が可能です。
  • GIFはアニメーションをサポートしていますが,PNGはサポートしていません。
  • インターレスGIFと同様にインターレスPNGが可能です。

1.19.2 img要素

XHTML(HTML)において画像を表現するためには,img要素を使用します。
<!ELEMENT img EMPTY>

<!ATTLIST img
%attrs;
src %URI; #REQUIRED
alt %Text; #REQUIRED
longdesc %URI; #IMPLIED
height %Length; #IMPLIED
width %Length; #IMPLIED
usemap %URI; #IMPLIED
ismap (ismap) #IMPLIED
>
imhg要素は,空要素であり,終了タグを記述しません。また,src属性とalt属性は必須属性であり,必ず記述しなければなりません。以下にimg要素で使用する主な属性について説明します。
src属性
表示させたい画像のURLを記述します。
alt属性
画像を表示できない場合の代替テキストを記述します。代替テキストが存在しない場合でも,この属性を省略することはできません。そうした場合には,空文字列を記述します。
alt = ""  空文字列の指定
height属性
画像の高さをピクセル単位で指定します。元画像と高さが異なる場合は,指定された値に拡大縮小されて表示されます。また,%指定(相対値)も可能ですが,100%の基準が元画像にならないブラウザも存在するので,その使用は避けた方が無難でしょう。

width属性
画像の幅をピクセル単位で指定します。元画像と幅が異なる場合は,指定された値に拡大縮小されて表示されます。また,%指定(相対値)も可能ですが,100%の基準が元画像にならないブラウザも存在するので,その使用は避けた方が無難でしょう。
height属性とwidth属性は任意指定が可能ですが,なるべく指定した方がブラウザへの負荷が軽くて済みます。また,すべての属性は引用符で囲むことも注意してください。最後に使用例を示します。
<img alt="HTML入門" src="htmlImage.jpg" width="640" height="100" />

2010年12月24日金曜日

古典を読もう - 論語(雍也第六)

古典を読もう - 論語(雍也第六)

論語(6)は、「雍也第六」です。



雍也第六

原 文

子曰。雍也可使南面。仲弓問子桑伯子。子曰。可也簡。仲弓曰。居敬而行簡。以臨其民。不亦可乎。居簡而行簡。無乃大簡乎。子曰。雍之言然。

哀公問。弟子孰爲好學。孔子對曰。有顏囘者。好學。不遷怒。不貳過。不幸短命死矣。今也則亡。未聞好學者也。

子華使於齊。冉子爲其母請粟。子曰。與之釜。請益。曰。與之庾。冉子與之粟五秉。子曰。赤之適齊也。乘肥馬。衣輕裘。吾聞之也。君子周急。不繼富。原思爲之宰。與之粟九百辭。子曰。毋。以與爾鄰里郷黨乎。

子謂仲弓曰。犁牛之子。騂且角。雖欲勿用。山川其舍諸。

子曰。囘也。其心三月不違仁。其餘則日月至焉而已矣。

季康子問。仲由可使從政也與。子曰。由也果。於從政乎何有。曰。賜也可使從政也與。曰。賜也達。於從政乎何有。曰。求也可使從政也與。曰。求也藝。於從政乎何有。

季氏使閔子騫爲費宰。閔子騫曰。善爲我辭焉。如有復我者。則吾必在汶上矣。

伯牛有疾。子問之。自牖執其手。曰。亡之。命矣夫。斯人也而有斯疾也。斯人也而有斯疾也。

子曰。賢哉囘也。一簞食。一瓢飮。在陋巷。人不堪其憂。囘也不改其樂。賢哉囘也。

冉求曰。非不說子之道。力不足也。子曰。力不足者。中道而廢。今女畫。

子謂子夏曰。女爲君子儒。無爲小人儒。

子游爲武城宰。子曰。女得人焉爾乎。曰。有澹臺滅明者。行不由徑。非公事。未嘗至於偃之室也。

子曰。孟之反不伐。奔而殿。將入門。策其馬曰。非敢後也。馬不進也。

子曰。不有祝鮀之佞。而有宋朝之美。難乎免於今之世矣。

子曰。誰能出不由戶。何莫由斯道也。

子曰。質勝文則野。文勝質則史。文質彬彬。然後君子。

子曰。人之生也直。罔之生也。幸而免。

子曰。知之者。不如好之者。好之者。不如樂之者。

子曰。中人以上。可以語上也。中人以下。不可以語上也。

樊遲問知。子曰。務民之義。敬鬼神而遠之。可謂知矣。問仁。曰。仁者先難而後獲。可謂仁矣。

子曰。知者樂水。仁者樂山。知者動。仁者靜。知者樂。仁者壽。

子曰。齊一變。至於魯。魯一變。至於道。

子曰。觚不觚。觚哉。觚哉。

宰我問曰。仁者雖告之曰井有仁焉。其從之也。子曰。何爲其然也。君子可逝也。不可陷也。可欺也。不可罔也。

子曰。君子博學於文。約之以禮。亦可以弗畔矣夫。

子見南子。子路不說。夫子矢之曰。予所否者。天厭之。天厭之。

子曰。中庸之爲德也。其至矣乎。民鮮久矣。

子貢曰。如有博施於民。而能濟衆。何如。可謂仁乎。子曰。何事於仁。必也聖乎。堯舜其猶病諸。夫仁者。己欲立而立人。己欲達而達人。能近取譬。可謂仁之方也已。

論語巻之三 終

読 み

雍也第六(ようや)

(し)(いわ)く。雍(よう)は南面(なんめん)せしむ可(べ)し。仲弓(ちゅうきゅう)、子桑伯子(しそうはくし)を問(と)う。子(し)(いわ)く。可(か)なり、簡(かん)なり。仲弓(ちゅうきゅう)(いわ)く。敬(けい)に居(い)て簡(かん)を行(おこな)い、以(もつ)て其(そ)の民(たみ)に臨(のぞ)む。亦(また)(か)ならずや。簡(かん)に居(い)て簡(かん)を行(おこな)う。乃(すなわ)ち大簡(たいかん)なる無(な)からんか。子(し)(いわ)く。雍(よう)の言(げん)(しか)り。

哀公(あいこう)(と)う。弟子(ていし)(た)れか学(がく)を好(この)むと為(な)す。孔子(こうし)(こた)えて曰(いわ)く。顏回(がんかい)なる者(もの)(あ)り。学(がく)を好(この)む。怒(いか)りを遷(うつ)さず。過(あやま)ちを弐(ふた)たびせず。不幸短命(ふこうたんめい)にして死(し)す。今(いま)は則(すなわ)ち亡(な)し。未(いま)だ学(がく)を好(この)む者(もの)を聞(き)かざるなり。

子華(しか)、斉(せい)に使(つか)いす。冉子(ぜんし)、其(そ)の母(はは)の為(ため)に粟(ぞく)を請(こ)う。子(し)(いわ)く。之(これ)に釜(ふ)を与(あた)えよ。益(えき)を請(こ)う。曰(いわ)く。之(これ)に庾(ゆ)を与(あた)えよ。冉子(ぜんし)、之(これ)に粟(ぞく)五秉(ごへい)を与(あた)う。子(し)(いわ)く。赤(せき)の斉(せい)に適(い)くや、肥馬(ひば)に乗(の)り、軽裘(けいきゅう)を衣(き)たり。吾(わ)れ之(これ)を聞(き)く。君子(くんし)(きゅう)を周(すく)いて富(と)めるに継(つ)かず。原思(げんし)(これ)が宰(さい)と為(な)る。之(これ)に粟(ぞく)九百(きゅうひゃく)を与(あた)う、辞(じ)す。子(し)(いわ)く。毋(なか)れ以(もつ)て爾(なんじ)が隣里(りんり)郷党(きょうとう)に与(あた)えんか。

(し)、仲弓(ちゅうきゅう)を謂(いつ)て曰(いわ)く。犁牛(りぎゅう)の子(こ)。騂(あか)くして且(か)つ角(つの)あらば、用(もち)うること勿(なか)らんと欲(ほつ)すと雖(いえ)ども、山川(さんせん)(そ)れ諸(これ)を舍(すて)んや。

(し)(いわ)く。回(かい)は其(そ)の心(こころ)三月(さんげつ)(じん)に違(たが)わず。其(そ)の余(よ)は則(すなわ)ち日(ひ)に月(つき)に至(いた)るのみ。

季康子(きこうし)(と)う。仲由(ちゅうゆう)(まつりごと)に従(したが)わしむ可(べ)きか。子(し)(いわ)く。由(ゆう)は果(か)なり。政(まつりごと)に従(したが)うに於(お)いて何(なに)か有(あ)らん。曰(いわ)く。賜(し)は政(まつりごと)に従(したが)わしむ可(べ)きか。曰(いわ)く。賜(し)は達(たつ)なり。政(まつりごと)に従(したが)うに於(お)いて何(なに)か有(あ)らん。曰(いわ)く。求(きゅう)は政(まつりごと)に従(したが)わしむ可(べ)きか。曰(いわ)く。求(きゅう)は芸(げい)なり。政(まつりごと)に従(したが)うに於(お)いて何(なに)か有(あ)らん。

季氏(きし)、閔子騫(びんしけん)を費(ひ)の宰(さい)と為(な)さしむ。閔子騫(びんしけん)(いわ)く。善(よ)く我(わが)(ため)に辞(じ)せよ。如(も)し我(われ)を復(ふく)する者(もの)(あ)らば、則(すなわ)ち吾(わ)れ必(かなら)ず汶(ぶん)の上(ほとり)に在(あ)らん。

伯牛(はくぎゅう)(やまい)(あ)り。子(し)(これ)を問(と)いて、窓(まど)より其(そ)の手(て)を執(と)りて曰(いわ)く。之(これ)を亡(うしな)わん命(めい)なるか。斯(こ)の人にして斯(こ)の疾(やまい)(あ)り。斯(こ)の人(ひと)にして斯(こ)の疾(やまい)(あ)り。

(し)(いわ)く。賢(けん)なるかな回(かい)。一簞(いつたん)の食(し)。一瓢(いつぴょう)の飲(いん)。陋巷(ろうこう)に在(あ)りて、人(ひと)は其(そ)の憂(うれ)いに堪(た)えず。回(かい)は其(そ)の楽(たの)しみを改(あらた)めず。賢(けん)なるかな回(かい)

冉求(ぜんきゅう)(いわ)く。子(し)の道(みち)を説(よろこ)ばざるに非(あら)ず。力(ちから)(た)らざるなり。子(し)(いわ)く。力(ちから)(た)らざる者(もの)、中道(ちゅうどう)にして廃(はい)す。今(いま)(なん)じ画(かぎ)れり。

(し)、子夏(しか)に謂(いつ)て曰(いわ)く。女(なん)じ君子(くんし)の儒(じゅ)と為(な)れ。小人(しょうじん)の儒(じゅ)と為(な)ること無(な)かれ。

子游(しゆう)、武城(ぶじょう)の宰(さい)と為(な)る。子(し)(いわ)く。女(なん)じ人(ひと)を得(え)たりや。曰(いわ)く。澹台滅明(たんだいめつめい)なる者(もの)(あ)り。行(ゆ)くに径(みち)に由(よ)らず、公事(こうじ)に非(あら)ざれば、未(いま)だ嘗(かつ)て偃(えん)の室(しつ)に至(いた)らざるなり。

(し)(いわ)く。孟之反(もうしはん)(ほこ)らず。奔(はし)りて殿(でん)し、将(まさ)に門(もん)に入(い)らんとす。其(そ)の馬(うま)に策(むち)うちて曰(いわ)く。敢(あえ)て後(おく)るるに非(あら)ず。馬(うま)(すす)まざればなり。

(し)(いわ)く。祝鮀(しゅくだ)の佞(ねい)(あ)りて、宋朝(そうちょう)の美(び)(び)らざれば、難(かた)いかな。今(いま)の世(よ)に免(まぬが)れんこと。

(し)(いわ)く。誰(たれ)か能(よ)く出(い)づるに戸(こ)に由(よ)らざらん。何(なん)ぞ斯(こ)の道(みち)に由(よ)ること莫(な)き。

(し)(いわ)く。質(しつ)、文(ぶん)に勝(まさ)るは則(すなわ)ち野(や)なり。文(ぶん)、質(しつ)に勝(まさ)るは則(すなわ)ち史(し)なり。文(ぶん)(しつ)彬彬(ひんびん)として、然(しか)して後(のち)君子(くんし)なり。

(し)(いわ)く。人(ひと)の生(せい)は直(ちょく)なり。之(これ)を罔(な)いて生(い)きるは、幸(さいわ)いにして免(まぬが)るるなり。

(し)(いわ)く。之(これ)を知(し)る者(もの)、之(これ)を好(この)む者(もの)に如(し)かず。之(これ)を好(この)む者(もの)は、之(これ)を楽(たの)しむ者(もの)に如(し)かず。

(し)(いわ)く。中人(ちゅうじん)以上(いじょう)は、以(もつ)て上(じょう)を語(つ)ぐる可(べ)し。中人(ちゅうじん)以下(いか)は、以(もつ)て上(じょう)を語(つ)ぐる可(べ)からざるなり。

樊遅(はんち)、知(ち)を問(と)う。子(し)(いわ)く。民(たみ)の義(ぎ)を務(つと)め、鬼神(きしん)を敬(けい)して之(これ)を遠(とお)ざける。知(ち)と謂(い)う可(べ)し。仁(じん)を問(と)う。曰(いわ)く。仁(じん)は難(かた)きを先(さき)んじて獲(う)るを後(あと)にす。仁(じん)と謂(い)う可(べ)し。

(し)(いわ)く。知者(ちしゃ)は水(みず)を楽(たの)しむ。仁者(じんしゃ)は山(やま)を楽(たの)しむ。知者(ちしゃ)は動(うご)き、仁者(じんしゃ)(しず)かなり。知者(ちしゃ)は楽(たの)しみ。仁者(じんしゃ)寿(いのち)ながし。

(し)(いわ)く。斉(せい)(ひと)たび変(へん)せば、魯(ろ)に至(いた)らん。魯(ろ)(ひと)たび変(へん)せば、道(みち)に至(いた)らん。

(し)(いわ)く。觚(こ)、觚(こ)ならず。觚(こ)ならんや。觚(こ)ならんや。

宰我(さいが)(と)うて曰(いわ)く。仁者(じんしゃ)(これ)に告(つ)げて井(せい)に仁(じん)(あ)りと曰(い)うと雖(いえ)ども、其(そ)れ之(これ)に従(したが)わんや。子(し)(いわ)く。何為(なんす)れぞ、其(そ)れ然(しか)らん。君子(くんし)は逝(ゆ)かしむ可(べ)きも、陷(おとし)いる可(べ)からず。欺(あざむ)く可(べ)きも罔(し)う可(べ)からず。

(し)(いわ)く。君子(くんし)は博(ひろ)く文(ぶん)を学(まな)び、之(これ)を約(やく)するに礼(れい)を以(もつ)てす。亦(また)(もつ)て畔(そむ)かざる可(べ)きか。

(し)、南子(なんし)を見(まみ)ゆ。子路(しろ)(よろこ)ばず。夫子(ふうし)(これ)を矢(ちこ)うて曰(いわ)く。予(よ)が否(ひ)とする所(ところ)の者(もの)は、天(てん)(これ)を厭(た)たん。天(てん)(これ)を厭(た)たん。

(し)(いわ)く。中庸(ちゅうよう)の徳(とく)たる、其(そ)れ至(いた)れるか。民(たみ)(すくな)きこと久(ひさ)し。

子貢(しこう)(いわ)く。如(も)し博(ひろ)く民(たみ)に施(ほどこ)して、能(よ)く衆(しゅう)を済(すく)うこと有(あ)らば、何如(いかん)。仁(じん)と謂(い)う可(べ)きや。子(し)(いわ)く。何(なん)ぞ仁(じん)を事(こと)とせんや。必(かなら)ずや聖(せい)か。堯舜(ぎょうしゅん)も其(そ)れ猶(なお)(これ)を病(や)めり。夫(そ)れ仁者(じんしゃ)は、己(おのれ)(た)つと欲(ほつ)して人(ひと)を立(た)つ。己(おのれ)(たつ)せんと欲(ほつ)して人(ひと)を達(たつ)す。能(よ)く近(ちか)く譬(たとえ)を取(と)る。仁(じん)の方(ほう)と謂(い)う可(べ)きのみ。

論語(ろんご)、巻(かん)の三(さん) 終(お)わり

2010年12月23日木曜日

GIMP を使ってフォトレタッチ - 4.2.3 レイヤーの複製

4.2.3 レイヤーの複製

ここでは,レイヤーの複製について説明します。

特定のレイヤーを複製(同じものを別レイヤーで作成)することができます。

  1. 「レイヤーダイアログ」から複製元レイヤーを選択します。

  2. 「レイヤーダイアログ」下方にある「複製アイコン」をクリックします。

  3. 複製元レイヤーの1つ上に複製された新しいレイヤーが追加されます。なお,複製元の「表示・非表示」の状態などもそのまま複製されます。