CSS | Back Pack Hack-デジタルノマド・キラのブログ

【384人の講習実績】東京で、ホームページ作成（WordPress）Campの講師をしてきました

キラ＠デジタルノマドラボ — Tue, 27 Jun 2017 03:43:46 +0000

WordPress Campの講師をしてきました

こんにちは、キラです。

６月の２４日と２５日、東京にて、ホームページ作成（WordPress）Campの講師をしてきました。

今までこれについて全然書いていなかったので、今回はこの報告などについて書いていこうかと。

ホームページ作成（WordPress）Campとは？

WordPress Campとは、僕が講師をお受けしている仕事の一つです。

主催は、起業家支援を行っている、社団法人festivo。

若手起業家コミュfestivo

festivoは、30代以下の若手が85%を占める、一般社団法人festivoが運営する国内最大の起業家コミュニティです。（中略）

festivoに参加する皆様が、ビジネス上の付き合いだけではなく、ステークホルダーを超えた関係を構築し、ビジネスとは人と人との信頼の上に成り立つことを再認識し、交流から真の信頼関係に基づいた商流を生むような、全国的な起業家の為のネットワーク作りを目指して参ります。

引用：festivo.org

という感じで、起業家向けに、人脈や経験のシェアの他、具体的スキルを付けるための講習も行っているワケです。

そして、その非常勤講師のひとりとして僕も居る、というわけです。

こちらが、今回のイベントのページ。↓

6/24(土)~25(日)festivo ホームページ作成（WordPress） Camp@東京【学生12,000円、一般15,000円】～戦うスキルを身につける15時間！WordPress集中合宿！～

会場は起業家シェアハウス

会場は、x-gardenで行いました。

起業家の集うシェアハウス「x-garden桜台」桜台駅徒歩10分

こちらは、コンセプトシェアハウスの運営を行っている、株式会社彩ファクトリーのシェアハウスの一つですね。

株式会社彩ファクトリー | コンセプトシェアハウスの企画・運営

起業家がいっぱい住んでいる場所なので、セミナールームなども完備しています。

今まで、様々な会場で実施してきましたが、現在東京ではココで実施することがほとんどです。

どんな内容をやるの？

この講座では、土日の２日間、みっちり１５時間使って、

ほぼ素人の状態から、WordPressを使ったウェブサイト、ブログ作成ができるようになるトコロまで持っていきます。

開催回数は、今回で２４回目。

一人ひとりの質問も受けたり、一緒にPCを触っていきながらの対面講座なので、一度に教えられる人数は２０名以下で限定していますが、

それでも、既に３８４名の方が受けてくださってます。

地味に、実績としてちょっと凄くなってきましたw

具体的なカリキュラム

具体的には、以下のような内容を実施しています。

１日目

ウェブサイト＆ブログはどうやってできているのか
WordPressとは何か
サーバーの設定
ドメインの設定
サーバーとドメインの紐付け
WordPressのインストール
ダッシュボードへのログイン
はじめての投稿
いろんな文章のスタイリング
本文に画像を挿入
アイキャッチ（サムネイル）画像付きの投稿
「テーマ」「テンプレート」をインストールと有効化
サイトタイトルの考え方と設定
サイトカラーの考え方と設定
ロゴとファビコンの変更
固定ページの作成
メニューの作成（固定ページから、リンクから、カテゴリから、階層化）
「プラグイン」を使ってお問い合わせフォームを作成
「ビジュアル」と「テキスト」の切り替え（HTMLでYoutube動画＆Instagram写真を挿入）
ショートコードを使って地図などを作成
記事に見出しと目次を作成

２日目

画像の軽量化
FBページをHTMLで挿入
CSSで表のスタイリング
CSSでトップ画像の横幅を変更
セキュリティ、サイト高速化などのプラグイン導入
Googleアナリティクスの導入とアクセス解析
WordPressのSEO設定
ネット広告（アドセンス、アフィリエイト）について

講習の合間のミニコラム

タッチタイプの覚え方
正しい検索の方法について
制作に便利なサイトやサービス、アプリの紹介

などなど。こうやって書くと、かなりボリュームありますね。

もちろん、会ごとの人数やリテラシーの高さによって、アドリブで内容は変えたり微調整したりしますが。

なんでやってるの？

僕自身が、こちらの仕事を継続して行っている理由は以下の３点です。

１，シンプルに、仕事として継続したいから

