Webサイト専門プログラマの言いたい放題

元システムエンジニアがサイト制作とプログラミングについて好き放題しゃべります。

【プロから学ぶべきは「着眼点」である】

f:id:wp-lesson:20170508084851j:plain

ドラえもんの名言のひとつに
こういうのがあります。
 
~~~~~~~~~~~~~~~
人にできて、きみだけにできない
なんてことあるもんか。
~~~~~~~~~~~~~~~
 
いい言葉ですよね。
 
f:id:wp-lesson:20170508085016j:plain

今すぐにはできないことでも、
どうすれば克服できるかがわかれば
本人の努力次第でできるようになる。
 
考えてもみれば、天才なんてのは
ほんの一握りしかいなくて、
 
ほとんどは長年の経験や専門性の
違いや努力の質と量による差だと
思います。
 
だから、その分野のプロから学ぶ
ことに意義があるんですよね。
 
一人で迷走するよりも効率的に、
正しい順路を示してもらえるので、
 
本当なら何日も何ヶ月も何年も
かかってできるようになることが、
 
たった数回、数時間でポイントを
つかむことができるわけです。
 
いま直面している問題を解決する
だけなら、それで良いでしょう。
 
でも、仕事として必要なスキルを
身に付けることが目的の場合は、
 
この先もきっと、何度も何度も
解決できない壁に突き当たります。
 
そのとき重要なのは、
 
『解決の糸口をどれだけ発想できるか?』
 
だと思います。
 
手駒が多いほうが、
解決の確率が上がりますからね。
 
そのためには、
 
個別具体的なノウハウではなく、
体系化された知識がモノを言います。
 
=================
プロと初心者の違い
=================

 
プロは、長年の経験から、
たくさんの場面に共通する
『本質』を知っています。
 
一見して別々に見える場面でも、
 
「根本的にはここが同じだ」
「だから、この方法が通用するはずだ」
 
という方針を元に、
進んでいくことができるわけです。
 
だから、
 
自力で解決までたどり着けます。
 
これがプロと初心者の違いだと思います。
 
経験が少ないうちは、どうしても
個別具体的な側面に目が向くので、
 
『本質』
 
に触れる機会が少ないです。
 
教える側も、目の前の行き詰まりを
解決してあげることがゴールだと
決め込んでしまうと、『本質』に
気付くチャンスを提供することなく
終わってしまいます。
 
かといって、教える人だけが
『本質』にこだわっていても、
教わる人にその気がなければ
伝わりません。
 
では、教わる人はどういう心構えを
するのがよいのでしょうか?
 
1つ確実に言えることは、
 
『教わったことを自分なりに
 噛み砕いて行動に移すこと。』

 
です。
 
なんて偉そうに言ってますが
当たり前のことですよね。
 
なにごとも、見聞きしただけで
身に付くほど甘くはありません。
 
仕事のスキルもそうですし、
学校の勉強もそうです。
趣味の習い事もそうです。
 
例題や模範解答、
先輩や先生のやり方を見て、
 
実際に自分でやってみること。
 
そうすることによってはじめて、
 
「あれはこういうことだったんだ」
 
という気付きを得ることができます。
 
この気付きこそ、
『本質』に近づく一歩なのです。
 
プロはその経験を積み重ねて
スキルを身に付けているので、
 
結局のところ、初心者もプロが
やってきたことと同じことを
辿らなければならないのです。
 
ただし、その道のりを大幅に
ショートカットできなければ
プロに学ぶ意味がありません。
 
=================
プロから学ぶ最強のスキルとは?
=================

 
目の前の課題や問題と向き合うとき、
プロと同じ観点を持つことです。
 
言い換えると、
 
『プロの考え方を感じ取って学ぶ』
 
そうすれば、プロと同じ道筋を通って
途中で道に迷いながらも解決に辿り着く
ことができるでしょう。
 
「え!そんなの無理です!」
 
確かにそうですよね。
 
すごくハードルが高いことだと思います。
 
でも、ポイントを押さえれば
学び取ることは可能なんです。
 
それは、
 
『なぜそう考えるのですか?』
 
