選択したノードを削除。


《選択したノードを削除・・・『+』が追加で、『-』が削除。わかり易いな……。》


まずは何処でもノードを一つ選びます。(下図、コレ。2)そしてノード(-)ボタンをクリック。(下図、コレ。1)


削除されました。


座標上にノードを追加。


《座標上にノードを追加・・・座標? 上? とにかく見てみよう。》


分かりやすいように、x軸とy軸を書いてみました。そしてノードをすべて選択します。選択の仕方は、shift を押しながらすべてのノードをクリック。


『x最大』、『y最大』、『x最小』、『y最小』それぞれ追加すると……。

それぞれの場所に新しいノードが追加されました。


新しいノードを追加。


《ノードを追加・・・さらに細かい修正が、可能、か。》


 まずはパス図形『基準点』をクリック。そして新しく追加したい線の上をクリック。すると2つのノードが選択されます。そして『ノードを追加』をクリックすると、


新しいノードが追加されました。(下図、コレ。)


『いきてるきがする。』《第6部 秋》


もくじ



第43章

 約束に遅れそうになって、慌ててドアを開けたちょうどそこに、小さなキリギリスがジッとしていました。私がつぶさない程度につま先でツン、とやってみたのですが、キリギリスは傲然として動きません。やるならやれ!と言わんばかり。 

『何もしないよ。何をそんなに拗ねてているんだ?』私は正直に問いました。しかし考えてみれば、秋の虫は、生まれた時には既に春も夏も終わっているんです。拗ねたくなる気持ちも、わからなくもありません。実際そんな自らの不幸を知ってか知らずか、キリギリスは尚、卑屈な強情さを保ったまま動きません。 

 でもこれを100年、いえ1000年、いいえ100億年ベースにすると、私も多分同じ様なモノなのです。 

 何でこんな時期に生まれてきたんだろう? 

 目を奪う美しい星々も、舌を溶かす美味しい果実も、流麗華美な鳥たちのさえずりも、もうずっと昔に消えてしまった。楽しい季節はすでに終わってしまった。 

  

 そして今、何も望まない私がここにいる。それがどれほど懲罰的な事であるのか。 私にはきっと、永遠にわからない……。

 あ、そういえば昔、働いていた喫茶店でこんな注文をされたことがあります。 

「ビザトースト、ピザ抜きで」。私が、え? と聞き返すと、その人は普通のトーストが食べたいんだけど、メニューにないからそう注文をしたのだと言いました。 

 何一つ欲しいモノがないメニューの中からでも、必ず何かを一つ選ばなければなりません。 

 閑話休題。話が逸れました。大丈夫ですよ。キリギリスは、帰ってきた時にはもういませんでしたから。 


 私はタクシーに乗って、入間市方面に向かっているところです。今の子の母親に指定された場所に向かっているのです。 

 今の子から母親に連絡を取って欲しいと言われたのは一昨日ぐらいだったと思います。私は、連絡を取るのはいいけど会えるかどうかはわからないよ、と言いました。以前にも言いましたとおり、私が関わると、この親子は少し面倒な関係になるのです。 

 今の子の母親は迷走しています。息子が死んだのは自分のせいだという考えに必死に抵抗しているのです。私は彼女のせいだとは思いません。だから彼女に肩入れするのですが、それは同時に、私は彼女から息子を奪い取った悪人という事になるのです。ある日、彼女は今の子の双子の妹を連れて店にやってきました。そして私に、なぜ親の私に一言も報告せずに未成年である息子を店で働かせているんですか、それは誘拐と同じです、犯罪ですよ。と詰め寄ったのです。 

 私にとっては寝耳に水。私にとって、今の子は、私がこのブログを立ち上げる際、フリー画像の中から見つけてきた道祖神なのですから。しかし母親にとっては、自殺した息子なのです。 

 今の子の母親に指定されたのは入間市にある大型ショッピングモールの駐車場でした。既婚の男女が会うには、とてもよく考えられた場所だと感心しました。 

「駐車場には入らなくて、入り口の手前でいいです。」私が言うと運転手は、あそこの入口のそばにバス停があるから、出来れば一回入って、ぐるっと回って出口から出た方がいいんですけどね。皆さんそうなさいますよ、と言いました。 

