えっ！俺が担当するの？
こんにちは、こちらの学習ページを担当することになった「ジョ～ジpapa」です。
Webデザインは全くのど素人なのでプロとして教える立場ではなく、みんなと一緒に友達感覚で学んでいこうかなと思って書いていきます。
事の起こりは
以下の親子の会話から始まりました。
ジョ～ジ
ちょっと冬の間時間があるので、なんかやってみようと思うんやけど、何したらいいと思う？
（冬以外は家庭菜園を主にやってます）
そうやな～
空き時間で簡単な仕事もできるし、Webデザインでも勉強してみる？
とりあえず、htmlとcssの入門でもやってみたら
おっ！
結構、カッコええやん
これで昭和世代の俺もプログラマーの仲間入りやな
LP作ってみたいから
ちょっくら勉強でもしてみよ
そういう軽いノリで、50代のオヤジがhtmlとcssの入門書を読みながら独学でサクッと勉強してサイト作っていこうと思います。
一応、わかりやすいゴールがあったほうがいいと思うので『ワードプレスで通販商品のLP（ランディングページ）を制作する』を最終目標としてサイトを作ることにしました。
とりあえず「入門編」の本を読んでみる
|
【楽天】1冊ですべて身につくHTML & CSSとWebデザイン入門講座【第2版】 価格: 2585円 |
早速、わかりやすい入門書として『Manaさんの本』をジョ～ジから渡されて、さらに入門講座の新刊も発売されたので、読んどけ～ってことで計５冊あります。
まずは入門講座をサクッと読んでみよう
あかん…
入門書やのに全然わからん（汗）
自分みたいに、独学で本読んでもわからん奴がスクールに通うんやろな～とおもって、ググッて見たら、結構Webデザインのスクールって多いのね。
友達ができるとか、わからんところは先生に聞けるとか、スクールに通うメリットも色々あると思いますが、ぼちぼちやっていく分には独学で十分でしょう。
自分はわからんところ、ジョ～ジに聞きながら進めていきます。
ジョ～ジおらんかったら、既に止めてるかも…
本などで独学は可能やけど、どうしても「スクールに通いねん」っていう人はココに注目してほしいねん
1.副業として案件紹介をしてくれる
２.転職先を紹介してくれる
スクール卒業しても営業の仕方は教えてくれないからな
案件紹介してくれたら学費の元を取れるかもな
なので、1校だけ紹介しとくで
入門書を読むための「入門講座」
自分みたいに、入門書を読んでも全くわからんかった方の為に「入門講座」をやっていきますので、あきらめずに一緒に頑張りましょう。
まあ、ラジオ体操をやる前の準備運動みたいなもんやね。
ですので、何かしらの入門書をご自身で用意してください。
まずは、基礎の基礎を学んでいきましょう。
まずHTMLとは、Webページを作成するためのプログラミング言語のことらしいです。
具体的には、Webサイトを作成する際に、コンピューターへ構成指示を出し、表示したい文章や写真などの情報を形にすること。
では、難しいことは無しにしてHTMLの作りがどのようになっているのかを下図にしました。
入門書のP54のあたり
・ヘッド（head）部分…ここは何やら魔法の呪文のようなもので画面には表示されないところになります。
・ボディー（body）部分…皆さんが日ごろから見ているWebサイトはこの部分に書かれているものになります。
では、例えとして
このヘッドとボディーのところを魔法（ファイヤーボールを撃つ）に置き換えて説明します。
ヘッド（head）とは魔法の呪文詠唱のこと
ヘッドとは、魔法を発動させるための「呪文の詠唱」をするところで、今回はわかりやすく「魔法でファイアーボールを撃つための呪文を詠唱」を例にとって説明します。
まずは宣言！…htmlで魔法を開始する
- <!doctype html>…魔法を使います
- <html lang=”ja”>…日本語で詠唱します
<head>…今から魔法（ファイアーボール）の準備に入ります。
- <meta charset-“UTF-8”>…ちゃんと日本語を間違わずにリスニングしてや～
- <title>○○</title>…○○の部分に「ファイアーボール」（攻撃魔法のこと）
- <meta name=”description” content=”△△△△”>…△△△△の部分に「敵をせん滅するほどの火炎攻撃をする」（ファイアーボールの説明）
</head>…ここで終わります。
ここまでが、魔法発動のための詠唱部分となります。
さらに何か書きたいときは、この詠唱部分に書き込んでやればいいです。
子供の魔法使いが本を見ながら詠唱するならこんな感じかな
日本語で魔法の呪文を詠唱するので間違わないで。
敵をせん滅するほどの火炎攻撃を撃つよ。
炎よ、我が敵を焼き尽くせ。
「ファイアーボール」
お嬢ちゃん
さすがに部屋の中で、ファイアーボールを撃ったらアカンで！
ボディー（body）とは呪文詠唱を具現化したもの
サイト作りで知っておきたいプログラミング言語のこと
・html…画像を貼ったり文字を書くことができる
・css…文字の大きさを変えたり色を付けたり装飾ができる
・javascript…キャラやボタンなどの動きをつけることができる
ただし、最近ではcssのアニメーションで簡単な動きをつけることができるらしいので、今回はjava scriptなしでLPを作っていこうと思っています。
本音は、あんなムズイjavascriptなんて昭和世代の俺が簡単に覚えられるかいっ！
さてさて、ちょっと脱線しましたが下記のような魔法の具現化について書いていきます。
深淵の闇を切り裂くように、一筋の紅い光が点灯した。
それはただの光ではない。
魔法使いの掌から生まれた、破壊の約束された炎の球――ファイアーボールだ。
彼の唱える呪文が空気を震わせると、その球は一気に膨張し、轟音と共に前方へと放たれる。
空気が焼ける音が周囲に響き、球は目にも止まらぬ速さで敵陣へと突き進む。
目標に到達した瞬間、世界が赤く染まる。
轟々とした爆発が魔法の威力を物語り、炎は周囲のすべてを飲み込む。
熱波が四方八方へと広がり、敵はその場で灰と化す。
ファイアーボールはただの火球ではない。
それは、魔法使いの意志を乗せた滅びの使者なのだ。
選ばれし者だけが操ることを許される、圧倒的な力を持つ呪文。
その姿は、見る者すべてに深い畏敬を抱かせるでしょう。
え～
この文章マニアックすぎるやろ！
これやったら、誰でも魔法のイメージできるんちゃう？
俺の想像力は豊かなんやで
以下の青枠（ボディー内）に書いたことが、画面に表示されます。
<body>：ここから魔法を具現化
<p>○○</p>：○○の所にファイアーボールを具体的に文字で表現します。
- ファイヤーボール映像の文章をそのまま書く（文章が長いので書くのやめとく）
</body>：魔法の具現化の終わり
</html>：ここで魔法が終わり（これ重要なので忘れずに）
タグやCSSの説明に関しては、また今度にしましょう
次回、ボディーの中身について図を使って勉強します。
まとめ
Webサイトには、ヘッドとボディーがあることを覚えておきましょう。
・ヘッドとは、画像に映らない呪文のこと ・ボディーとは、画像に映ること
入門書の本が分厚く、内容も詳しく書いてあることは非常いにいいことなんだけど、超初心者が読んでみるといろいろと書かれすぎていて情報量に圧倒されてしまいます。
自分なりに嚙み砕いてやっていきますね。
