fbpx

その1・大まかな形をとる。


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

もくじ



では、描き始めようと思います。

ベース画像

まずはレイヤーの説明から。

レイヤーは下から上に重なって表示されていきます。

この順番はとても重要です。

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

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

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


レイヤーも同じです。


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

背景から始めて、色や形ごとに重ねていくため、細かく描こうとするとその分、

多くのレイヤーが必要となります。


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


レイヤーの大量生産。


この、

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

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

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


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


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


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

名前は『basic』にします。ベースとなる写真は動かす事や加工する事はありませんので、名前を付けて『ロック』しておくと便利です


 『目玉と鍵』のマーク。


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

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

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

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

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

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


虫眼鏡ツール


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

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


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

 この他にも<Ctrl>キーを押しながら、マウスのコロコロをコロコロすると、拡大・縮小が出来ますよ。こっちの方が鳴れたら楽かも……。


ペンツール


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


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

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

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


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

(レイヤーの名前を変更するには、カーソルをレイヤーに当てた状態で右クリックすると『レイヤー名を変更』と言う項目があるので、それをクリックします。)


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

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

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

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


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


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

(カーソルが『始点』と重なると赤くなります)

 そこで最後にもうワンクリックすると線が閉じて黒くなり……。

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


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


拡大図

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


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

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

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

しかし……、


不透明度(%)


フィルの色がこんなに濃いと、元の写真が見えません。元の写真が見えないと、次のレイヤーが描けません。


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

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


不透明度 37.3%

こんな感じです。これなら別のレイヤーで他の部分も確定できますね。


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


その2・レイヤーを重ねていく。

写真の取り込み


写真の取り込み。


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


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


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

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

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


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


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

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


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


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


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

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

クリック。


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

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

(ベジェ曲線)


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



次に、矢印ツール↓

をクリック。

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


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

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


切り抜けました。

(ちょっと曲がってますが、気にしない、気にしない……。)



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


切り抜けました。


その1・大まかな形をとる。


inkscape




INKSCAPE

《第1節・まずは!》

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



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

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



★ ダウンロード&インストール!


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

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



★inkscapeを起動する。


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

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


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


inkscapeの基本画面

写真の取り込み

予備知識ゼロからはじめよう! CSS


《CSSとは・・・文章を『映え』させるための盛り付け??》



CSSとは?


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

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

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


の略です。

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


階層構造を持った!

様式の!

印刷物!


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

 トランプ!

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

52枚の中からこの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

}


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

ボディー{

文字の大きさ15ピクセル文字の色

   }

となります。

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


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

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


body{

font-size:15px;color:red

}


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


いただきます、 ごちそうさま


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

いただきます と、

ごちそうさま です。



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

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

:『コロン』

小さじ1 


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

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

セミコロン』

です。

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

小さじ1醤油大さじ3


CSSHTMLの何処に記入する?★


これが一番重要です!

書き込み方は3つあります。

今からそれを、一番基本的なHTMLを使って説明します。


↓《基本的なHTML》↓


<!DOCTYPE html>

<html lang=”ja”>

<head>

<meta charset=”UTF-8“>

<title>HTMLのページ</title>

</head>

<body>

<p>

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

</p>

</body>

</html>


これが基本的なHTMLなんですが、実際にサイト上に表示されるのは開始のbodyタグ<body>と、閉じのbodyタグ</body>の間に記入したデータだけです。(この場合は『ここに文字が入ります。』だけです。)

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

というゴシック体』で書き込んであります。

これを実際にブラウザソフトに読み込ませてみると

どう表示されるか見てみましょう。


ゴシック体

こんな感じに表示されます。

(文字の色は指定しない場合『黒』で表示されます。)

じゃあこれからこの文を、3つの方法で色々いじってみましょう。


CSSを書き込む3つの方法


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


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

CSSを追記したHTMLをブラウザソフトに読み込ませて実際にその効果を見てみましょう。もし思った効果が見られない場合は、

99%~100%、データの入力ミスです。

どこかに余計な括弧スペース日本語のタグが混ざっていないか確認してみましょう。 

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

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

で紹介します。


その1

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


<!DOCTYPE html>

<html lang=”ja”>

<head>

</head>

<meta charset=”UTF-8“>

<title>HTMLのページ</title>

<body>

<p style=font-family:serif”>

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