あ、じゃあそれでお願いします。 

 車道の端を中学生が数人自転車で走っています。よほど命が有り余っているのか、彼らはまともに自転車を漕ぐのも難しいようです。 

 あれがねぇ、ホント怖いんですよ。運転手がそう言ったので私は思わず、そうなんです!そうなんですよ!私もトラックドライバーやってるんでよくわかりますよ。ホント自転車が一番怖いですよね、と同調しました。 

 運転手はミラー越しに私を見て、あぁ、ドライバーさんですか、と言いました。 


 同じ人間が、道祖神であったり、自殺した少年であったりする事は、実はしばしば起こる事なのです。ただ誰もそう思わない。いえ、誰も思おうとしないのです。 

 人生は絶えず自分で選択している様でいて実はそうじゃない事は、誰だってよく知っていますよね。容姿端麗な皆様、何か選びました? 選ばないですよね。不細工な皆様、何か選びました? まさか選ばないですよね。我々は全く選んだ覚えのないモノを自分とされ、その全責任を負わされている。そんな理不尽な事に敢えて無抵抗でいるのです。それを埋め合わせるために、誤魔化しや、や、矛盾が生じる。では、実際の自分は何処にいて何をしているのでしょう? それを考えるにはまず、 

 我々一人一人が別々の存在じゃないという事を前提にすべきです。 

 私は道祖神の写真を気に入り、店のマスコットに決めました。そのつもりでした。しかし思い返してみると、私がなぜブログを書き始めたのか、そもそもの理由がなく、それに至ったであろう様々な事情も、突き詰めれば何もないのです。やはりそれは初めからそこにあった以外に考えられないのです。つまり私はそこに導かれたという事です。誰がそんな残酷な場所に私を導いたのでしょうか。

誰も導いてはいません。

 それは同時に同じ場所に無限の自分がいるからです。我々が選んでいると思っているのは、その自分が勝手に選んでいるだけなのです。 

 嘘や矛盾は論理の間に成立する事はあっても、現実の間に成立する事はありませんよね。像がダンボの様に耳で羽ばたいて飛んでいたら論理矛盾が生じます。体重を考えても、推力を考えても絶対にあり得ません。ですがもし、実際に目の前で飛んでたらどうします? 私たちは必死にそのロジックを探すでしょう。探さなくてはなりません。現実は絶対否定できませんから、同じように……。 

 現実であればもう何も疑う余地はどこにもないのです。疑うとはつまり、信じている事が大前提で、またその証拠でもあるのです。 


 

 タクシーは駐車場をぐるりと一周しました。その途中で私は今の子の母親をみつけました。 

 あ、運転手さん、ここでいいです。あの人ですから。 

 私が言うと、運転手は、 

 あの人?あぁ、あの人は、あそこにずっと立ってるんですよ。もう、何年も……。 

 そう言いました。 

 私は異世界との親和性、みたいな現象にはすっかり慣れているので、特に地縛霊だとか、エネルギー体だとか、そういう事は言いませんが、とにかく会わなければいけない人なので、降ろしてください。と言いました。 

 あぁ、そうですか。わかりました。しかしあなたで、何人目ですかね。じゃああなたもあの人を、『今の子の母親』だと、そう仰るのですね? 

 私がぼっとしていると、タクシーのドアが開きました。目の前を自転車に乗った中学生が数人通り過ぎました。今の子の母親は、私に気付くと、小さく会釈しました。 