という、【理由・着眼点】に注目して
教わっているとき感じた疑問を
その場で質問することです。
 
つい先日まで、10数回にわたって
ワードプレスを学ばれた生徒さんが
まさにそういうスタンスでした。
 
マンツーマンレッスンなので、
 
私が実演しながら解説をする

生徒さんもその場で手を動かす

そのとき感じた疑問を質問する
 
というサイクルを毎回のレッスンの中で
何度も何度も繰り返すことができます。
 
その積み重ねによって、
 
「この場合はこのように考えるんだ」
「その理由はこうだからだ」
 
という、考え方の筋道のようなものが
知らず知らずのうちに身に付きます。
 
プロが行う手順や、
プロの着眼点を、
 
(言葉は悪いですが)盗み取る
 
と言い換えても良いと思います。
 
 
 
長文にお付き合いくださいまして
ありがとうございました。
 

PR

CODEMYのマンツーマンレッスンでは、WordPress
HTML5やCSS3を基礎からしっかり学びたい方のために、
コース学習の中でカリキュラムをご提案致します。
 
▼無料相談をお気軽にご利用ください。
http://codemy-lesson.office-ing.net/contact
 
━━━━━━━━━━━━━━━━━━
講師が執筆した本が発売されました
━━━━━━━━━━━━━━━━━━
 
WordPressのツボとコツがゼッタイにわかる本』
 
Amazonで概要を見る
http://amzn.to/2nd7Ia5
 
『ホームページ作成のツボとコツがゼッタイにわかる本』
 
Amazonで概要を見る
http://amzn.to/2bXJkbs
 
━━━━━━━━━━━━━━━━━━
CODEMYのオンラインレッスン
━━━━━━━━━━━━━━━━━━
 
【1】自宅でマンツーマンレッスン
http://codemy-lesson.office-ing.net/
知りたいことだけ学べる個人レッスンです。
 
【2】動画と個別添削のプログラミング講座
http://bit.ly/2h7ZeRJ
 
HTML/CSS/JavaScriptの基本が身に付くレッスンです。
↓無料体験はこちら
http://bit.ly/2hw7mIy

【動画講座JavaScript編|受講生の感想】

f:id:wp-lesson:20170508084636j:plain

JavaScript編を受講されている生徒さんから
講座への感想をいただきました。
 
~~~~~~~~~~~~~~
プログラムをデバッグする方法というのは
その概念も知りませんでしたし、
ネットや書籍では独学が難しいので、
とてもためになりました。
 
こういう素人が気づかなくて
独学が難しい実践的な技術を
これからも配信していただきたいです。
~~~~~~~~~~~~~~
 
CODEMYの動画講座では、
HTML・CSSJavaScriptの基本が学べますが、
 
ネットに載っている「書き方」だけでなく、
ネットに載っていない「考え方」や、
実用のプログラムが作れるために必要な
「ネットでは得られない着眼点、ノウハウ」
に触れることができます。
 
↓無料体験はこちら
http://bit.ly/2hw7mIy

PR

CODEMYのマンツーマンレッスンでは、WordPress
HTML5やCSS3を基礎からしっかり学びたい方のために、
コース学習の中でカリキュラムをご提案致します。
 
▼無料相談をお気軽にご利用ください。
http://codemy-lesson.office-ing.net/contact
 
━━━━━━━━━━━━━━━━━━
講師が執筆した本が発売されました
━━━━━━━━━━━━━━━━━━
 
WordPressのツボとコツがゼッタイにわかる本』
 
Amazonで概要を見る
http://amzn.to/2nd7Ia5
 
『ホームページ作成のツボとコツがゼッタイにわかる本』
 
Amazonで概要を見る
http://amzn.to/2bXJkbs
 
━━━━━━━━━━━━━━━━━━
CODEMYのオンラインレッスン
━━━━━━━━━━━━━━━━━━
 
【1】自宅でマンツーマンレッスン
http://codemy-lesson.office-ing.net/
知りたいことだけ学べる個人レッスンです。
 
【2】動画と個別添削のプログラミング講座
http://bit.ly/2h7ZeRJ
 