</p>

</body>

</html>


今回は<body>タグの中の<p>タグ段落タグ)の中に直接styleタグを書き入れます。styleタグとは、

『HTMLにstyleシートの情報を書き込むためのタグ』

の事です。


<p style=font-family:serif>


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

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

明朝体

お!出来ましたねゴシック体だった『ここに文字が入ります。』明朝体で変更されました。

《ゴシック体》

続いて……


その2

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


<!DOCTYPE html>

<html lang=”ja”>

<head>

<meta charset=”UTF-8“>

<title>HTMLのページ</title>

<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タグに読み込ませる。




@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とは料理ではなく『妙味を添えるための調味ソース』なのです。

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


CSSファイルの作成


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


@charset”UTF-8“;


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


 この後にCSSが続きます。


今回は、『ここに文字が入ります。』を、


フォント明朝体にして、

青色にして、

文字のサイズ30px

にしなさい。


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


@charset”UTF-8“;

p{

font-family:serif;

color:blue;

font-size:30px;

}


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

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

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



これが『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になってます。



こんな感じになります。

保護猫とのまの一言成長記録 2021。9月~10月


10/31(日)

今朝も、左手でアゴちょんちょん攻撃と、顎髭抜き攻撃と、腕の上で香箱座り攻撃によって、きっちり4時に起こされました。ありがとうね。すぐ寝ちゃったけど、もうすぐ早朝ご飯だよ。

10/30(土)

今朝も正確な時間に目覚まし行為、ありがとう。でも寒いから今日も、サッサと二度寝です。

10/28(木)

今朝は着かず離れずな距離で、触れずに気配で起こしてくれました。でもすぐ二度寝。寒いもんね。もうすぐ早朝ご飯だよ。

10/26(火)

寒いのに毎朝起こしに来てくれる。でも寒いから、すぐ二度寝に行くようになった。冬が近いのを感じるエピソード。

10/25(月)

やんわりと、左手で顔ちょんちょん攻撃、で起こしてくれました。やっぱり、左利きなのかな?今は寝てます。いつもより30分ぐらい早いかな……。もうすぐ早朝ご飯だよ。

10/24(日)

日曜日は目覚ましが鳴らないのに、ちゃんと4時過ぎに起こしてくれました。

寒いのにありがとうね。もうすぐ早朝ご飯だよ。兄さんの熱はもう下がったみたい。よかったね。

10/23(土)

今朝は2時半からずっと、胸の上に乗ってたね。新しい起こし方?

重いんだよねぇ、もう6.3kgもあるからさ……。兄さんはやっぱり発熱したね。心配だね。でももう下がったみたいだよ。さっきちょっと起きてたよ。

10/22(金)

今朝は控えめに起こしてくれました。兄さんの二回目のワクチンが気になるのか、すぐに寝室に戻っていきました。今のところ、熱は出てないようだよ。

10/21(木)

今朝も1時間半前から、添い寝、顔ペタ、で徐々に起こしてくれました。ありがとうね。最近朝がますます寒いね。

10/19(火)

今日は二度寝をせず、部屋をウロウロしてます。寒くなってきたからね、誰かの布団に入ってるといいよ。

10/18(月)

今朝も4時に起こしてくれた。最近、桃鉄 で家族が夜更かしするのに付き合って、眠そうに夜更かししてるのに、ちゃんと4時に起こしてくれる。早朝ご飯の後、ちゃんと2度寝するんだよ。

10/17(日)

今朝も4時きっかりに起こしてくれた。散々スリスリして、あっさり二度寝したけど、もうすぐ早朝ご飯だよ~。

10/16(土)

今朝は、あれ? 起きて、水飲んで、また寝ちゃった。もうすぐ早朝ご飯だよ。

10/15(金)

今朝は寒かったのでくっ付いてくれたのが大助かり。暖かかったよ。とのちゃん。今、また寝てます……。

10/14(木)

私が朝、パソコンを出すと、あぁ、もう相手してくれない……とわかるのか、ちょっと離れて香箱座りして、ジッとこっちを見ている。遊びたいんだね。今度早朝、思いっきり遊ぼう!

10/13(水)

今朝も目覚ましのちょっと前に、「髭抜き攻撃」と「左手で顔をちょっと触る攻撃」の

アメとムチで起こしてくれました。寒い朝には、君の暖かさがしみる。