第42章

 

  ささ、飲んでください。冷めてしまいますから。

 綺麗な色でしょ? これは『夢紫蘇茶』と言いましてね。うちの田舎にはね、この『夢紫蘇』がそこら中に生えているんですよ。それを摘んで、天日で半日ほど乾かしてから、ゆっくり、色が変わらない程度に低温で蒸して、それから手で揉むんですね。それを煎じて飲むんです。うちの田舎ではみんな好んで飲むんですけどね、そうですか、知りませんか。 

 このお茶はね、安息効果がすごいんです。子供の頃の私は酷い喘息持ちだったんですが、夜中に発作が起きると、母が決まってこのお茶を入れてくれたんですね。飲むと、スッと胸が楽になるんです。私はホッとして見上げるのですが、そこには仁王様みたいに佇立する、スッピンで眉毛がほとんどない母の姿があるんです。母は私から湯呑を毟り取ると、それを流しに投げてそのまま寝るんです。それぐらい眠かったんでしょうね。今思い出しても、奇妙な様な、甘い様な、怖いような、変な体験ですね……。


 窓の外は煙のような雨が降っています。曇ってますが明るいです。オンブバッタが飛ぶ瞬間が見えました。着地すると、今年も秋刀魚が不漁で、白菜が値上がりしてと、秋の話題は次から次にやって来て、そうしてだんだんと秋は深まっていきます。オンブバッタの功績は偉大です。 

 この秋の連休は何だか、コンセントが抜けたように静かですね。風鈴すら、チリとも鳴りません。 

 以前とはだいぶ『今』の様子が変わってきたようです。或いは『今』ありきの『今』を勝手に捏造してしまっているせいかもしれません。自分で勝手に作った『今』『今』というよりも過去と未来の間という感じであたかも空白の様でなんとも味気ないですね本当の『今』を捕らえるのは本当に難しい事ですからね。 

 過去は存在しない、未来も存在しない。 

 そんな風にして少しずつ、まるで柔軟体操で股関節を広げるようにゆっくりと『今』広げていくと、やがて真っ平で一つの大きな『今』になりますよ。いえ、本当に。 

 ハハハハ……。 

 お互い、こんな穏やかな日がずっと続けばいいですね。未来も過去も何も考えずに、ずっとこうしていられたら、そりゃ、誰だっていいですよ。 

  

 2人は最近は居たり居なかったりすね。いつの間にかそうなってしまいました。だから最近は私が一人でこうして店番をするんですよ……。 

 店なんかをやってるとね、どうしてもそこを、世界の縮図の様に考えてしまうんですよね。世界を運転するコクピットのようなモノだと、どうしてもそう考えてしまうところがあるんですね。 

 ここから、自分は世の中にどう打って出るか、という様な風にね、考えを曇らせてしまうんです。別に、生きる事は戦う事ではありませんから、作戦なんか要りませんのに。 

 今だってね、私がこうしてあなたと話しているのは、果たして話しているのか、聞いているのか、なんて思ってるんですよ。会話なのか、独り言なのか。 

 結局、同じなんですよね。その証拠に、最近私は、自分が言った言葉にひどく痛み入る事があるんですよ。有難いなぁ……、ごめんなさい……、と。さっきの母に対する一言だって本当は、有難いなぁ……、ごめんなさい……でしょう。 

 私は一体誰に何を言っているんだろう? 人に良かれと思って言った言葉というのは、実は自分にそう言い聞かせたいだけだったりしますね。つまり、人に良かれと思いたい自分の欲求を満たしたいための独り言。他人はそれに、強制的に付き合わされているだけ。 

だからこれも、さっきの母に対する言葉と同じですね。私が迷惑な子だと思いたいばかりに、母は鬼にされてしまいました。 

 有難いなぁ……、ごめんなさい……。 

 そしてあなたは、そんな不安定で不格好な親子関係を、あなたは無理やり鑑賞させられてしまいました。 

 有難いなぁ……、ごめんなさい……。 

 さて、あなたは私を逮捕しに来たというのは本当ですか?  私には一体、どんな罪状が? 

 ささ、飲んでください。もう冷めてしまいましたか……。 

 この霧雨がもし開けて、私は顔を上げて、あぁ、それでも心のどこかで、私は2人の事を待ってるんだなぁ、やっぱり心細いんだなぁ、と気付きます。そして私の頭は、時間を刳り貫いて、どんどん進んでいきます。『今』にぽっかりと穴を開けてその空洞の中をいくのです。 


  近々、母親のところに行こうと思ってるんですよ。私が救急車で運ばれた時に来てくれて以来、一度も連絡を取ってないんです。取ろうとしても拒否されるんです。母はね、私が死んだと思ってるんですよ。そう思いながらも母はずっと私を探し続けている。信じたくないんですね。母は戦ってます。自分自身の描いた妄想とやはり自分自身が描いた現実のはざまでね。

 同じように、私も近々会いに行こうと思っている。お互いがそうやってお互いの悲しみを共有する、もしくは相殺するんです。 

 でもそのバランスが最近、少し崩れているようなんですね。 

 母が『皇極法師』という男に洗脳されていると、店長のブログを見て知りました。店長が言う『皇極法師』とは誰の事でしょう。店長もそれについては触れていません。私はその人が母と私についてすべてを知っているような気がしてならないんです。 


  半ズボンだと膝頭がもう寒いですね。秋物を出さないと……。

私は、最後にグッと、湯呑を煽りました。その様子を、ジッと見ているのが、 

 そうですよ、お巡りさん。あなたの仰る通りです。 

これはね、『夢紫蘇』じゃありません。そう、あなたが想像するその、元気のいい、野草です。 

 私の生まれた家の近所の空き地にたくさん生えていて、みんなそれを刈って家の軒下に干すんです。乾いた葉っぱが風に触れあう音が綺麗でね。お!だいぶ乾いてきた。なんて祖父の顔がほころぶんです。 