HTML/CSS/JavaScriptの基本が身に付くレッスンです。
↓無料体験はこちら
http://bit.ly/2hw7mIy

【WordPressでモバイル対応のページを作る方法】

f:id:wp-lesson:20170508084426j:plain

今日のレッスンでは、
 
ページビルダー系のプラグインの使い方と、
カスタムテンプレートの作り方
 
をお教えしました。
 
WordPressにはモバイル対応済みのテーマが多いので、
レスポンシブ対応のページが簡単に作れそうに思えます。
 
しかし、実際はそんな甘くありません。
 
WordPressの編集画面にはビジュアルモードがあるので、
HTMLやCSSの知識がなくても写真や文章を載せることは
簡単にできます。
 
でも、
 
『写真を左に配置して、右側に文章を載せたい。』
 
とか、
 
『写真を横に3つ等間隔で並べたい。』
 
というように、単純な縦並びではないレイアウトに
しようと思うと、タグの知識がなければできません。
 
少しHTMLのタグをご存知の方なら、
テーブルタグを使えば表のような配置ができるので、
 
「TablePress」など、テーブルタグを簡単に挿入できる
プラグインを使うことを思いつくかもしれません。
 
しかし、それだけではレスポンシブにはなりません。
 
そもそも、レスポンシブにするためには、
ブラウザの横幅に応じてコンテンツを横並びから縦並びに
変更するためのスタイルシートCSS)が不可欠です。
 
そこで、
 
レスポンシブなスタイルシートがセットになった、
ページビルダー系のプラグインが役立ちます。
 
「TablePress」はテーブルタグ限定ですが、
ページビルダーはブロック状のセルの中にコンテンツを
入れ込むという作り方ができるので、
 
・フルスクリーンのスライドショー
・写真
・動画
アコーディオン、タブ
 
など、いろんなパーツ(部品)を自由に選んで
セルの中に当てはめるだけで、
レイアウトが崩れないページを作ることができます。

PR

CODEMYのマンツーマンレッスンでは、WordPress
HTML5やCSS3を基礎からしっかり学びたい方のために、
コース学習の中でカリキュラムをご提案致します。
 
▼無料相談をお気軽にご利用ください。
http://codemy-lesson.office-ing.net/contact
 
━━━━━━━━━━━━━━━━━━
講師が執筆した本が発売されました
━━━━━━━━━━━━━━━━━━
 
WordPressのツボとコツがゼッタイにわかる本』
 
Amazonで概要を見る
http://amzn.to/2nd7Ia5
 
『ホームページ作成のツボとコツがゼッタイにわかる本』
 
Amazonで概要を見る
http://amzn.to/2bXJkbs
 
━━━━━━━━━━━━━━━━━━
CODEMYのオンラインレッスン
━━━━━━━━━━━━━━━━━━
 
【1】自宅でマンツーマンレッスン
http://codemy-lesson.office-ing.net/
知りたいことだけ学べる個人レッスンです。
 
【2】動画と個別添削のプログラミング講座
http://bit.ly/2h7ZeRJ
 
HTML/CSS/JavaScriptの基本が身に付くレッスンです。
↓無料体験はこちら
http://bit.ly/2hw7mIy

【HTMLをWordPressへ載せ替えるサポート】

f:id:wp-lesson:20170504165057j:plain

とある公共機関のホームページを
WordPressに載せ替えるサポートを
レッスンとして行っています。
 
レンタルサーバーの選び方や、
サーバー会社に事前確認すべき内容、
 
WordPressのインストール方法、
初期設定で気を付けるべきポイント、
 
などを初回レッスンでアドバイスし、
その後は生徒さんが行き詰ったときや、
解決できない疑問が出てきたときに
ピンポイントでレッスンをしています。

PR

CODEMYのマンツーマンレッスンでは、WordPress
HTML5やCSS3を基礎からしっかり学びたい方のために、
コース学習の中でカリキュラムをご提案致します。
 
▼無料相談をお気軽にご利用ください。
http://codemy-lesson.office-ing.net/contact
 
━━━━━━━━━━━━━━━━━━
講師が執筆した本が発売されました
━━━━━━━━━━━━━━━━━━
 