10/12(火)

今朝は何だか、退屈そう。もう眠くはないんだね。

10/11(月)

今朝はちょっとソワソワしてる。早朝ご飯食べて、寝室とリビングを行ったり来たり。

10/10(日)

今朝はまだ起きて来ません。さっきちょっと、鳴き声が聞こえた気がするんだけど……。

10/9(土)

2回目のワクチン接種でやや全身検体気味の私に、今朝は起こしもせずずっと付き添ってくれました。本当に優しいネコです。宝物だよ、とのちゃん。

10/8(金)

今朝はちょっと、水を飲んで、また寝た。おやすみ。

10/7(木)

小さく、短く、ニャ、ニャ、と鳴きながら、ちょっとだけ体に触れて『香箱座り』するという、新しい方法でおこしてくれました。 ありがとう、とのちゃん。

10/6(水)

今日は大人しめに起こしてくれました。早朝ご飯食べて、また寝ました。おやすみ。

10/5(火)

今朝も『髭抜き攻撃』で起こしてくれました。おはよう。水は残ってても必ず朝変えないと、気持ち悪いよね。わかってるよ。

10/4(月)

昨日は予防接種、お疲れさまでした。午後はぐっすり寝てたね。今早朝ご飯食べてます。

10/3(日)

今朝も髭抜き攻撃で起こしてくれました。今日はちゃんと4:30でした。ありがとうね。

10/2(土)

今朝は、『左手そっと添え攻撃』と『髭抜き攻撃』で、3:30に起こされた……。

おはよう、とのチャン。

10/1(金)

台風模様、でもちゃんと起きてきて甘えてくれたね。あんまり雨は降ってません。

今日も家でお留守だね。とのちゃん。

9/30(木)

今日は『胸乗り攻撃』で起こしてくれました。今は座布団の上で、早朝ご飯待ち。

おはよう!とのチャン。

9/29(水)

今朝はちょっと、遠巻きに座ってこっちを見てます。起こしてくれたけどね。ありがとうね。

9/28(火)

今朝も『胸乗り作戦』で起こしてくれました。でも3時半……。

ちょっと、早め

9/27(月)

今朝はゆっくりだね。そうだね、急に寒くなったからね。ゆっくりお休み、とのチャン。

9/26(日)

今日も『胸乗り攻撃』と『髭抜き攻撃』で起こしてくれました。

9/25(土)

今朝は一人で起きて部屋の中をウロウロしてたみたいだね、何してたの?しかし君は、朝しか甘えてくれないねぇ、みんな寝てるから?仕方なし? 消去法? まあ、それでもいいけどね。

9/24(金)

今朝は携帯の電池が無くなってて、目覚ましが鳴らなかった!起こしてくれて本当に助かったよ、とのチャン。ありがとう!

9/23(木)

今日は朝からお母ちゃんにちょっかい出してただろ。寝れないの?

9/22(水)

今朝はちゃんと帝国に起こしてくれました。そしてひとしきり甘えて、今早朝ご飯待ち中。過ごしやすい朝になったね。

9/21(火)

今日は一時間早起きなのに、ちゃんと起こしに来てくれました。でもすぐ寝ちゃった。おやすみ。

9/20(月)

今朝は起こしてくれたね。2:30に……。ちょっと、早いな。

9/19(日)

今日は久々に起こしてくれました。顎髭抜き攻撃で。ピタッとくっ付いてゴロゴロ言わすのは必殺技登録しときます。

9/18(土)

今朝も、まだ起きて来ません。台風だしね、寝てな。おやすみ。

9/17(金)

今朝もまだ、起きてこず。その前、ちょっと起きてきてたんだけどね、

なんかちょっと、寂しい。

9/16(木)

今朝も、少し後に起きて、水飲んで、また寝た……。寝やすい季節。だね。もうすぐ早朝ご飯が出るよ。

9/15(水)

今日は、まだ起きてこない。いいよ、寝といで。

9/14(火)

今日も、ややゆっくり眼のお目覚め。朝トイレの後、二度寝。おやすみ。

9/13(月)

今日もおはよう。あまりデレデレしてくれず、早朝ご飯食べて、サッサと2度ね。

今日はお兄さんも休みだから、たっぷり遊んでもらいなさい。

9/12 (日)

