はじめに

Web(ウェブ)ページ作成に興味はあるけれど、いったい何から始めればいいのかわからない、という悩みを抱えている方は多いようです。本格的に作るとなると、それなりに知識が必要になってくるので、初心者の方はまずどこから学べばよいのかが分からなくなりがちです。

ここでは、サイト作り初心者の方向けに、Webページ作成をゼロから独学するときに参考になるサイトをご紹介します。

Webページ作りの基本

HTML・CSSについて

Webページ作成に興味のある人なら、HTMLやCSSという名前を聞いたことがあるかと思います。詳しく知らない方は以下のサイトで学んでみましょう。1ページで分かりやすくまとまっています。

これからWebサイトの制作をしたいけど、何から勉強したらいいの?っていう人のためのガイド

Web制作をしてみたいけど、何から勉強し始めたらいいか分からない ... という人向けのガイドです。Webサイトを作るのに必要な HTML にはじまって、いろんなプログラム言語などで、どんなことができるのか?ということを簡単に紹介しています。

webdesignrecipes.com

HTMLファイルを作成し公開する

簡単なWebページなら、特に難しいこともなく公開することができます。以下ではテキストエディタと「Dropbox(ドロップボックス)」を使った簡単なWebページの公開方法が紹介されています。

簡単なウェブページを無料で公開するならDropboxのPublicフォルダとbitlyで! - Gadget Girl

Dropboxをバックアップだけに使っているという方、もったいないです!イベントの告知ページや自己紹介ページなど規模が小さいウェブページを公開したいとき、DropboxのPublicフォルダが便利ですよ。レンタルサーバーなどを使わずに無料で出来るというのも嬉しい♪ 自分の情報をまとめた簡単なウェブページ http://bit.ly/spring_mao を公開したので、その手順をまとめてみます!

gadget-girl.hatenablog.com

上のPublicフォルダを使ったやり方は、Dropboxのアカウントを2012年8月以前に登録した方の場合です。というのも、Dropboxは2012年8月にPublicフォルダを廃止してしまったので、この方法が使えません。

ただし、それ以降に登録した場合でも大丈夫です。以下のページにSite44というアプリを使った方法が紹介されています。サンプルも紹介されているので、参考にしてみてください。

JavaScript使いたいけどアップロードする場所がなかったら、Dropboxを使えばいいじゃない!... - euphoLab

JavaScript使いたいけどアップロードする場所がなかったら、Dropboxを使えばいいじゃない!WEBサイトだって作れます リニューアルしてExとなったeuphoです。前回の記事にも書きましたがTumblrにはテーマ用のうpろだが用意されているので、JavaScriptとかjQueryとかちょっとしたアイコンをアップロードできます。でもアップロードできないサービスもありますね。そういう場合はD...

euppho.tumblr.com

コーディングするときはNetBeansを使おう

上記ではHTMLやCSSをコーディングするときにテキストエディタを使用していましたが、代わりに「NetBeans」を使ってみると便利です。厳密にはNetBeansはエディタではなくIDE(総合開発環境)というものです。

下記のサイトに分かりやすく説明されています。

HTML/CSS/PHP等のコーディングに、無料のNetBeansが快適過ぎる件

私は結構エディタ難民で、HTML/CSS/PHP等をコーディングする際のエディタをWindows・Mac含め色々試してきましたが、最近は NetBeans IDE に落ち着いています。 NetBean...

stocker.jp

コードの検証にはGoogle Chromeが使える!

ブラウザで有名なGoogle Chromeですが、こちらにはデフォルトでブラウザのコードの確認ができる「要素を検証」という機能がついています。自分のWebページのコードを確認できるのはもちろん、ほかのWebサイトのコードも確認することができるので、他の人が作ったページを確認したいときにも役立ちます。

Google Chromeの「要素を検証」が便利

あることは知ってたんですけど、今まで使わなかった「要素を検証」という機能。 Google Chromeの右クリックメニューにあるやつです。 今まではずっと「ページのソースを表示」で見て、ちまちま変えてました。 しかしこれが便利すぎてブログいじりが止まりせん。

ehbtj.com

ページの見栄えをよくするには?

Twitter Bootstrapを使う

Twitter Bootstrap」とは、Twitter社が開発・提供している無料のフロントエンドツールです。Webデザインができない人や苦手な人でも、見栄えの良いモダンなWebページを作ることができます。

