月別: 2021年8月

★ターゲット：ウェブ制作を極めたい人

ホーホーホウ！どうも！アホウごんしです！今回は前回に引き続き、ウェブ制作の専門家をともに目指すべく、知識を授けたいと思います！

(1)リンクを設置する

ホームページの便利なとこといえば、リンクを設置して他のページの紹介や、同じページ内でもシュッと移動できるリンクを設置できるという点があります。

●<a href=”（URL名）“>〇</a>

これは簡単！〇の部分にリンクを設置したい文字や画像を入れ、URL名をリンク先開いてコピペすれば簡単に作成できちゃうぞ！

●<a href=”#〇”>（リンク元）</a>（～リンク元からリンク先まで～）<h2 id=”〇”>（リンク先）</h2>

これは同じページ内で、ページの上の方から下の方にジャンプさせたいときに使います。だって、ページが縦に長いと、スクロールするの大変じゃないですか？しかしリンク元を目次として設定すれば、リンク元の文字をクリックすれば一気に読みたいページまで飛ぶように設定することができるというわけだす。

〇の部分には適当な記号を入れますが、<a href=”〇”>と<h2 id=”〇”>に入れる文字は同じ記号を設定しないと意味がありません。123でもaaaでもなんでもいいです。複数の内部ページ内リンクを設定したい場合は、違う記号を使います。

(2)太字の文字の背景に色や画像を入れる

CSS（修飾する言語）の1つですな。タイトルを強調したいときは、文字をでっかくして太字にし、さらに色や画像を背景にすれば目立たせることができます！

●<b style=”background-color:〇”>（文字）</b>

上記コードですと太字の背景に色をつけることができます。〇の中に色を意味する#から始まる7文字の記号を入れます。

●<b style=”background-image:url(HTMLファイル名/画像名);”>（文字）</b>

上記コードですと太字の背景に画像を入れることができます。urlの後の（）の中に、パソコンに保存されたHTMLファイル名/画像の名前を入れると挿入できます。画像は拡張子（jpgなど）は忘れないように！

(3)ページの背景に色や画像をつける

●<td style=”background-color:〇;”>（テーブル内コンテンツ）</td>

<td>とはテーブルのことで、ページの特定の枠を指します。この枠内の背景色として上記コードを書き込むことで、背景の色を指定することができまっす！…まあ、でも見やすいのは結局、白背景に黒文字か、黒背景に白文字かになるかと思いますが(笑)

●<td style=”background-image:url(HTMLファイル名/画像名);”>（テーブル内コンテンツ）</td>

そろそろ仕組みが分かってきましたか？書き方は太字の背景に画像を入れるやり方とほとんど同じですな！

(4)GIF動画を挿入する

●<img src=”（HTMLファイル名）/（GIFファイルの名前：〇.gif）”>

静的なサイトもいいですが、動画を入れたらページに動きが生まれ、華が出るでしょう。手軽にかつ、重くならないように動画を入れる方法として、GIF動画というものがございます。GIF動画とは、複数の画像素材を組み合わせて動画にしたものだす。

サイトのページのタグでは、画像と同じく<img src=””>で指定します。GIF動画はホームページビルダー付属のウェブアニメーターや、Adobe Premiere proなどで作成できますよ！

『これから学ぶHTML/CSS Kindle版』：斎藤新三、山田祥寛

電子書籍として読める、ウェブプログラミング入門書！ウェブプログラマーの視点で書かれた、ウェブシステムを理解するための本です。テーブル表示、リンクやコンテンツ埋め込み、CSS、レスポンシブレイアウトまで、詳しく書いてあるので初心者の方はぜひ！

★ターゲット：ウェブ制作で生きていきたい人

わははのは。私はコウキ・ハローワーク。私は救いたい！才能があるのにそれを活かせず、殻に閉じこもったままのあなたを！このご時世、ひきこもりのあなたでも、勉強さえすれば手に職つけて活躍できる職業があります。それはズバリ、ウェブ制作！プログラミング！

というわけで、今回は、ウェブ制作で生きていくための初歩編、HTMLとCSSというものの簡単な講座をしたいと思います。

HTMLやCSSはサイトを作るうえで基本となるウェブ言語のことなので、まずはこれから勉強しましょう。ウェブを開発するにあたって、人間の皆さんがインターネットで閲覧できるようにサーバーにアップロードするには、コンピューターに適切に指示を与えなければなりません。それは人の言葉とは若干異なり、英語や記号、数字を主体とした言語になります。例えば…

(1)文字のサイズや太さなどを指定する

●<font size=”〇”>（文章）</font>

これは文字のサイズを指定するコードですな。〇の部分に4とか5の数字を入れると、（文章）の部分に入れた文字のサイズを指定できるというものになります。

●<b>（文章）</b>

これは文字を太字にしたいときに使います。

●（文章1）<br>（文章2）

これを入れると、文章1と文章2を区切って改行ができます！改行は見やすくするために必須ですね！！

(2)文字の色を指定する

文字は黒が基本ですが、背景を黒くして文字を白くしたり、教科書でよく見るように重要なキーワードを赤くするなど、適度に変えれた方が読みやすくなりますよね！ウェブの世界では、文字の色を指定する場合#から始まる、合計7文字で色を指定します。まずコーディングは<font COLOR=”〇”>と書き、〇の部分に色のコードを入れます。例えば…

・#000000＝黒

・#ffffff＝白

・#ff0000＝赤

・#0000ff＝青

・#b0ffff＝薄い水色

という具合に、無限に近いパターンで細かく指定できます！！

(3)画像を挿入する