朝ね、顔を、ちょっと、引っ掻くやつ。あの起こし方は、やさしくていいね。早朝ご飯も、私が起きないと食べずに枕もとにいるけど、いいんだよ。食べに行っても。

9/11(土)

今朝はなんとなくそばに居て、私が起きても暫く布団のところにいたね。急に、久々に暑くなったから、ちょっと疲れてたのかな?でもちゃんと起こしてくれました。ありがとう。とのま。

9/10(金)

フィードマシーンのエサが無くなってたんだね。気が付かなかったよ。ごめんごめん。どおりで2時ぐらいからずっと『髭抜き攻撃』してくるわけだ。お腹が空いてたんだね。ごめんごめん。

9/9(木)

今朝は、一瞬、起きてきたけど、すぐまた寝たね。もうすぐ早朝ご飯だよ。

起きてくる? 寝てる?

9/8(水)

今日の起こし方。爪を立てて、顔を、ちょっと、引っ搔く。その状態でジッとする。

気になって、これも目が覚めるね。いろいろ考えてくれてありがとうね、とのま。

9/7(火)

せっかく起きてきてくれたのに、ワクチンの予約で相手してあげられなかったよ。ごめんな、とのま。

9/6(月)

今日は私の方が先に起きたよ。でも必ず、起きてくれるね。すぐまた寝るけど、

眠い時は、寝てていいんだよ。とのちゃん。

9/5(日)

今朝は窓辺から外を眺めてます。雨なのに……。

ちゃんと起こしてくれました。今日も一日、健康健全でね。

9/4(土)

あれ?起きたけど、水だけ飲んで、また寝ちゃったぞ。

体調は、大丈夫かな?

9/3(金)

今日は、起こしてくれたけど、起きてこない。

やっぱり、わざわざ起こしてくれてるんだね。ありがとうね、とのチャン。

9/2(木)

今朝も起こしてくれた。今日の起こし方は、『体踏み越え起こし』

レパートリーもだんだん増えてきたね。

9/1(水)

今日はまだ起きて来ません。寝てればいいよ。天気もうっとおしい感じだしね。

でも朝はだいぶ、涼しくなってきました。

HTMLファイルをブラウザソフトで読み込む方法


《HTMLファイルをブラウザソフトに読み込ませるには・・・ドラッグ&ドロップ? それだけ??》


 作成したHTMLファイルがちゃんと機能しているかどうか、公開する前に是非、確認したいですよね。


 確認するためにはに HTMLの文字列文章作成ソフト(メモ帳や、サクラエディタなど)コピー&ペーストして、ブラウザソフト 上に ドラッグ & ドロップで完了!!

 え!それだけ?? はい、それだけ。

あ、そうそう……。

その際、前もってファイルの拡張子を『html』に書き直します。

(これは必ず。これを忘れると無視されます……。)


 以上です。簡単でしょ??

ウザい? android グーグルアシスタントを止める方法。(バージョン11編)


《勝手に起動するんだよなぁ……。オーナーとして、ちょっと傷付く。》


OK グーグル

で起動する便利な機能。『グーグルアシスタント』

「先月行ったあの横浜の中華屋さんはなんて名前だっけ?」 とか、「ふわトロオムライスのレシピを見せて」など話し掛けるだけで言葉を理解するAI 機能によって、検索・返答してくれる便利な機能です。しかし意図しないところで勝手に起動したり、あんまり使わない人にとってはなかなか鬱陶しかったりする。そういう人は是非……、


止めちゃいましょう!!

 ところが、『設定』の画面はバージョンによって表示される内容や言葉、構成や項目が違ったりして、初心者にはなかなかうまく設定までたどり着けない。

 だからここでは、androidのバージョン11に特化して、停止方法を紹介します。


まず自分のandroidのバージョンを調べます。それには、


『設定』『デバイス情報』『androidのバージョン』。

もし『11』ならこの方法で止められます!


まず、『設定』⇒『Google(サービスと設定)』と開き、『Googleアプリの設定』クリック。


続いて、『検索、アシスタントと音声』クリック。


続いて、『Googleアシスタント』クリック。


続いて、画面をずーっと下までスクロール。


すると下の方に、『全般』という項目がありますので、これをクリック。


出た!やっと出た!『Googleアシスタント』!このスイッチをオフにします。


これで『Googleアシスタント』は止まりました。ご苦労様でした!!