Twitter Bootstrapの具体的なメリットとして

・デザイナーに頼らず見栄え良くできる
・カスタマイズも簡単である
・「コンポーネント」でリッチなUIも実装できる
・レスポンシブWebデザインにも対応

などがあります。詳しくは以下を参考にしてください。

いまさら聞けない「Twitter Bootstrap」とは?

スタートアップでよく使われているフロントエンドツール「Twitter Bootstrap」。基本的な使い方から実際のWebアプリ開発での導入方法までを紹介します。

ascii.jp

テンプレートを活用する

こちらのページにはTwitter Bootstrap導入前の確認すべきことやテンプレートなどが載っています。

ノンデザイナーも必見!Twitter BootStrapの特徴と導入前に確認すべき事 | 株式会社LIG

こんにちわ。アートディレクター兼2児のパパ、長岡です。 毎回子どもネタですが、最近アンパンマンを指さして「パンパーンパン」とそれっぽい発音をしている息子を見て「こいつ可愛いな」と癒されています(笑) 屈託のない笑顔と持ち前のあどけない仕草で、保育園のマダムたちをイチコロ(表現が古い?)にしているそうです。将来

liginc.co.jp

さらにテンプレートを探すときは、以下のページも見てみましょう。

ひと味ちがうTwitter Bootstrapの18個の無料テンプレート&有料まとめサイト - 酒と泪とRubyとRailsと

Twitter Bootstrapはデザインが苦手なプログラマのための必須ツールです。今回は、一味違ったBootstrapサイトを作るときにきっと参考になるテンプレートをまとめてみました! 追加情報 最新のBootstrap3に対応したテーマの一覧です。最近はこちらのほうがオススメかも! …

morizyun.github.io

Bootstrap用無料テンプレートをダウンロードしまくれるサイト「Start Bootstrap」

「Start Bootstrap」はBootstrap用のテンプレートを無料でダウンロードできるサイト。Forever Freeで、Bootstrap3にも対応。ビジネス用、ポートフォリオ用、サムネイルギャラリー用など、今流行中のいろんなパ

www.softantenna.com

フォントを変えるには?

「Webフォント」の使い方

Webページが整ってきたら、次はフォントを変えてみましょう。

Webページのフォントを変えるときはWebフォントというWWW上のフォントを指定して行います。以下のページに詳しく説明されています。

実はすごく簡単!webフォントの使い方&日本語対応webフォントまとめ

何となく後回しにしてしまっているwebフォントの使い方を解説します。非常に簡単な手順でwebフォントを利用することが出来、サイトのデザイン性も向上します。また、日本語が使えるwebフォントもまとめてご紹介します。

www.hp-stylelink.com

また、実際の方法はこちらを参考にしてください。

Webフォント(日本語/欧文)サイトまとめ9選!変更方法もご紹介します | 株式会社LIG

(編集部注:2013年03月07日に公開された記事を再編集したものです。) 先週、新婚旅行という人生最大級の贅沢を楽しんできたため、日本に帰ってきて放心状態になっている野田です。 もう少し逃げていたかった・・・現実から・・・。 という話は置いておいて。 最近LIGのブログではフォントネタが頻繁に登場するように

liginc.co.jp

無料で使えるWebフォント

Webフォントは有料のものが多いですが、中には無料のものもあります。以下の「M+ FONTS」はフリーのフォントとして公開されています。

「M+ FONTS」:http://mplus-fonts.sourceforge.jp/#

以下は海外のWebフォントサイトです。

Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

Fonts.com

Fonts.com provides the biggest and best selection of high quality desktop and web fonts. Try, buy and download classics like Helvetica, Univers, Frutiger, Trade Gothic and Avenir along with popular new fonts like Soho and Neo. Find your type!

www.fonts.com

また、以下のページでは、無料・有料のWebフォントがまとめられているのでオススメです。

日本語ウェブフォントまとめ+GoogleWebFont

日本語ウェブフォントとは 日本語ウェブフォントも本当にゆっくりですが、広がりを見せてきています。私のホームペー…

www.flopdesign.com

おわりに

Webページ作りは、あれもこれも勉強しなければならず、迷ってしまいがちです。今回紹介した内容を参考に、初めての方もぜひチャレンジしてみてくださいね。

(image by susi-paku)