「HTML/CSSができればWebコンテンツを思いのままに作れて楽しそう！」とお考えの方は大変多いと思いますが、「まずはどこから手を着けたらいいのやら・・・。」とか、「ひととおり本は読んだけどどうしていいのかわからない・・・。」といった悩みがあると思います。また、マークアップ言語ということで他の言語とは少し違うこともあり、戸惑うことも多いのではと思います。ここでは、最新のHTML５を中心に、初心者の方でもわかりやすくてすんなり入っていける各種サービスやツールをご紹介します。
１．まずは辞書「HTMLクイックリファレンス」
HTMLはタグ、要素、属性といったものが非常にたくさんあり、辞書的なものがないと作業がはかどりませので、まずはここをブックマークしておきましょう。目的別・アルファベット別でタグやプロパティを調べることができ、サンプルコードも載っていますのでわからないものを調べるのはもちろんのこと、ど忘れ時の確認にも役立ちます。
２．便利ツールがほんとに便利「TAG <index>」
https://www.tagindex.com/index.html
タグやスタイルシートの解説もわかりやすくて使いやすいですが、HP上で設定値を変えながら視覚的に確認でき、コードもわかる「Web便利ツール」が、ちょこっと確認したいときなど、重宝します。「Webテンプレート」や「ホームページ作成ガイド」などもあり、HTMLの世界にすんなり入っていけるサイトです！
３．オンライン+動画で学習できる「paiza learning」
学生さん向け入門学習コンテンツです。2016年8月現在、HTML/CSSは未開講ですが、じきに開講されそうですのでご紹介します。ユーザ登録することで、オンラインでのコーティング・動作確認ができ、動画の講義も見ることができます。JavaやPHP、SQLなど講座数も多く眺めるだけでもわくわくしてきます。
４．ステップバイステップで流れがよくわかる「シラバス」
「マネしながら」「ステップバイステップ」が特徴のサイトです。”バナナデザイン株式会社入社編”では、何も知らないところから徐々に力がつくよう工夫されています。プログラミング言語は、個々の技を理解しても、使いどころに悩んだりしますが、ここで学習すれば、Webコンテンツ作成の「流れ」が良く理解でき、学んだことがすんなり活用できそうです。
５．入門者に最適「プログラミング入門サイト～bituse～」
入門サイトと銘打っているだけのことはあり、プログラミング自体が初めて、という方にも概念が理解できるよう、HTMLとはそもそも何が目的で、なにをどうればよいのか？というところから説明されています。しかも簡潔に書かれておりわかりやすく、おすすめです。
６．なんと１１講座が無料！「SkillHub」
ユーザ登録すると１１の動画講座が無料で受けられます。登録して見てみましたが、動きがあるとわかりやすいです。HTMLやCSSだけでなく、Webデザインやillustrator、WordPressの講座もあるので、実践力が身につくと思います。有料コンテンツではPhotoShopやRubyなどの講座を受けることができます。
７．いつでもどこでもスキマ学習「ShareWis(シェアウィズ)」
スマホの総合学習アプリですが、HTMLやCSSのコンテンツがあります。2016年8月現在はiPhone版のみですがAndroid版も近々リリースされるみたいです。動画をみて理解度チェック（クイズ）をする流れです。パソコンに向かうのが億劫なときとか、いかがでしょうか？
８．どこでもコーティング「Trico-Hello world without PC」
iPhoneアプリです。画面が小さいので扱いにくいと思いきや、入力候補も出てきますし、意外と使いやすいです。スワイプでhtml、CSS、JavaScriptと切り替わり、プレビューも見ることができます。without PCと銘打つだけのことはあります！寝転んでコーティングができてしまうとは。おすすめです。
９．軽くて扱いやすいエディタ「Crescent eve」
オンラインツールもいいのですが、どうしても動作がもっさりしています。それに対して、このソフトは容量も小さく軽快に動くのでお勧めです。HTML/CSSはもちろんのこと、Javaやperlにも対応しています。設定で言語を選ぶと、それに対応した変換候補がしっかり出てきます。エラーチェックもしてくれますし、変に高機能なエディタで操作に悩むくらいなら、これくらいがちょうどいいですね。
１０．ライブで確認できる「Liveweave.com」
オンラインでコーティング、結果がすぐに確認できるHPです。HTML、CSS、JavaScriptが同時に触れて、右下の窓に結果がすぐに表れます。ちょっと試したいとき等に便利です。開始タグを打つと自動で終了タグがでてくるところがありがたいです。
まとめ
HTML/CSS関係のツールやアプリ、HPはほんとに充実していてどれにするか迷うくらいです。ご自分にあったものがきっとあります。最短で覚えるられ、しかも無料で使えるツールは整っていますので、あとは自分のやる気しだい。「やろう！」と思い立ったら即行動に移しましょう！
販売店比較早見表
|
店舗名 |
詳細 |
|
『おとくケータイ 乗り換えキャッシュバック最高額を保証してくれます |
|
|
|
|
ソフトバンクショップ, auショップ, ドコモショップ |
|
』