covid-19 2021 Sep Tokyo japan


9/30(木)

6735 0

6735 218人

3.23%

9/29(水)

7140 107

7247  267人

3.68%

9/28(火)

7003 (8076) 0

7003 (8076) 248人

3.54%(3.07%)

9/27(月)

10640 (12051) 0(87)

10640 (12138) 154人

1.44%(1.26%)

9/26(日)

2086 (2142) 0

2086 (2142) 299人

14.33%(13.95%)

9/25(土)

5745(5865) 0

5745 (5865) 382人

6.64%(6.51%)

9/24(金)

11622(11791) 0

11622(11791) 235人

2.02%(1.99%)

9/23(木)

2129 (2856) 0

2856 531人

24.94%(18.59%)

9/22(水)

7960(9945) 199  

8159 (10144) 537人

6.58%(5.29%)

9/21(火)

10406(11769) 145

10551 (11914) 253人

2.39%(2.12%)

9/20(月)

2673 (2925) 0

2925 302人

11.29%(10.32%)

9/19(日)

2101(2304) 0

2304  565人

26.89%(24.52%)

9/18(土)

5289(5682) 120 

5409(5802) 862人

15.93%(14.85%)

9/17(金)

6315(9609) 240

6555(9849) 782人

11.92%(7.93%)

9/16(木)

7835(9115)388 

8223(9503)831人

10.1%(8.74%)

9/15(水)

7951 (9363) 196

8147(9559) 1052人

12.91%(11.00%)

9/14(火)

10621(11331) 273 

10894(11604) 1004人

9.21%(8.65%)

9/13(月)

12573 (14642) 244

12817 (14886) 611人

4.67%(4.10%)

9/12(日)

2662(2895) 1067人

39.89%(36.85%)

9/11(土)

7051(7342) 151

7202(7493) 1273人

17.67%(16.98%)

9/10(金)

7068(12200) 199 

7267 (12399)1242人

17.09%(10.01%)

9/9(木)

9312(10246) 278 

9590 (10524) 1675人

17.46%(15.91%)

9/8(水)

9070(10637) 169 

9239(10806) 1834人

19.85%(16.97%)

9/7(火)

10587(11705) 456

11043(12161) 1629人

14.75%(13.39%)

9/6(月)

15473(16162) 398 

15871(16560) 968人

6.09%(5.84%)

9/5(日)

2025(2727)

1853人

91.50%(67.95%)

9/4(土)

6,922(8616) 132 

7054(8748) 2362人

33.48%(27.00%)

9/3(金)

8521 (12355) 383

8904 (12738) 2539人

28.51%(19.93%)

9/2(木)

12343(13127) 208

12551 (13335) 3099人

24.69%(23.23%)

9/1(水)

13110(13522) 465

13575(13987) 3168人

23.33%(22.64%)

予備知識ゼロから始めよう! HTML


《HTMLとは・・・炒め物、煮物。ん? ん?? 何の事?》


★head (頭)と body(体)の関係 ★


かの天才彫刻家、ミケランジェロは、代表作『ダビデ象』を足から彫ったと言われていますが……、
我々凡人は
やっぱり頭、そして体の順番ですよね。

HTMLとは・・・(HYPER TEXT MAKEUP LANGUAGE)の略です。ネット上に文章画像を表示するために開発された言語です。しかし、どの言語もそうですが、いきなり取っかかるのはハードルが高い。それぞれ最低限の決まり、ルールがありますからね。それを今から、ザックリと説明してみます。

 HTMLを記述するにはまず、

<!DOCTYPE html>

と記述します。

日本語訳……「初めまして!私はHTMLです!」

この<山括弧>に挟まれた文字列をまず初めに書きます。

これは絶対。

なぜならばこれは旧約聖書で言うところの

『光あれ!』

のようなモノですから。

ここからすべてが始まった!

イメージしてください。 


そして 

<html>『魂』、

<head>『頭』、

<body>『身体』,

の順で記述していき

だんだんその正体を明らかにしていきます。

《絶対ルールその1》

タグはすべてこの山括弧 <>で囲みます。そうしないと表示されません。タグを終了する時には、同じ名前のタグの前にスラッシュを入れて</>で挟みます。その際必ず『英語』で。日本語だと無視されますよ。

じゃあとにかく書いてみましょう。