まあ、まずはこれですね。

自分のスキルに対しての需要があって、それを提供する対価として、しっかりお金を頂く、と。シンプルです。

そしてそれを、地味だけどしっかり継続しています。

もちろんこれは、協業してくださっている方々はもちろん、参加者の方々が居て初めて継続できることです。心より、感謝致します。

２，教えることで自分のスキルも高まるから

これは、やってみてわかったことでした。

人に教えまくることで、自分の「制作スキル」が上がるのはもちろん、「教えるスキル」も抜群に上がりますね。

また、そのコミュニケーションを通して、

「人が、何が分からないと思っているのか、何を欲しがっているのか」も分かるので、

当ブログで書く内容などもブラッシュアップされていきます。

３，festivo代表理事が好きだから（笑）

個人的な内容です（笑）

この講座が始まったキッカケは、festivo代表理事の塚本氏と個人的に繋がったことなのですが、

彼が好きだから続いてる、という部分は間違いなくありますww

仕事は、「何を」「どうやるか」以上に「誰とやるか」もとても大事ですね。

そしてもちろん、講習に参加される方との繋がりもでき、人生が豊かになっていくな、とも感じています。

参加者の声

今回の講座に参加された方々から寄せられたメッセージです。全て、本文まま。

吉良先生の明るく楽しく分かりやすい講座の中で、WordPressに全く触れたことが無かった私ですが、Webの形を整えることが出来ました（＾＾）