WordPressのツボとコツがゼッタイにわかる本』
 
Amazonで概要を見る
http://amzn.to/2nd7Ia5
 
『ホームページ作成のツボとコツがゼッタイにわかる本』
 
Amazonで概要を見る
http://amzn.to/2bXJkbs
 
━━━━━━━━━━━━━━━━━━
CODEMYのオンラインレッスン
━━━━━━━━━━━━━━━━━━
 
【1】自宅でマンツーマンレッスン
http://codemy-lesson.office-ing.net/
知りたいことだけ学べる個人レッスンです。
 
【2】動画と個別添削のプログラミング講座
http://bit.ly/2h7ZeRJ
 
HTML/CSS/JavaScriptの基本が身に付くレッスンです。
↓無料体験はこちら
http://bit.ly/2hw7mIy

【ウェブページで外部のリソースを借りるには?】

f:id:wp-lesson:20170504164819p:plain

添付のようなアイコンは、
画像として配布されているものもあれば、
ウェブフォントとして配布されているもの
もあります。
 
画像の場合は、色が変更できませんし、
CSSで大きさを変更するため引き伸ばすと
画像がひどく荒れてしまいます。
 
しかしウェブフォントの場合は、
「あ」や「漢」のように、1つ1つの
アイコンが文字として登録されているので、
 
CSSで色を変更することもできますし、
CSSで大きさを変えても荒れません。
 
特に、画像ソフトを使わなくても
自分のサイトにアイコンを設置できる
手軽さは最大のメリットだと思います。
 
さて、
 
このようなウェブフォントは、
WordPressをインストールしただけで
自動的に組み込まれたりはしません。
 
テーマの中には、
Googleフォントなど無料のフォントが
あらかじめ組み込まれているものも
ありますが、
 
基本的には、フォントのデータは
WordPressの中にはありませんから、
ネット上にある外部リソースを借りる
という形を取ります。
 
Googleフォントも
その他のウェブフォントも、
 
フォントのデータファイルがネット上に
公開されているなら直接リンクを張り、
そうでなければデータをダウンロードして
自分のサイトが置いてあるサーバーに
アップロードして、そこにリンクさせる
ことになります。
 
いずれにしても、
 
ウェブページに外部のリソースを組み込むには、
HTMLに何らかの記述を追加して、
 
ブラウザに
 
「このリソースを使いたいから、
 読み込んでくださいね」
 
という指示をしなければなりません。
 
CSSで提供されているウェブフォントなら、

<link href="...." rel="stylesheet">

 
をHTMLに組み込むことになります。

Googleフォントの例
f:id:wp-lesson:20170504164759p:plain
 
それがWordPressだろうと、
普通のHTMLでできたサイトだろうと、
ECサイトだろうと、
 
ブラウザで表示されるページならば、
全て事情は同じです。

PR

CODEMYのマンツーマンレッスンでは、WordPress
HTML5やCSS3を基礎からしっかり学びたい方のために、
コース学習の中でカリキュラムをご提案致します。
 
▼無料相談をお気軽にご利用ください。
http://codemy-lesson.office-ing.net/contact
 
━━━━━━━━━━━━━━━━━━
講師が執筆した本が発売されました
━━━━━━━━━━━━━━━━━━
 
WordPressのツボとコツがゼッタイにわかる本』
 
Amazonで概要を見る
http://amzn.to/2nd7Ia5
 
『ホームページ作成のツボとコツがゼッタイにわかる本』
 
Amazonで概要を見る
http://amzn.to/2bXJkbs
 
━━━━━━━━━━━━━━━━━━
CODEMYのオンラインレッスン
━━━━━━━━━━━━━━━━━━
 
【1】自宅でマンツーマンレッスン
http://codemy-lesson.office-ing.net/
知りたいことだけ学べる個人レッスンです。
 
【2】動画と個別添削のプログラミング講座
http://bit.ly/2h7ZeRJ
 
HTML/CSS/JavaScriptの基本が身に付くレッスンです。
↓無料体験はこちら
http://bit.ly/2hw7mIy