「これはな、喘息にエエお茶やから、ゆっくり飲み」 

 祖父の優しさが染みました。とても飲みやすい温度にしてあるんです。 

 私はね、お巡りさん。法律なんかよりも、祖父の優しさの方が、よっぽど頼りになるし、大切なんです。 

 法律は人間を守りません。人間が法律を守るんです。 

 同じように伝染病も、人間が守るんです。殺人も、戦争も、すべて人間が、懇切丁寧、守り続けているんです。 

 それ以上の愛がどこにありましょうか? 


 刳り貫いた『今』を抜けて自宅に戻ると、まだ朝の5時半じゃないですか! 猫だけが起きて、目をキラキラさせて出迎えてくれました。 

 今日は休みだから、もうひと眠りする事にします。 


ノードツール


《ノードツール・・・繊細かつ大胆に料理を飾るペティナイフのよう。美しい料理に不味い料理はない、か……。か?》


もくじ



『レイヤー・その2』では色を重ねていく方法を紹介しました。

その結果、写真からこんな絵が描けました。


この酷い絵を、どうやって美しいイラストに仕上げていくのか……。


まずは今の時点で、いくつのレイヤーを使っているのか見てみます。


『柄』『後ろ足』『ぼかししわ』『耳』『鼻』『黒目』『白目』『目』『茶虎』『外郭』『basic』


意外と使うなぁ、レイヤー……。


使わないレイヤーをロック、ブラインドしたところ。

ノードツール


いったん確定した線をさらに細かく修正するには、

『ノードツール』を使います。(下図 コレ。)


ノードツールを選択すると、線の上に『白い点』で表示されます。(下図 コレ。)

これはペンツールで描いた時にクリック(確定)した点です。この点が修正する時の起点になります。


点にカーソルを合わせると……、


お! 角が生えました。この『ハンドル』と言います。ハンドルを動かすと線がグニャグニャと動きます。動きますが……。

『でもなんだか思うとおりにならない。線が言う事を聞いてくれない』

そんな時は……、


<\div>

ノードツール・メニューバー


ノードツール・メニューバー

ノードツールのメニューを使います。


このメニューは全部で15種類あります。

以下のリンク先ではわかり易いように練習用画面を利用して説明します。)


左から、


『新しいノードを追加』

●『座標上にノードを追加』

●『選択したノードの削除』

●『2つのノードを一つに統合』

●『1つのノードを2つに分離』

●『2つのノード間を線で連結』

『2つのノード間の線を削除』

『ハンドルの分割』

『ハンドルの統合』

『ハンドルを左右対称にする』

『ハンドルをスムーズにする』

『2つのノード間を直線にする』

『2つのノード間を曲線にする』

●『オブジェクトをパス図形に変換』

『ストロークをパス図形に変換』


となります。いっぱいありますね……。ウンザリします。

全て使いこなす事はないと思いますけどね……。

しかし、これだけあれば、

描けない曲線はありません!!!


レイヤー・その3

レイヤー・その2


《レイヤー・・・重ねれば重ねるほど美味くなる。ミルフィーユ? ウエハース??》


『レイヤー・その1』では、まず一番外側の輪郭から、ベジェ曲線を利用して、ザックリ確定する、というところまでやりました。

それをだんだん内側に向かって、だんだん細かく、重ねていくわけですね。


次に『茶虎』を確定します。

レイヤー名は『茶虎』

やり方は一番外と同じ。ただ、形がやや複雑になってくるぶん、クリックの数も増えてきます。

ちょっと、やって、カチ。 ちょっと、やって、カチ。

とね。


ペンツール以外の使い方。


しかし、あまり熱心にやり続けると瞬きの数が減って目が悪くなります。

だから他のツールでもっとザックリもっと簡単に輪郭をなぞりましょう。


丸ツールを使います。

丸ツール(上図、コレ。)をクリック。


ネコの目に合わせてドラッグすると円のサイズが確定します。その際、そのままドラッグすると、円を随意に楕円に描くことが出来ます。ここでは、白目はまず真ん丸で、

真ん丸の円の大きさを調整しいた時は、SHIFT を押しながらドラッグします。



白目』が入りました。続いて……。


『黒目』のレイヤーに切り替えて同じように円ツールで黒目を描きます。

『黒目』(青目)は少し楕円にしてみました。

黒目が入ると、グッと絵心のなさが際立ってきます……。

そしてこれを、11レイヤー分、色を分けて、カチカチやり続けると……。



こうなりました。 

『まあまあ、絵じゃない?』 と思って写真を消すと……。


あららら、酷い絵が……、浮かび上がりました。