何でもいいので、文章が書けるソフト(ワードとか、メモ帳とか)で以下の通りに書いてみてください。


<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p>

『初めまして!HTMLでございます。』

</p>

</body>

</html>


これがHTMLの正体です。

ここでは『初めまして!HTMLでこざいます。』という文字を表示するのに必要最少限のタグを表示してみました。

まず、

<html>タグ『魂』に例えました。

頭の先からつま先まで魂は満ちている!

というイメージで。

<!DOCTYPEhtml>の次の行、

文章の一番最初に<html>を書いて、一番最後に閉じタグ</html>を書いて、全体を括ります。

その中に、<head>タグ<body>タグと続きます、ん?

<p>タグというのがありますね。これは段落を入れるタグです。このタグで括ると、その括った部分が一つの段落として表示されます。今の様に1行だけの文章なら大して意味はありませんが、長文になってくると、この<P>タグが、グッと役に立つようになるんです。

あ! 

★タグのアルファベットは、大文字でも小文字でもいいんですが、出来たら統一した方が、なんだか見栄えがいいようです★

Tシャツに、『はじめまして、HTMLです!』と書かれた謎の人物の姿が、うっすら見えてきましたでしょうか??


確かに、これだけでも表示はされますが……、

おや?

よく見ると、<head>タグの中に何もありません。頭が空っぽ……。なんかちょっとカッコ悪い。頭が悪いみたい。

 本当はもっといろいろ<head>タグの中に入れる事が望ましいのです。

例えば、



●headタグの中にtitleタグを入れて サイトのタイトル名を入れたり……,

<head>
<title>HTMLのページ</title>
</head>

★上の様に記入すると、このサイトのタイトルは『HTMLのページ』になり、サイトの上部に表示されます。検索もこのワードでヒットするようになります★


●さらに、同じくheadタグの中に、文字化けを防ぐためのコードを<meta>タグで入れて宣言したり……、

<head>

<meta charset=”UTF-8″>

</head>


★こう記述すると、『このテキストはUTF-8属性で記述してます』と宣言したことになります★

●さらにさらに、<HTML>タグのカッコ内に、使用する言語の種類を宣言する lang=”ja”を入れたり……、

<html lang=”ja”>・・・このHTMLの言語(lang)は、日本語(ja)です。

などの要素があります。

上のタグを全部入れるとHTMLはこう進化します。


<!DOCTYPE html>

<html lang=”ja”>

<head>

<meta charset=”UTF-8“>

<title>HTMLのページ</title>

</head>

<body>

<p>

『初めまして!HTMLでございます。』

</p>

</body>

</html>


 おお! 表示されるのは変わらず『はじめまして!HTMLでございます。』なのですが、<head>タグの中の情報が増えて、より知的な人物の姿が浮かび上がってきました。

飽くまで、イメージですけど……。


タグの種類そりゃあもう数限りなくありますから、その種類と働きについては

TAG-index

さんの方でわかりやすく、端的に、且つ詳しく紹介されていましたので是非ご参照ください。


 じゃあ試しに まず、この上のHTML文章ソフトに書き写してみます。


『メモ帳』に記入。

『ファイル』の『保存』をクリックし、ファイルの拡張子『html』に変更します。(これは絶対に忘れちゃいけませんよ。)

拡張子をhtmlに変更。

そしてこのファイルをブラウザで読み込んでみましょう!

↓↓↓

HTMLファイルをブラウザソフトで読み込む方法


ブラウザソフトの画面。

はい出来た!!

ちゃんと表示されました。されましたが……。


So what!?

(だから何だというんだい?)

そうなんです。HTMLとは文字や画像を表示するための形式、道具

の事であって、

情報(料理)を乗せるプラットホーム(お皿)でしかありません。

実際のサイトの内容の良し悪しは、

情報そのものである事はいうまでもありません!

切って、煮て、焼いて、盛り付けて……、

so what??

ではなく


何を、どう面白く、見易く、興味深く見せるか。魅せるか。

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


厨房(HTML)、食材(情報)、そして料理人(運営者)。この三つが揃ってはじめて料理(サイト)が出来る。味付けはセンス。料理人の感性、フィーリングに任される。調味料(CSSなど)をうまく使って、美味しい料理(有用なサイト)を完成させよう!!

例えられるかもしれません。


CSSとは?