文字だけのサイトでは華やかさにに欠けますよね！というわけで、画像を挿入したい！ってなったときに、たいていホームページ作成ソフトではツールがあれば簡単にできちゃいますが、どのようなHTMLコードで構成されているかは知っておいたほうがいいです！ズバリ、下記のようなコードになりまっす！

<img src=”file:///C:/（HTMLファイル名）/（画像の名前）”width”〇”height=”〇”border=”〇”>

これ見てもなんのこっちゃ…て思うかもしれませんが、難しく考える必要はありません。要は、自分が操作してるパソコンのどこからその画像を引っ張ってきたのか、その画像のサイズはどうなのかというのを指定したものです。

上記の場合、「C:」というのはパソコンの中にある「Cドライブ」というハードディスクの中にあることを指します。HTMLファイルは自身のWEBサイトのデータが格納されているファイルのことですね。ファイル名は自分で決めます。画像の名前も自分で決めます。まずはHTMLファイル内に画像を入れておきましょう。

次のwidth、height、borderというのは画像のサイズを指定するもので、引っ張ってきた画像ですから、サイズは最初から決まってます。挿入後サイズを変えることもできます。

・width=横の長さ

・height=縦の長さ

・border=外枠の太さ

になります。borderについては0でも問題ありません。

『これから学ぶHTML/CSS Kindle版』：斎藤新三

ウェブプログラマーによって書かれた、HTMLとCSSの初心者向けの本です！しっかり学びたいなら、本を買ってじっくり学んだ方がよいです。ウェブの仕組みからチャプターごとにテーブル表示タグ、リンクやコンテンツ埋め込みタグなど、詳しく解説していますので是非！全部で448ページあり、Kindle本なのでKindleアプリダウンロードしておけばいつでもどこでも読めます！！

★ターゲット：転職したいがフンギリつかない人

ウヌヌヌ…私は虚空ウルフ。私もいい歳だ。そろそろ自分だけの特殊スキルを活かし、将来性のある職場に転職したいと考えている…今の職場は有給も自由にとれてそこそこ楽はでき、趣味（副業）と両立できるのはいいのだが、いかんせん副業の収入が中々低すぎてあてにならん…

というわけで次の職場はこの歳で、かつジジイになっても働けるような最後の砦にしたいと考えているのだが、未来を決める重要なことなので中々決断ができない…というわけで、同じ悩みを抱える諸君らのためにも、ある程度歳を食ってからでも働けそうな立派な仕事と、対策を紹介しようと思う。

(1)プログラマー:平均年収約450万円

これはいわずもがな、近年需要が非常に高まっており、人手が足りてないされるIT業界の象徴とされる職業だ。給料相場的には問題なく、専門的職業のため実力さえあれば爺さん婆さんになっても働ける。しかもプログラマーという響きがかっこよく恥ずかしくない。ただし、未経験で誰でもできるかというと、そんなことはない。ある程度は事前にプログラミングの勉強が必要になる。

プログラミングとは何かというと、コンピューターに対して指示を与え、適切に動作させる技術のことだ。人の言葉とは違い、プログラミング言語というものを用いる。しかし宇宙語のような文字を使うわけではなく、構成される文字は半角の英語、記号、数字になる。プログラミング言語にもいくつか種類があり、WEBサイト構築やアプリ開発、ゲーム開発など、用途によって適切な言語を使い分ける必要がある。

プログラマーはこのプログラミング言語を使って、動的なWEBサイトを作ったり、アプリやゲームなどを開発する役割を背負うわけだ。とっつきにくい分、覚えてさえしまえば重宝されることだろう。

例えばあなたがすでにWEBサイトを運営していたり、アプリやゲームを作りたいという欲求があるならば、プログラミングは切っても切り離せない要素なので、挑戦してみる価値はあるだろう。プログラミングスクールというプログラミングを教える学校が流行っているが、費用がすごいし、この歳になって…という人は独学でも全然OK！プログラミングについて書いてある本を買って勉強すればいい。最近はAmazon Kindleなどで電子書籍として手軽に本をダウンロードして読めるので、わざわざ本屋に出向く必要もない。JavaScriptやPHP、C言語など、自分が勉強したい言語についての本で学んでみよう。

(2)弁護士：平均年収約1000万円

意外かと思うかもしれないが、弁護士は公務員ではない。よって公務員試験に受けるための年齢上限である、30歳を超えてからでも目指すことが可能。しかも社会的に尊敬される職業であるため、法律や正義に興味のある人は弁護士を目指してみるのもいいだろう。

弁護士になるには言わずもがな、司法試験に合格する必要がある。司法試験を受けるには事前に司法試験予備試験に合格しておかなければならない。前述の通り司法試験を受けるのに年齢制限はない。司法試験に合格すれば「法曹資格」を得ることができ、その後地域の弁護士会に入会して「日本弁護士連合会」に登録することではじめて業務を行うことができるようになるのだ。

『確かな力が身につくJavaScript超入門』：狩野祐東

※祐東＝すけはる

前述の通りプログラマーになりたいなら、プログラミング言語に関する専門知識が必要だ。プログラミングにかんしては、ネットで無料でちょろっと調べて理解できるような生半可なものでは決してない。私がおすすめするのは電子書籍で学ぶという方法だ。Amazon Kindleのアプリ（無料）をダウンロードすれば、最初の数ページ無料で試し読みができるので、内容が良さそうだったら買ってじっくり見てみよう。ここで紹介しているのはウェブ系プログラミング言語である「JavaScript」だが、あなたが興味のあるプログラミング言語の名前で検索してみるとよい。