しかし、まだまだこれからです。乞うご期待!!


レイヤー・その3  ノードツール


レイヤー・その1


《レイヤーとは・・・人の数だけ愛がある。色の数だけレイヤーがある、か……。》

もくじ



レイヤーは下から上へと重ねていきます。

折り紙で顔を作っていると考えてみてください。

『目、鼻、口』、を作った上に『輪郭』を重ねてしまうと……、

目、鼻、口が見えなくなってしまいますよね。


inkscapeのレイヤーも同じです。


下から上へと重ねていきます。

細かく描きたいならそのぶん、多くのレイヤーが必要となります。


まずは、いっぱい、レイヤーを作っておきましょう!


レイヤーの大量生産。


この、

『レイヤーアイコン』↓をクリック。(下図、コレ。1)

続いて右側に現れたレイヤー表示ウインドウ の + をクリック。(下図、コレ。2)

続いて画面上に現れた『レイヤーを追加』『追加』をクリック。(下図、コレ。3)


コレ。2)(コレ。3)の作業を繰り返す事10回……


 うわぁ~11個もレイヤーが出来ました!(下図、コレ。)まあ、とりあえずこれぐらいあればいいでしょう。


一番下のレイヤーには、ベースとなる写真を入れます。

名前は『basic』にします。

名前を付けてロックしておくと便利です


 『目玉と鍵』のマーク。


レイヤー毎にあるこ2つのマークは、作業効率を上げるため、また、誤作業を防ぐための、いわば『安全装置』の様なモノです。

『レイヤーを見せない、ロックを掛ける』

『レイヤーを見せる、ロックを解く』

の切り替えアイコンです。

ロックを掛けると一切の編集が出来なくなります。

目玉アイコンを閉じると、レイヤー自体が非常時になります。


虫眼鏡ツール


 続いて、ネコの輪郭からなぞっていきたいと思います。しかしこのままだとちょっと絵が小さいので拡大します。拡大するには左側ツールボックスの下の方、

虫眼鏡ツール(下図、コレ。)クリック


クリックするたびに拡大されます。逆に縮小したいときはshiftキーと一緒にクリックします。


ペンツール


輪郭をなぞるのには、ペンツール(ベジェ曲線)を使います。


『ベジェ曲線』には慣れが必要です。

 ここで挫折する人も少なくないかも……。ギターで言うところの『Fコード』です!

でも慣れるとすごく便利!!細かい部分は後で調整出来るので、まずはザックリでいいので、とりあえずネコの輪郭をなぞります。


 レイヤーを下から2番目に切り替えます。(下図、コレ。)これを『輪郭』のレイヤーにします。


 ペンツールを選んだら、ネコの輪郭の上にどこでも一つ始点を決めます。(クリック。)

そして少し離して次の点を決めます。(クリック。)

その間に出来た直線をドラッグしながら動かしてネコの輪郭に合わせるわけですが……、

よくしなる細い針金を、指先で捩じりながら曲げている、そんな感覚がつかめれば、ほぼマスターしてます。おめでとう!!


 それをネコの輪郭に合わせて一つ決まれば次の点を決めて、またドラッグして曲線を輪郭に合わせてまた次の点……。


これでぐるっと、ネコを一周繰り返して、『始点』に戻って来て重ねてクリックすると……。

 線が閉じて黒くなり……。

ネコの輪郭が『パス図形』として選択されました。


 見易いように赤い色を付けてみました。色を付けるには右下『フィル』『ストローク』という文字の『フィル』をクリック……、


拡大図

画面下に並んでいるカラーバーで色を選びます。


『フィル』は、選択したパス図形の内側の事を言います。この場合、ネコですね。

ストローク』は、そのパス図形『輪郭線』 の事を言います。

これは、『フィル』を赤、『ストローク』を黒、に設定しています。

しかし……、


不透明度(%)


 フィルの色がこんなに濃いと、元の写真が見えません。

元の写真が見えないと、次のレイヤーが描けません。


そういう時は、右側のレイヤーウインドウの真ん中へんにある

不透明度(下図、コレ。)を下げます。下げますと……。


不透明°37.3%

こんな感じです。これなら次は茶虎の部分別のレイヤーで確定できますね。


これを繰り返して、だんだん内へ内へとレイヤーの色と形を重ねていくわけですね。


レイヤー・その2

写真の取り込み


写真の取り込み。


《写真の取り込み・・・かの天才彫刻家、オーギュスト・ロダンは言った。『模倣を恐れるな!』はい、じゃあ、そうします……。》


絵の上手い方にはわかりますまいが……。