完全初心者の私が、ここまでできるようになって、すごく楽しめたのは、吉良先生のおかげです(* ´ ω ` *)

この講座は「一言で自分にとっては最高の講座」でした。

2日間かけて、WORDPRESSについての基礎やSEO対策までしっかりと掴むことができました。学習のペースも丁度良く、不明な点があってもその都度丁寧に教えて頂けたので最高でした。

そして、今後もこの講座に参加した人達との繋がりを大切にしていこうと思います。

私は、この講義を受けるまで、ホームページ作成はおろか、ブログもやっていない、パソコンの講義の4日前に購入した…という完全初心者でした。笑

不安でいっぱいでしたが、先生の教え方がすごく分かりやすく、こんな私でも、作成することができました！！
また、講義後も受講者同士で情報交換したり、先生がSNSで教えてくれたりなど、アフターフォローも万全です！
ですので、何かを初めてみたい、1人で出来るか不安、という方にはとってもオススメです！

べた褒めされると嬉しいですねww

次回は８月

で、次回は８月に東京でやります。

日本で、新しいカメラと三脚の購入、そしてドローンのメンテナンスをしている間にww

興味のある方は参加してみてください。

8/5(土)~6(日)festivo ホームページ作成（WordPress） Camp@東京【学生12,000円、一般15,000円】～戦うスキルを身につける15時間！WordPress集中合宿！～

２９日はSchooのHTML＆CSS講座も

ちなみに、今月末２９日１９時より、オンライン動画学習サービスのスクーで、HTML＆CSSの授業もやります。

ぜひ、見てみてください。

こちらの授業の続編ですね。↓

Schooで「HTMLに一切触れたことがない初心者のための60分」の講師をしました【生放送】

具体的な活動報告についても、全部を書くことは難しいですが、しっかりと書いていきたいなー、と思いますね。面倒くさいけどw

それでは明日も、よい人生とよい旅を。

Schooで「HTMLに一切触れたことがない初心者のための60分」の講師をしました【生放送】

キラ＠デジタルノマドラボ — Wed, 31 May 2017 21:11:37 +0000

HTMLに一切触れたことがない初心者のための60分

先日、株式会社スクーさんに出演依頼を頂いていた、

「HTMLに一切触れたことがない初心者のための60分」の生放送授業が、無事終わりました。

内容は以下のとおり↓

schooのライブ授業に出演します

今回教えた内容

今回は、全くの初心者を対象に、「HTMLとは何か？」から始まり、

基本的なタグ等を中心に「始めてのHTML」を書いてみて「おお、なるほどね楽しい」と終わることを目標としました。

実際やってみると、意外と時間押し押しで、一部「次回に続く」になりましたが！

作成するページ

６０分で、こんな感じの、各自簡単な自己紹介作ってみよう！というのを目標としました。

書くコード

用意したHTMLコードはこんな感じ。

けっこうなボリュームにも見えますが、動画をコピペで挿入したりする所もあるので、かなり初心者向けです。

基本的かつ、理解しやすいタグを中心に教えていきます。



  
    
    
    schooではじめてのHTML
    
    
  
  
	
		自己紹介ページ
	
	
	    基本プロフィール
		    
		    
		    吉良　光（きらこう）
		    

		    世界中を旅して、GoProとドローンで映像を撮っています。
		    

		    世界一周をしながら、旅する１分動画「TR1P（トリップ）を作りました。
		    

		    旅とテクノロジーのブログ「BackPackHack」も書いています。
		    
		 世界一周の旅に持っていったドローン「Mavic Pro」
		    
		 
		 「TR1P（トリップ）」の動画の一例

		
		
		
			
		
		
			
		
		
			
		
		
		
		
			
		
		
			
		
		
		    
		
		
		
	
    
    	このサイトは、KOH_KIRAによって運営されています。

CSSはこんな感じ。今回はHTMLメインなので、CSSはその仕組みだけ触りました。

p{color: blue;}
body{background: #F0F8FF;
     text-align: center;
     }

講習内容のテキスト全文はコチラから。↓

ゼロからマスターするHTML/CSS ・HTMLってなんだ？ HTMLは、Hyer Text Markup Langageの略です。プログラミング言語ではないけれど、（ひらたく言えば）ウェブサイトなどを作るために必要な言語です。「Markup」というのは、直訳すると「印を付ける」みたいな意味で、HTMLは「この文章のここはこういう意味だよ！」という「構造」を定義するわけです。 HTMLは、サイトの「構造」を定義して、CSSは「見た目」を定義します。「何を載せるか」を決めるのがHTML、「どう見せるか」を決めるのがCSS、という感じでしょうか。・今日つくりたいページを見てみよう今回は、皆さんに簡単な自己紹介ページを作ってもらうことで、基本的なHTMLタグや、簡単なCSSについて触れていこうと思います。・HTMLの例を見てみようあるサイトを開いて「ページのソースを表示」をクリックすると、そのウェブサイトのHTMLが見られます。初見では難しいかもしれないけど、このギザギザの記号を覚えていくことで、ウェブサイトが作れるようになるのです。・必要なツールを用意しよう HTMLを学習する上で、必要なツールは２つ。そして今回だけ利用するひとつ。１，ブラウザ→今回は「Google Chrome」を使います。他のものでも問題無いかと思いますが、IEだけはやめておいてください（笑）２，テキストエディタ→今回は「Sublime Text」を使います。３，自己紹介に使えそうな画像や文章→フンワリと用意しておいてください。・HTMLの基礎ータグと属性 HTMLの基礎の基礎！「タグ」と「属性」という言葉を覚えましょう。 HTMLは、基本的に「文章に”構造的な意味”をつける」言語です。ホームページの中で、「ここはタイトルなんだよ」とか「検索結果に出したいのはここだよ」とか「ここは引用文なんだよ」とか。 <タグ>文章これが、基本的なタグの付け方です。そして、そこにさらに、何らかの属性を付けたい場合があります。そんな時は <タグ属性名=値>文章と入れてあげる必要があります。・属性とタグの、実際の例ちょっとわかりにくいので、例をあげます。 Hello World を、

Hello World

で囲むと、「この部分は”文章”なんだよ」という意味になります。（pは「Paragraph（段落）」のpです。）

Hello World

と書いたりすると、「このpで囲んだ部分は、文章で、文字の大きさは16ピクセルなんだよ」という意味になります。このような、タグと属性の基礎を押さえていくことが、HTML/CSSの基礎になります。・はじめてのHTML 新しいファイルを開いて、と書いてみてください。次に、その中にheadタグとbodyタグを書き込みます。これで、「今からHTMLの文章を作るよ」「言語設定は日本語だよ」「ここが基本情報（head）で、ここが（実際に表示される）body部分だよ」と書き込む準備が出来たワケです。タグで囲まれた内容は、「htmlファイルの情報」を宣言するものです。タグの中の内容は、タグを除いて普通はブラウザの画面上に表示されません。で、実際にウェブサイトに表示される内容が<body>タグ内の内容、というワケです。次に、headタグ内にmeta charsetとtitleを入れてみましょう。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>schooではじめてのHTML （メタキャラセット）とは、「文字の種類」を定義しています。文字化けなどをしないようにするための設定ですね。 Shift_JISとかもあるんですが、一般的にはこのutf-8を使うことが多いです。とりあえず入力しておきましょう。 titleタグは、そのまんま、「このウェブサイトのタイトルはこれだよ」と定義してあげるタグですね。次に、bodyタグの中に、以下のように文字を入れてみましょう。 schooではじめてのHTML

はじめてのHTMLだよ！

ここまでできたら、ファイルを保存してみましょう。上の「File」から「Save」か、command（control）+Sを押して保存してみましょう。保存名は「index.html」で。・ブラウザに表示してみよう保存したファイルを、ブラウザにドラッグ＆ドロップしてみましょう。すると、タブの部分にtitleタグ、本文内にpタグの内容がそれぞれ、出てきました！「ページのソースを表示」で見てみると、あなたの書いたHTMLが出てきます。 ※ここまででつまづいてしまっている人にありがちなのは、文字のつづりの間違いや、スペース（空白）の全角/半角が間違っている場合などです。チェックしてみましょう。・HTMLを使って動画を挿入してみようここまでやって「全くおもしろくない…」と思った方も、一部いるかもしれません。（僕も最初思ってました　笑）ここでちょっとだけ「おおー」となってもらうために、ちょっとだけ遊びましょう。 youtubeの動画を開いてください。新しい動画を開いたら、「共有」から「埋め込みコード」を選択。その内容をコピーして、bodyの間に入れてみてください。ファイルを改めて保存して、ブラウザを更新すると、動画がでてきます。 …ちょっとだけ、テンション上がるでしょ？

動画を埋め込んでみよう！

という感じに、コメントも入れてみましょう。これと同じやり方で、Twitterやフェイスブックページなども埋め込んだりできるワケですね。・よく使うタグよく使うタグとして、descriptionタグなどがあります。これは、検索結果などに表示される内容なので、正確に入力する必要があります。 schooではじめてのHTML

はじめてのHTMLだよ！

動画を埋め込んでみよう！

・styleタグを使ってみる（はじめてのCSS） body内に、CSSを書いて見た目を変えられる、styleタグを使ってみましょう。 bodyの中に　　を書き込んでみましょう。全体はこうなります。 schooではじめてのHTML

はじめてのHTMLだよ！

動画を埋め込んでみよう！

　　すると…文字の色が青くなります。・CSSファイルを分けるただ、このstyleタグ、次第にとっても長くなっていく上に、大量のページに同じものを書いたり修正したりするのが大変になってきます。なので、冒頭で述べたように、HTMLファイルとCSSファイルという形で分けて、 head内には、「このCSSファイルを参照するよ！」とだけ書いておくようにします。まずは、さきほどの　p{color: blue}　の部分を切り取って、新しくファイルを作り（command+N）、新しいファイル内に貼り付けます。そのファイルに「mystyle.css」という名前をつけて、index.htmlと同じ場所に保存しましょう。次に、head内に、以下の内容を書き込みます。全体としてはこうなります。 schooではじめてのHTML

はじめてのHTMLだよ！

動画を埋め込んでみよう！

link rel="stylesheet"は、「別ファイルのスタイルシートを呼び出すよ」という意味で、 href="mystyle.css"は、「mystyle.cssという名前のCSSファイルを呼び出すよ」という意味。そして、mystyle.cssに書かれている　p{color: blue}が、index.htmlに適用されるようになるので、結果的に、head内に p{color: blue}を書いたときと同じように、表示されるのです。これがCSSです。サイトの見た目を決めるものですね。基本的な書き方はセレクタ{プロパティ名: 値;} という書き方をします。「この部分について、見た目のココを、こうするよ」という感じでしょうか。「:」は「コロン」「;」は「セミコロン」といって、ちょっと似ていて間違いやすいので、気をつけましょう！ CSSは、これを部分ごとに沢山書いていくだけです。セレクタ{プロパティ名: 値;} セレクタ{プロパティ名: 値;} セレクタ{プロパティ名: 値;} という風に並んでいきます。セレクタ{プロパティ名: 値; プロパティ名: 値;} という風に、一つの項目内に複数のプロパティを並べることも多いです。「見出しについては、文字の色はこう、フォントの種類はこう」という風に。・もうちょっとだけ練習ついでに、mystyle.cssに body{background: #F0F8FF;} とも書き込んでみましょう。これで、背景の色も変わったハズです。このように、カラーはその名前の他、カラーナンバーやRGB値でも指定することができます。さらには、 body{background: #F0F8FF; text-align: center; } という内容もその後に書き込んでみましょう。これで、文章全体が真ん中にきました。このように、CSSとは、サイトの「見た目」を決定する、ということがわかればOKです！・コメントを書き込んでみると書き込むことで、HTML内に好きなコメントを残したりすることができます。せっかくなので、さきほどのHTMLにと書いて、学習メモを残してみましょう。 schooではじめてのHTML

はじめてのHTMLだよ！

動画を埋め込んでみよう！

このコメントは、自分用のメモの他、人とコードを共有する際のメモ書きとして、また、で囲むことで「消したくはない部分を無効化」したりするのにも使います。 ※このコメント部分も、ソースを表示すると、見ることができてしまうので、機密情報や変なことは書かないようにしましょう！ちなみに、CSSのコメントは /*コメント*/ という風に書くことができます。・セクションタグを使ってみようここまでが、HTMLの基礎です。次は実際に、ちょっとしたページを作りながら、いろんなタグを使ってみましょう。今回僕は、自己紹介のページを作ってみようと思います。 HTMLのタグはたくさんあるのですが、今回は（時間も短いので）できるだけシンプル、かつ分かりやすいタグを優先して使っていきましょう。・headerタグと見出し

…

タグ最もよく使われるセクションタグの一つが
タグです。これは、その名の通り、ウェブサイトのヘッダー（頭）の部分に使われます。ウェブサイトのタイトルやロゴ、メニューの部分ですね。の下に

と書いてみましょう。そして、この中にまた書き込みをすると、それがサイトのヘッダーに表示されるわけです。今回はここに
自己紹介ページ
と入れてみました。（
はじめてのHTMLだよ！
　は、消しておきました）
は「見出し１」という意味です。文字を”見出し”として目立たせる時に使います。 h1からh6まで使うことができます。そして、それぞれの見出しにCSSでデザインを割り当てて、文字の大小や周りの色などを調整したりもできます。見出しの例としては、スタイリングして分かりやすくしたこちらを見てみましょう。
マレーシア、クアラルンプールのシンボル「ペトロナス・ツインタワー」を１分で旅しよう
ついでに、
動画を埋め込んでみよう！
の部分も、
世界一周の旅に持っていったドローン「Mavic Pro」
と変えてみました。見出しになります。・footerタグ footerタグも、最もよく使われるセクションタグの一つです。ウェブサイトの一番下に、情報などを載せるタグですね。
このサイトは、KOH_KIRAによって運営されています。
などと、入れてみましょう。これで、全体としては schooではじめてのHTML

自己紹介ページ

このサイトは、@KOH_KIRAによって運営されています。

動画を埋め込んでみよう！
こんな風になり、ヘッダーとフッターができた形になりました。これ以外にも、sectionやarticleなどの細かいセクションタグがあるのですが、ちょっと長くなるのと、今回は使わないので割愛します。・imgタグで画像を入れてみようヘッダーとフッターができたら、次はその間に本文を入れてみましょう。
基本プロフィール
を入れてみます。画像は、index.htmlと同じ場所に入っている画像の名前を、指定してみてください。このままだとデカすぎたりするので、　　　　　width="200" height="200" をimageタグ内に追加して、画像の大きさを指定します。・改行のbrタグ画像を入れることができたら、その下に簡単な自己紹介を入れてみましょう。　　　　　　　
吉良　光（きらこう）世界を旅する１分動画「TR1P（トリップ）を作っています。世界中を旅して、GoProとドローンで映像を撮っています。旅とテクノロジーのブログ「BackPackHack」も書いています。
これだけだと、文章が全て続いた状態で表示されてしまうので、
タグで、「改行」をしてみましょう。
きらこう
世界中を旅して、GoProとドローンで映像を撮っています。
世界一周をしながら、を旅する１分動画「TR1P（トリップ）を作りました。
旅とテクノロジーのブログ「BackPackHack」も書いています。
このbrタグには、閉じタグはありません。ここまでで、全体では、こうなりました。 schooではじめてのHTML

自己紹介ページ

基本プロフィール

吉良　光（きらこう）
世界中を旅して、GoProとドローンで映像を撮っています。
世界一周をしながら、旅する１分動画「TR1P（トリップ）を作りました。
旅とテクノロジーのブログ「BackPackHack」も書いています。

世界一周の旅に持っていったドローン「Mavic Pro」

このサイトは、@KOH_KIRAによって運営されています。
・aタグでリンクを設定しようよく使うタグの一つとして、文章や画像に「リンク」を入れられるaタグというものがあります。今回は、先程の文の中に、リンクを貼ってみましょう。まずは、飛ばしたい先のリンクを用意します。世界を旅する１分動画「TR1P」　https://www.facebook.com/gotr1p/ BackPackHack https://kohkira.com/ そして、リンクを入れたい文字を、それぞれこのように囲みます。世界一周をしながら、旅する１分動画「TR1P（トリップ）を作りました。旅とテクノロジーのブログ「BackPackHack」も書いています。これで、リンク付きの文章が出来上がりました。さらに、最初のリンクだけ、「新しいタブで開くリンク」にしてみましょう。 a href=""の後に target="_blank" を書き足すだけです。こんな風になりました。世界一周をしながら、旅する１分動画「TR1P（トリップ）を作りました。これで、最初のリンクだけ、新しいタブで開くようになりました。試してみてください。・tableタグを使って、項目を並べてみよう次に、tableタグを使って、６つの項目を表のようにキッチリ並べてみましょう。動画の下あたりに

データ1-1 データ1-2 データ1-3

データ2-1 データ2-2 データ2-3
と書き込んでみてください。更新すると、６つに別れた表が出てくると思います。これは、tableタグというものを使って、表を作ったワケです。は「ここから行が始まるよ」は「ここから列が始まるよ」という意味。じーっと眺めて考えると、なんとなく見えてくるんじゃないかと思います。・tableの各項目に動画を入れてみようこの、tableタグで作った表の中に、文章以外の項目を入れることも可能です。ここには、文章でも画像でも、何を入れても構いません。あくまでtableタグの練習なので、僕は、先ほどと同じように、動画を入れてみることにしました。特に入れたいモノが無い、という人はぜひコピペしてつかってみてください。映像も見てほしいので！動画の埋め込みコードを取得してきて、データ１−１の部分にデータ１−２の部分にデータ１−３の部分にデータ２−１の部分に、データ２−２の部分にデータ２−３の部分にを、それぞれ入れてみました。これで、最初に見せたような、自己紹介のページは、だいたい出来たんじゃないかと思います。今日紹介できなかった、ol､ul､li､dl､dt､dd、hr､pre､blockquote､div、hr､pre､blockquote､div、form、input、…など様々な細かいタグや、CSSなどについては、是非今後学んでみてください！今回は、ザッと簡単なサイトを作ってみることで、苦手意識を無くして、「HTMLって、WEBってそんな感じなのか、面白いかも」と興味を持ってもらえたなら嬉しいです。

全体の流れ

放送の全体の流れはこんな感じでした。

講師自己紹介
そもそもHTMLとは何か
世界一周をした理由
HTMLを書いてみよう①
先生の失敗談
HTMLを書いてみよう②

授業のようす

実際の放送のキャプチャ画像で授業のようすをご紹介。

「こんにちはキラです。ライダース着てきたぜぇ、ワイルドだろぉ〜？」

「こんな感じでね、世界一周して旅の１分動画作ったんスよ、次はウユニ撮りたいっスね」

「でも今日はね、HTMLの講座なんで、その話しますね。

こんな感じの、簡単な自己紹介ページを一緒につくりましょう」

「HTMLというのはウェブサイトの構造を決めます。CSSは見た目を定義するモノなんですねー」

「はい、実際に書いてみましょう。動画とかもパーンと貼ってみると楽しいっすよね」

「なんか生徒さんの中にザーボンさんのアイコンの人おるwwぶははww」

「ろくろはねー、こうやって回すとツボが綺麗にできるんすよー」

「テンション上がってきた、ジャケット脱いだろ」

「ろくろはね！やっぱりこう！こう回さなきゃ！」

てなわけで、ろくろについてアツく語った６０分になりました。

受講者のコメントを紹介

というのはもちろん嘘で、実際ちゃんとHTMLやりましたよい。

放送内で、受講者さんから実際に入ったコメントは以下の通り。

実名の引用はNGですが、一部紹介してここでコメントを返しますw

講師自己紹介について

めっちゃ良い動画ですね。海外行きたいなー（T.H.さん）

きらこう

いやー嬉しいっすね。ぜひこの辺からいろいろご覧になってください。

そして、ぜひドローン持って旅してみてください。最高ですよ！

ドローン始めたきっかけがかっこいい・・・（R.T.さん）

きらこう

褒められたww「世界一周しながら映像が撮りたかった」的なことを言った気がします。

平井堅？（K.H.さん）

きらこう

おい誰がPOP★STARや

（引用:http://www.pinups.co.jp/hirai/）

授業内の感想

出来上がっていく感じが楽しい！！（T.A.さん）

感動する～（M.T.さん）

すっごい（M.H.さん）

天才！！！（Y.I.さん）

ミニコーナーが楽しいｗ（J.T.さん）

初心者にやさしい吉良先生！（R.T.さん）

先生のお話もっと聞きたかったです。今日はありがとうございました。（K.K.さん）

めっっっっちゃたのしい！（H.O.さん）

先生おもしろいです（笑）（Y.K.さん）

先生の授業は何時間でも聴けますね。（T.A.さん）

おや！続編あるんですか！やった！（H.O.さん）

きらこう

うおー、こんなに褒められるとやっぱり嬉しいですね。せんせい、カンチガイしちゃうw

誰かに似てる？と思った！（M.T.さん）

きらこう

やから誰がPOP★STARや

（引用:http://www.pinups.co.jp/hirai/）

授業内で答えられなかった質問について

授業内でお答えできなかった質問もあるので、ここでお答えしてみようと思います。

figureとp、sectionとarticleの区別が難しいのですが、このように区別できるという方法があれば教えてください（J.A.さん）

きらこう

お、やや高度な質問ですね。

figureタグは、「その部分が無くても全体の意味は通るけど、補足として入れたい図や表、画像」を入れる時に使われることが多いですね！

sectionやarticleタグは、divが最も意味が無くて汎用性の高いのに対して、目的や意味がややはっきりしています。sectionが、本における「章」だとしたら、articleは、さらに小さな「ひとまとまりの文章」くらいの感じでしょうか。

まさかWordファイルでくるとは意外（Y.S.さん）

講座に必要なテキストなど、事前にわかるとさらにうれしいです！ダウンロードするのに、時間かかってアワアワしました・・・初心者なので。でも授業自体は面白かったので、それで集中できなかったのが残念です！（E.M.さん）

きらこう

この辺は、ほんとすみません。

本来テキストなどは無くても良いのですが、できるだけ分かりやすくするために、内容の書き起こしをしたら、授業前ギリギリになっちゃいました！できるだけ早めに用意しますw

WEBアプリケーションを作成するに当たり、①HTML + PHP, ②Spring, Struts, Seasar2などがありますが、①の手法は古いとは思っていません。実際のところ、先生はどうお考えでしょうか？（A.O.さん）

きらこう

①の方法がいいと思います。というのも、②の方法だとできる人が少なくて、チームでやったり外注したりする際に余計にコストがかかってしまうかと。

どのようなアプリケーションかにもよりますが、特別な理由がない限りは、共有しやすいやり方でやるほうが、全体での費用対効果が高まると思われます。

個人的な感想やまとめ

今回、生放送＆オンラインの授業って初めてだったのですが、やってみての感想は以下の通り。

６０分はやっぱり短い！

いやー、やっぱり６０分は予想以上に短いですね。自己紹介して、基礎の話して、ちょろっと書いたらあっという間に時間ですw

無駄な内容はほぼなかったと言っていいと思いますが、それでも、出来るコトは限られていましたね！

用意していた内容の半分くらいしかできなかったので、次回以降に持ち越しになりました。

ただ、上記の通り、生徒さんの反応は良かったので、悪くはなかったと思います。

生徒さんがかなり意欲的＆好意的

これもけっこう意外でしたw顔の見えない授業とかってもっと荒れるのかと思っていたのでw

「進行を無視した高度な質問されたり、悪口言われたりするのかな…」とビビってましたが、全くそんなことはありませんでした。

やはりこの辺は、Schooのユーザー層がしっかりしていて、仕組みもしっかりしている証拠ですね！

生放送って楽しい

そんなワケで、全体的に、とても楽しくて新鮮な体験になりました。めっちゃ褒められたしw

こういう楽しいご依頼は、どんどんお受けしていきたいですね！

次回以降の内容も、各SNSや当ブログでお知らせ＆レビューしていきたいと思います。

各SNSはこちらからどうぞ！

プロフィール

それでは今日はこのへんで。

明日も、良い人生とよい旅を。

schooのライブ授業に出演します

キラ＠デジタルノマドラボ — Sat, 27 May 2017 14:19:58 +0000

スクーの生放送授業に出演します

明日、５月２７日１９時より、オンライン学習の「Schoo（スクー）」のライブ授業に、講師として出演します。

Schoo – 参加型のオンライン動画学習サービス

HTMLに一切触れたことがない初心者のための60分

僕が顔出し声出しで動画に出るって、個人的には割とレアです。

「Schoo（スクー）」とは？

参加型のオンライン動画学習サービス「Schoo」の説明は以下の通り。

国内最大級の授業数。ITスキルや最先端の知識が動画で学べる

業界最先端のITスキルをはじめとして、社会人が抑えておきたいビジネススキル、さらにプログラミングやWebデザインの基礎から応用まで、明日の仕事に生きる授業をラインナップしています。

Schooの特長は「参加型生放送」で授業が日々開講されていること。毎回異なるテーマについて、受講生同士や先生との生放送中の対話を通じて、一人では得られなかった「答え」を得ることができます。

参照:https://schoo.jp/about

いいですねー。

就職前や起業前に勉強したい学生も、転職したいサラリーマンも、何か新しい趣味などをやりたい普通の人も、オンライン動画で色々学べるサービスですね。

僕が初心者に優しい理由

「HTMLに一切触れたことがない初心者のための60分」ということなんですが、きっと良い授業が出来ると思います。

なぜなら僕は‥

４歳でエリートの両親にPCを与えられ、
６歳でプログラミングを始め、
１０歳でゲームを作成し、
１４歳で大金を稼ぎ、
政府機関から莫大な報酬を受け取るウィザード級ハッカーに…

というのは、完全な嘘でwww

実際の僕は‥

もともとはITも機械も好きでなく、
高校生まで携帯は家族兼用で、
数学は割と苦手で大学は文学部、
微妙にコミュ障だったけどmixiでネットに触れはじめ（笑）
大学中退後引きこもってガチで金が無くなったので仕方なく受けたサイト制作の仕事で始めてプログラムも触りだして…

という、典型的な後発組のヒトなんですね。

そんな、手と足を動かして、泥臭く実践で覚えたタイプなのです。

技術を学んだお陰で、今はこうなれました。↓まだまだ未熟者ではありますが。

プロフィール

小さな机に、クソみたいなASUSのパワーブックと「サルでもわかるHTML」を並べて「ああ？分かんねえよクソが…」とか独りごちていたあの頃がとても懐かしいw

分からない人の気持が分かる

そんなワケで、いい授業が出来る、というのはあながち嘘ではなくて、

「分からない人の気持ちがけっこう分かる」わけですよ。

初心者にとって、どこが面白くなくて、どこで挫折するか、とかが分かる、と。

「こういうのがメンドイよねー、わかるわかる」という感じのノリで、受講者さんに共感してく感じでやってきます。

もちろん、あくまで外部講師なので、基礎の部分もちゃんとやります（笑）

そんなワケで、お知らせでした。

こちらの記事も、あわせてどうぞ。

Schooで「HTMLに一切触れたことがない初心者のための60分」の講師をしました【生放送】

「ゼロからITやりたいけど何からすればいい？」という人へ。３つの基礎から固めよう！

【384人の講習実績】東京で、ホームページ作成（WordPress）Campの講師をしてきました

身体で覚えろ！ブラインドタッチ（タッチタイプ）のコツと練習方法。

【保存版】適当に始めちゃダメ！ウェブサイトやブログを「本気で」作る前に考えるべき８つのこと

ブログで稼ぎたい人へ。最初にやるべきたったひとつのこと【a8.net登録】

初心者でも分かる！WordPressブログSEOのためのGoogleキーワードプランナーの使い方

WordPressアクセスアップの方法。まずは「５つの経路」について知ろう。

なぜ、あなたのブログ＆サイト作りはいつも挫折するのか？原因と対策を教えます。

【記事まとめ】今年こそ、WordPressでブログ＆ウェブサイトを作ろう。

いつまでも子供のように人生を楽しむ秘訣。なぜ、年をとるほど一年が短く感じるのか？

WordPress講習。自然界のものは下から伸びる。

https://kohkira.com/daniel/

仕事に「ウラ技」はない。地力を付けることで道は開ける。

それでは明日も、良い人生と良い旅を。

The post schooのライブ授業に出演します first appeared on Back Pack Hack-デジタルノマド・キラのブログ.