Sponsored Links
Macでホームページ作成のコンセプトは「まず、やってみる」
Macでホームページ作のコンセプトは「まず、やってみる」です。なのでコンテンツによっては説明不足と感じることもあるかもしれませんが、後ほどご説明いたしますし、同じような内容を反復いたしますので安心して読み進めてください。このての事は頭で考えるよりも実際に手を動かした方が理解が深まりやすいですし、ホームページ制作は一つ覚えた事の応用でできる場合が多いので、いずれかのタイミングで理解できるようになります。もう一つのコンセプトは実務で使える制作です。僕の経験則になりますので、偏っているかもしれませんが、その辺はご容赦ください。
アプリケーションなどの情報はMacが中心です
Macでホームページ作成と銘打ってますが、アプリケーションの使い方や情報ショートカット等がMac中心なだけでWindowsユーザーの方でもそこを置き換えていただければ大丈夫です。
Macもホームページ作成も初心者という方へ
Macもホームページ作成も初心者という方向けにホームページ制作に必要な基本的なMacの操作や設定方法を紹介しているページを用意していますので、Macもホームページ作成も初心者という方は参考にしていただければ幸いです。
ホームページの仕組み
ここでいうホームページは厳密にはwebサイトをさしますが便宜上ホームページで通させていただきます。 皆さんが普段ご覧になられているホームページはどのような仕組みで閲覧する事ができるのでしょうか？ おおまかにいうとホームページはインターネット上にあるサーバーと言うコンピュータに保存されていてその保存されているファイルをブラウザでアクセスすることにより見る事ができます。 そのファイルはhtmlというマークアップ言語でブラウザに表示させる為の情報が記述されています。 なのでホームページを作ろうと思えばhtmlを覚える事は必須になります。
HTML5中心に解説していきます。
ホームページ作成にHTMLが必須だと言うのは前述の通りです。実はHTMLにはバージョンがありまして、現在の主流はXHTML1.0とHTML4.01とHTML5です。Web標準という言葉が流行りだした頃にXHTML1.0が普及しだし、僕の感覚では今も一番用いられているバージョンですが、Macでホームページ作成はHTML5中心に解説していきます。
HTML5の普及具合
数年前はHTML5は普及しないんじゃないかなぁと思っていましたが、在徐々に普及し始めています。 現場でガリガリHTML5でホームページをつくってるぜ！って感じてはありませんが、HTMLでのマークアップを理解すると言う観点では より構造化されたHTML5のほうが向いているのでは？と個人的に思います。
HTMLはプログラムじゃありません
僕は最初HTMLはプログラムで難しくて敷居が高いのだろうと思っていました。 ですが初心者向けの書籍を購入し実際にやり始めると意外に取っ付きやすかったのを覚えています。 残念な事にその書籍はWindows中心に書かれていたので、Mac向けのツールの紹介や解説はなかったので パソコンを購入したばかりの僕は、そこにつまずきました。 HTMLはプログラムではないので初心者でも簡単なホームページならわりとすぐに作れてしましいます。
ホームページを構成するファイル
ホームページはインターネット上にあるサーバーというコンピュータに保存されていてSafariなどのブラウザでサーバーにアクセスすることにより見ることができるということは説明しました。では、どのような形式でホームページを構成するファイルは保存されているのでしょうか？
- htmlを出力するファイル
- スタイルシート
- JavaScript
- メディアファイル（画像、映像、音声等）
- CGIファイル
一般的なホームページを構成するファイルは上記の通りです。
htmlを出力するファイル
ホームページにおけるhtmlの役割はページの構造をマークアップすることです。 htmlはCGI等でも出力できます。例えばブログなどでよく使われるPHPもそのひとつです。htmlを出力するファイルはhtmlファイルだけでは無いということを覚えておいていただければOKです。
スタイルシート
スタイルシートの役割はマークアップされたhtmlに装飾を施すことです。htmlファイルに直接記述することも可能ですが、推奨されていません。
JavaScript
JavaScriptの役割は多岐にわたります。ホームページに動きを付けることもできますし、メールフォームの入力チェック等もできます。
メディアファイル
テキストだけで構成されているホームページもありますが大体のホームページは画像、映像、音声等のメディアファイルを含んでいます。ホームページにおける役割は訴求力でしょうか？百聞は一見に如かずとかいいますしね！
CGIファイル
動的なコンテンツを担当するのがCGIファイルです。TwitterやFacebookやブログ等が代表的なものでしょうか？エンドユーザーがの操作に対しページにそれが反映されるにはCGI等の何かしらの仕組みが必要になります。
MacはWeb制作に向かないと言われていた
僕がホームページ制作の仕事につきたての頃、Macはweb制作には向いていないと、よくいわれました。 フリーソフトが少ないことや改行コード、色々ありますが、最大の理由はIE（インターネットエクスプローラー）が無いことです。 最盛期に比べるとシェアが減ったとはいえ現在でもIEのシェアは日本ではダントツです。 では何故IEが無いことがデメリットなのでしょうか？それはホームページが各ブラウザによって見え方が違うからなのです。 例えばMacのSfariでは思った通り表示できていてもIEでは表示が崩れてしまう・・・・なんてことは日常的にあります。 IE,Safari,chrome,Firefox等の主要ブラウザでIEだけはMacにインストールできないのでMacでは検証できなかったのです。 しかもIEはシェアNo1!他のブラウザで表示が崩れたとしてもIEだけは崩れては駄目だ！というような空気感がありました。 Macのデバイスフォントはアンチエイリアスがかかっていて奇麗です。その影響で行間の見え方もMacとWindowsでは違うので その辺もデメリットだと言われました。
- 文字の詰めが違うのでMacの方がテキストの領域が広くなります。Macでは滑らかに表示されていても
- Windowsではガタっとした感じの表示になります。そのぶん文字がつまるのでMacよりテキストの表示領域が狭くなります。
は表示領域の差
今もMacはホームページ作成に向いていない？
僕の感覚では今は逆にMacの方がWeb制作に向いていると感じます。Mac向けの情報やアプリも豊富ですし、 ネックであったIEでの検証もMacでできますしね！何よりもUIがいい！
Macでの制作環境を作ろう
いざホームページを作ろうとしても、制作する為のツールは必要です。 無料のものから有料のものまで各種ありますが、以下のものが必須になります。
- HTML5をマークアップするためのエディタ
- 一般公開するためのサーバー
- サーバーにファイルをアップロードするFTPクライアント
- Fireworks、Illustrator、Photoshopなどのデザインツール
- IEの表示検証環境
HTML5をマークアップするためのテキストエディタ
僕がおすすめするテキストエディタはSublime Text2という有料のアプリケーションです。有料なのですが、体験期間が無期限なので気に入るまでじっくり使ってみてから購入という流れでも大丈夫です。SublimeTextは動作が軽快で欲しい機能はパッケージという拡張機能でカスタマイズしていくスタイルです。SubLimeText以外のおすすめもご紹介しますが、総合的な使い勝手はSublimeTextが一番です。
SublimeText2についての詳しい情報はこちらで紹介しています。
無料のエディタ
- Brackets
-
Bracketsはwebコーディングに特化したテキストエディタでコードヒントも実装していますし拡張機能も充実しています。そしてsass※1の コードヒントにも対応しています。もろん拡張機能でEmmet（zen-coding）※2も使えます。これが無料でつかえるのか？！というぐらい充実していますが、 日本語の変換にタイムラグがあります（2013.9.28時点Brackets31）ので、原稿を書きながらマークアップするという作業には向いていません。原稿を書くには別のエディタを使うことになると思います。
HTMLでも
CSSでもちゃんとコードヒントがでます。
- CotEditor
-
Macの定番テキストエディターです。動作が軽いのでちょっとしたテキストうちにも重宝しますし、シンプルなインターフェイスですが、設定さえすればコードの色分けも出来ますし、ショートカットでスニペットも登録できるすぐれものです。 CotEditorでもEmmet（zen-coding）が使えます。
- TextWrangler
-
僕も最近使い始めた高機能テキストエディタです。複数ファイルの検索置換もできますしファイルの差分を検索することもできます。動作も軽いのでBLOGの原稿などもこれで書いています。拡張機能でEmmet（zen-coding）も使えます。個人的にEmmet（zen-coding）の使い勝手はTextWranglerが一番いい感じです！
※1.sassは簡単にいうとCSS(スタイルシート)のコーディングを効率化できる技術です。
※2.Emmet（zen-coding）はHTMLやCSSをショートカット+スニペットで簡略化してコーディングができる拡張機能です。
作成したファイルをサーバーにアップするFTPクライアント
FileZilla
FTPクライアントとは作成したホームページをサーバーにアプロードするためのアプリケーションです。Macの無料で使えるFTPクライアントです。 こちらで詳しく解説しています。
Cyberduck
こちらも無料で使えるFTPクライアントです。SSHでの圧縮等の操作もできます。ただ僕の環境では重いのでSSHで接続する以外のときはつかっていません。
Transmit4
Transmit4は有料のFTPクライアントなのですが、その価格に見合う仕事をしてくれる優秀なアプリケーションです。一度使うと他のFTPクライアントが不便に感じてしまいます。 Transmitについてはこちらで記事にしています。
ホームページを公開するための、おすすめレンタルサーバー
作成したホームページを公開するのにサーバーは必須です。自分でサーバーを用意できるなら別ですが、そうでない場合はレンタルサーバーを利用することになると思われます。 僕がおすすめするのはエックスサーバーとコアサーバーです。詳しくはこちらのサーバーについてから
HTML5でコーディングしてみる
習うより慣れろじゃないですがサンプルソースを掲載していきますので実際にサンプルソースを記入し、どんなものか体験してみてください。なる早で習得するための僕のアドバイスですが、一周で覚えようとしないことです。 一周目は理解することより体験することが目的です。頭で考えるより実際にやってみたほうがHTMLは理解しやすいです。それはHTMLに限ったことではありませんが、HTMLの場合、制作→表示検証がワンセットですので特に当てはまると思います。 理屈は一通りホームページが作成できるようになってからコンテンツの最適化がてらに覚えていけばいいと思います。