私の様に、絵心がない人間にとって、人に自分の描いた絵を見せるのは、ビキニでプールサイドを歩くのと同じぐらいの努力と度胸を必要とするのです。しかし、ちょっとトレーニングをしたぐらいでは絵は上手くなりません。腹筋は割れません。だから……。

 まずはモチーフとなる写真を決めましょう。まずはそれをなぞって、絵を描くわけです。フリー素材でもいいですが、自分で撮った写真なら問題ないと思います。

私はこの写真↓(愛猫・とのま)をモチーフにしてみます。


 では、インクスケープに写真を取り込みます。


左上の『ファイル』をクリックし、『開く』をクリック。

インクスケープのデフォルト画面。


写真選択画面が現れるので、好きな写真を選んだら、右下の『開く』をクリック。


写真が取り込まれました。


でもちょっとデカいので、要らない部分を切り取ります。

まず左のツールバーのペンツール(上図、コレ。)

クリック。


 ペンツールは糸を引くようなツールです。カーソルを動かすだけで、直線が現れます。

2つの点(始点と終点)を指定してドラッグすると随意の曲線を引くことが出来ます。

(ベジェ曲線)


 写真を適当な形に確定します。ペンツールクリックのたびに線が確定されるので、下図のように、四角く指定する場合は、角ごとにクリックして、最後に始点終点を重ねてクリックすると、囲まれた範囲が確定されます。



次に、矢印ツール↓

をクリック。

もとの写真と、ペンツールで確定した部分を、shift を押しながら両方クリックします。すると両方が確定されます。


ツールバーから『オブジェクト』クリック

続いてプルダウンメニューから『クリップ』『設定』クリック。


切り抜けました。



『オブジェクト』『90°回転、時計回り』クリック。


切り抜けました。


レイヤー・その1


inkscape


《inkscapeとは・・・絵を描けない人でも絵が掛ける。だけじゃなく、工夫できる、上達できる。夢の無料ドローイングソフト、か……。》



無料で使えて有料ソフトに引けを取らない多様な機能を備えた、

優秀なドローイングソフト。


inkscape


絵を描いたことがない人。

描いたけど見るに堪えなかった……という人


 私も、絵心ゼロを自称するモノとして、

この『inkscape』ドローイングソフトとしてお勧めです。



 inkscapeとは?


そもそも、ドローイングソフトとは何なのか?

実際、絵筆を使って、色を混ぜて、キャンバスに描く事と、

何が、どう違うのか??


まず、ドローイングソフトの基本は、

レイヤー画法』です。


★レイヤーとは・・・層。階層。絵や設計図の仮想的シート。複数のシートを重ねたり個別に編集したりできる、画層。

だ、そうです。ところで……。

日本が世界に誇るカルチャーと言えば


『ジャパニメーション』


アニメ動画は、一秒間に24コマの絵を使います。

しかし実際は、背景などすべての絵を1枚ずつ描くのではなく、

画面の中の動きのある部分だけを動かす。(例えば口の動きなど)

それ以外は同じ絵を使います。

そのためには……、


動く部分だけを透明なセロファンに描き、もとの絵の上に重ねていく。

この、

『動く部分だけを重ねていく。』

方法を

『レイヤー画法と言います。


inkscapeも、これと同じ様に、


絵の背景から最後の仕上げの『点』までを、

レイヤーに分けて、

描き重ねていくわけです。


ん~、分かりにくい……。じゃあ実際に、inkscape を起動して描いてみたいと思います。


★まずは『inkscape』 をダウンロード&インストールしよう!★


inkscape のダウンロード&インスト―ルに関しては、

こちらから行ってください。



inkscapeを起動する。


インストールが終了すれば、さっそく起動してみます。

↓起動するにはこのアイコンをクリック。↓


(私のローエンドパソコンでは、15~20秒ぐらい掛かります。)


inkscapeの基本画面

写真を取り込む

CSSとは?


《CSSとは・・・美味しい料理を、より美味しそうに、『映え』させるための、味付け? 盛り付け??》


CSSとは?


C・・・★カスケーディング (段々の階層構造の)

S・・・★スタイル(~様式の、~流の、~風の)

S・・・★シート(薄紙、延板、印刷物)


の略です。

あいうえお作文風に言うと……、


階層構造を持った!

様式の!

印刷物!


という事になりますね。これに当てはまるモノといえば……、

 トランプ!

 これは正にそうですね。1枚の『トランプ』には3つの階層構造が印刷されています。1組 で52枚 のカードがあって、その中には4つのマークがあって、さらにその中に13の数字があてはめられている。『トランプの、ハートの、エース』と条件を絞り込んでいくと……、

