この項目を始めるまえに、まず、エディタをご用意ください。
エディタの詳細に関してはこちらからご確認ください。
基本的にSTARTOUTでは、テキストと画像ベースで解説していきます。
動画を多めに入れて欲しいとの要望もありますが、テキストと画像です。
なぜなら、実際に仕事をした時の「問題解決力」を養うためです。
コーディングをすると、何度もエラーに向き合うことになります。
そんな時、どうやったら問題やエラーを解決できるか、Google等で調べます。
ただ、検索結果として出てくる解決策は、そのほとんどが「テキスト」です。
動画で丁寧に解説してくれる検索結果なんて、ほとんどありません。
エラーや問題を解決するには、まだまだ「読む力」が必要なのです。
時には日本語だけじゃなく、英語も読む必要があるでしょう。
テキストを読み、解読し、解決することに慣れなければ、仕事で苦労することになります。
だからこそ学習中からテキストを読み「文字から理解する力」を養うのです。
ただ、基本的に慣れが必要な「序盤」は動画で丁寧に解説していきます。
極端にわからなすぎるといった挫折を避けるためです。
その後、テキストと画像を主体としての学習に移行します。
学習フロー自体が、問題解決のトレーニングと思ってください。
ただ、動画が今後増えないかと言えばそうではありません。
みなさんの学習へのフィードバックを参考に、適材適所で作っていきます。
また、タグなどの解説がシンプルなこともあります。
中には、もっと説明が欲しい！と感じることがあるでしょう。
それは「自分で問題解決する訓練」を兼ねるため、あえてシンプルにしてあります。
例えばHTMLタグにfigureというものがあります。
STARTOUTでは、簡単な説明しか書いていないこともあるでしょう。
そんな時は「Google検索」などでfigureについて検索してみてください。
膨大に情報を見つけることができるはずです。
なぜ、そんな回りくどいことが必要になるのでしょう。
答えは、エンジニアもデザイナーも今後、高いレベルの「問題解決力」が求められるからです。
技術だけ出来ればいい、プログラミングだけ書ければ仕事ができる、そんな時代は終わりを迎えようとしています。
例えば、新規事業を作り出すとします。
凡庸なエンジニアは、言われた通りに与えられたタスクを完璧にこなすことに専念するでしょう。
しかし、仕事のできるエンジニアさんはこう考えます。
「新規事業に適したプログラミングとはなんだろう？」
事業を作る時、まずは「仮説検証」を散々行います。
試してみて、ダメだったらまた作り直し、新しい仮説を立てて改善する。
その繰り返しを超高速で行うことになります。
となれば「改良しやすいプログラミング」をすべきです。
一度作り込んでしまい、何か改良する時に、時間がかかっていては元も子もありません。
このように、エンジニア側の視点から、状況にあわせて、開発の方法そのものを提案していく必要があるのです。
自分で作戦を考え、こうすべきと提案し、問題解決すること。
作る側が直接提案するくらいの速度感が、今後の社会で必要になるのです。
事業を進めているうちに発生する、様々な問題や課題。
それらを、スキルや知識を使って高いレベルで解決していくこと。
今後、事業にコミットできるデザイナーやエンジニアが求められる世界が来ます。
そんな時、事業で発生する様々な問題を、自分の頭で考えて解決する力が必要になるのです。
自分で考え、高いレベルで問題を解決する力や習慣が必要です。
プログラミングを学ぶ上で、細かいエラーを自分で解決することも、そんな習慣や問題解決する力を鍛える訓練に他なりません。
それは、学びながら問題解決力を高める効果的な手段です。
調べて見つける、自分で考えて答えを出す。
問題解決の力を向上させるために、解説は適度にシンプル化してあります。
ぜひ、ご自身でさらに一歩先の情報を掴んでみてください。
コーディングへの最初の一歩
今回は、最初ということで、動画をご用意しました。
実際に、ご自身で手を動かしながら、進めてみてください。
今回からHTMLとCSSの基礎をお伝えしていきます。
基礎をご理解頂いたあとは、実際に「作るミッション」がはじまります。
まず、今回の内容をしっかり理解できるように繰り返しやってみてください。
HTMLとCSSとは何か
HTMLとCSSですが、これは2つで1つの言語と言ってもよいでしょう。
ただ、2つが一緒の役割を持つわけではなく、当然、別々の役割があります。
簡単に言えばHTMLが「枠組み」をつくります。
そしてCSSが「装飾」をつくります。
家の建築に似ていると例えられますが、HTMLは、まさに骨組みですね。
CSSが壁紙やインテリアと言ったところでしょうか。
この2つの書き方を覚えて、はじめてHTMLとCSSを扱うことができます。
まず、HTMLやCSSのファイルを入れておくための「フォルダ」を作りましょう。
フォルダを作ったら、その中に、HTMLとCSSを「別々のファイル」として作ります。
下記のようにindex.htmlとcommon.cssのファイルを作りましょう。
パソコンが不慣れな方はわかりずらいと思うので、動画を用意しました。
ファイルやフォルダの作り方は、下記を参考にしてみてください。
デスクトップで右クリックを押すと、メニューが現れます。
そのメニューにある「新規フォルダ」からフォルダが作れます。
フォルダを作ったら、今度は「エディタ」を起動してください。
起動したエディタから「ファイル」を「新規保存」します。
保存する時は、ショートカットキー「command+s」で保存しましょう。
windowsであれば「Ctrl+S」で保存できます。
動画のエディタは、Coda2の画面です。
別のエディタでも、ファイルを作る方法は似通っています。
ファイル名は、基本的に「英数字」であれば、何でも構いません。
日本語は絶対に使ってはいけません。
環境によっては文字化けしてしまうからです。
ただし、トップページだけは「index.html」にしてください。
これはコーディングの決まりでありルールです。
中身はひとまず空で構いません。
では、始めていきましょう。
書き始める(コーディングの)ための準備をしよう。
では、書きはじめるために、いくつかの設定をしていきます。
まずは下記のソースコードをindex.htmlにコピーしてください。
<!DOCTYPE html>
<html>
<!--head〜〜/headまでが基本設定のエリアです。-->
<head>
<!--文字の形式です。今は深く考えずUTF-8と入れてください。-->
<meta charset="UTF-8">
<!--Google検索した時に出てくるWEBサイトのタイトルエリアです。-->
<title>サンプルテンプレート</title>
<!--WEBサイト検索をした時に出てくる、説明エリアです。-->
<meta name="description" content="サンプルテンプレート">
<!--WEBサイト検索に有効とされるキーワードを入れます。カンマ区切り。-->
<meta name="keywords" content="レストラン,フレンチ,原宿">
<!--スマホやPCで切り替えて見た時、スムーズに切り替わるようにします。-->
<!--スマートフォン対応サイト(レスポンシブレイアウト)を作る時に必須です。-->
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<!--cssファイルを外部から読み込んでいます。-->
<!--common.cssはファイル名です。読み込むファイル名を記載しましょう。-->
<link href="common.css" rel="stylesheet" type="text/css">
</head>
<body>
<!--このbodyの中にhtmlを記述していきます。-->
</body>
</html>
上記がhtmlとcssを書き始めるための基本設定です。
コピーだけするのではなく、内容の「コメント」を読みましょう。
全てじゃなくても良いので、調べながら、できる限り理解を深めてください。
基本的に、htmlでWEBサイトを作る時、bodyタグの中にコードを書いていきます。
上記ソースコードの「このbodyの中にhtmlを記述していきます。」と書いてある部分ですね。
ここにHTMLを記述していくことで、WEBサイトの骨組みが出来ます。
ひとまず、先程のソースコードをindex.htmlファイルに保存しましょう。
そして、titleやdescriptionなどをご自身のWEBサイト用に書き換えてください。
もし特にアイディアがなければ、そのままでも構いません。
これで、コーディングを始める準備は完了となります。