この1枚にたどり着きます。


これを料理に例えると……、

東洋の、中国の、料理の、牛肉と、ピーマンと、タケノコの、細切りの、オイスターソースの、炒め物。

と絞り込むと……、

青椒肉絲

これにたどり着く。とても美味しそうですね。

斯様に、CSSとは、

『サイトのデザインの、より細かい部分により細かい効果を加えるための条件を絞り込むための言語』

という事になります。


 しかし……、

CSSそれ自体は何の表現能力も持っていません。

CSSとは、HTMLに読み込ませる形で初めてその効果を発揮する事が出来ます。

つまり……、

オイスターソースなんですね。

皿の上にオイスターソースを塗りたくってもそれは料理とは言いませんね。CSSはHTMLという料理に足す事で初めて妙味を加え、より一層美味しくする事が出来るんです。

HTMLとは?


CSSの書き方とルール★


まずはこれがCSSの正体です。


body{

font-size:15px;color:red

}


この中には重要な3つの要素が隠れています。

それは

セレクタとプロパティと値。

です。


ではもっとわかりやすいように

1.セレクタ 2.プロパティ 3.値

色分けすると……。


body{

font-size:15px;color:red

}


こうなります。さらに日本語にすると……、

セレクタ{

プロパティプロパティ

   }

となります。

このCSSがどんな条件を絞り込んでいるのかというと……、


『HTMLのbody要素の中に書かれたすべての文字のサイズ15px(ピクセル)にしてにする

という条件絞り込んでいます。


body{

font-size:15px;color:red

}


では書き方をさらに細かく見ていきましょう!


★{(いただきます)と、 

}(ごちそうさま) ★


セレクタの後に、波括弧 を入れます。そしてプロパティを書いた後、波括弧 で閉じます。 つまり……、

いただきます と、

ごちそうさま です。



プロパティは コロン:で区切ります。

コロン:です。上と下が同じ点々のコロン。プロパティ区切りです。

:『コロン』

小さじ1 


プロパティを連続して記述したい場合は、プロパティごとに、セミコロン;で区切ります。★

左のコードは、文字の大きさに続き、文字の色も指定しています。こんな風に、プロパティ連続して記述したい場合はセミコロンで区切ります。

セミコロン』

です。

*上が点、下がオタマジャクシ(?)の点々セミコロン。

小さじ1醤油大さじ3


CSSをHTMLの何処に記入する?★


これは大問題です。

これがわからないとどんな美味しい調味料も無用の長物です。

デタラメなタイミングでデタラメな量を入れると、

その料理は失敗です。

ここでは一番基本的HTMLを使って説明します。


↓《基本的なHTML》↓


<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p>

ここに文字が入ります。』

</p>

</body>

</html>


bodyタグの中の段落を表す<p>タグを作り、

『ここに文字が入ります。』

というゴシック体』で書き込んでみました。


これからこのCSSを使って色々いじってみましょう。


CSSを書き込む3つの方法


《HTMLCSSを書き込むには3つの方法があります。


  1. HTMLの随意のタグの中にstyleタグを作り、直接CSS書き込む。
  2. HTMLのheadタグにstyleタグを作り、CSSを書き込む。
  3. CSSファイルを作ってHTMLのheadタグに読み込ませる。

これを料理に例えると……、

  1. 肉にあらかじめオイスターソースを揉み込んでおく。
  2. 炒めている途中でオイスターソースを加える。
  3. 料理の仕上げでオイスターソースを絡める。

となります。

では実際にこの3つの方法で、HTMLCSSを読み込ませてみます。

完成したHTMLはブラウザソフトに読み込ませて実際にその効果を見てみましょう。もし思った効果が見られない場合は、どこかに余計な括弧スペースが無いか確認してみましょう。 

ブラウザソフトに読み込ませる方法は、

HTMLファイルをブラウザソフトに読み込ませる方法 

で紹介します。


その1

HTMLの随意のタグの中にstyleタグを作り、直接CSSを書き込む方法。

(肉にあらかじめオイスターソースを揉み込んでおく。)


<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p style=font-family:serif”>

『ここに文字が入ります。』

</p>

</body>

</html>


<p>タグ段落タグ)の中に直接styleタグを書き入れます。


<p style=font-family:serif>


ここでは、フォントserif(明朝体)で表すタグを書き込んでみました。

そしてこのHTMLファイルブラウザソフトに読み込ませると……、

ブラウザソフトに読み込ませた画像

お!出来ましたね『ここに文字が入ります。』明朝体で表示されました。


 あらかじめ『肉にだけ揉みこんでおいた』ため、

それ以外にオイスターソースの味は絡みません。つまりこの方法では、タグを打ち込んだ要素(この場合は<p>タグ)にしか機能しません。

続いて……


その2

HTMLのheadタグの中にstyleタグを作りCSSを書き込む。

(炒めている途中でオイスターソースを加える。)


<!DOCTYPE html>

<html>

<head>

<style>

p{

font-family:serif;color:red;

}

</style>

</head>

<body>

<p>

『ここに文字が入ります。』

</p>

</body>

</html>

今度は文を明朝体で、さらに赤くしてみます。


p{

font-family:serif;color:red;

}


ブラウザソフトに読み込ませた画像》

お!出来ましたね。『ここに文字が入ります。』明朝体で、さらに赤く表示されました。

 このやり方はその他の条件(例えば、<h2>など)も別のプロパティで指定すると、その条件に当てはまる文字だけに反映させることが出来ます。


 炒めている途中にオイスターソースを入れる事で、具材を指定して味付けることが出来ます。

続いて……


その3

CSSファイルを作ってHTMLのheadタグに読み込ませる。

(料理の仕上げにオイスターソースを絡める。)



『test.css』


@charset”UTF-8“;

p{

font-family:serif;
color:blue;
font-size:30px;
}


『HTML』


<!DOCTYPE html>

<html>

<head>

<link rel=”stylesheet” href=”test.css”>

</head>

<body>

<p>

『ここに文字が入ります。』

</p>

</body>

</html>

 まずはHTMLに読み込ませるCSSファイルを作成します。ファイル『文章作成ソフト』で作成します。

 以前にも書きましたが、CSSとは料理ではなく、

妙味を添えるための調味ソース

なのです。

 だからまず『これは料理ではなくて調味料ですからね、そのまま舐めないでね』宣言しなければなりません。


そのために、まず一列目に以下のように記入します。


@charset”UTF-8“;


これは『この文はUTF-8 形式で記入されています』という宣言です。これで様々な環境での文字化けを防ぐわけですね。


 この後にCSSが続きます。


今回は、<p>タグ『ここに文字が入ります。』を、


フォント明朝体にして、

青色にして、

文字のサイズ30px

にしなさい。


という指示を書いてみましょう。


@charset”UTF-8“;

p{

font-family:serif;

color:blue;

font-size:30px;

}


書けたらファイルを ctrl + S で保存します。拡張子は『.CSS』で。

文章作成ソフトは『サクラエディタ』です。

ファイル名は仮に『test.css』としておきます。



これが『CSSファイル』になります。

注目!

CSSファイルはデスクトップに仮フォルダというフォルダを作って保存しておいてください。


<link rel=”stylesheet” href=”ファイル名.css”>


 この<link rel>タグは、ファイルを読み込む事を指示するHTMLタグです。以下に続いているのはその詳細です。


link rel=・・・『これから読み込むファイルは……』

“stylesheet”・・・『スタイルシートという形式で。』

href=・・・『そのスタイルシートは……』

“test.css”・・・『”test.css”という名前です。』


という意味です。このタグ

HTMLheadタグの中に書き込みます。


●ファイルの階層問題●


先程、

注目!

『CSSファイルはデスクトップに仮フォルダを作って保存しておいてください。』

と言いましたが、それは、HTMLファイルCSSファイル同じ階層にしたかったためです。

 同じ階層にしないとHTMLファイル名を指定しただけではそのファイルを読み込むことが出来ません。

 この『階層』というのはロシアのお土産として有名な、マトリョーシカ人形の様な構造を想像してください。

フォルダの中にフォルダがあってまたその中にフォルダがあって……。

まあ、とにかく……、

 同じフォルダなら同じ階層

という事ですね。ですからこれから作るHTMLファイルもこの同じ『仮フォルダ』に入れたいと思います。


やり方はこれまで通り、headタグに上記の

<link rel=”stylesheet” href=”test.css”>

を書き込んで、ctrl  + s で保存します。

『文章作成ソフト』はサクラエディタです。

そしてHTMLファイルブラウザソフトで読み込むと……。

HTMLファイルを読み込んだところ。

お!出来ましたね。ちゃんと明朝体で、青くて、30pxになってます。


最後にサッと絡めるオイスターソースは正に味の決め手。いろんなソース(条件)を絶妙にブレンドして、『スペシャルソース』に仕上げましょう!


こんな感じになります。