〜超初心者編〜2018年11月21日Web制作・ホームページ制作ホームページ制作を独学で1から学びたい人のために、今回、ホームページ制作するにあたって準備すべきこと、学ぶべきことをご紹介いたします。ホームページ制作に必要な環境1番にパソコンは当たり前ホームページ制作で必要な環境は、何言ってもパソコンが必要になります。それだけあればとりあえず問題ありません。ホームページ制作を行っている方は、最近では大半がMacを使っていることが多いです。見た目のオシャレさやマウスパッドの操作性、パソコンの起動の速さもありますが、一番にエンジニアの方がWebのシステム開発をする際に、Macで使っているOSがUNIXを改良して作られたOSなので、標準でシェルコマンドが使えるのが一番の理由になります。私も元々エンジニアなので使っている理由はここですね。ホームページ制作のみを行う人が使う理由としては、シェルコマンドは殆ど使わないためその理由というよりかは、一番にフォントが綺麗というところとRetinaディスプレイで高画質なため、デザインがよりキレイに見える部分に惹かれて使っている人が多いようですね。あとはカッコいいからの理由が多そうです。ホームページ制作に使うエディターパソコンが用意できたら、次にホームページを作るためのエディターが必要になります。エディターと言っても、ホームページビルダーのようなWebオーサリングツールではありません。この後説明するホームページを作るために、ソースコードというホームページを生成するために必要な文字/文章を書くために使用する、いわゆるテキストエディターのようなものです。ホームページ制作に便利なエディターは、以下のようなものがあります。Text(サブライムテキスト)どのエディターもオススメで、自分に合ったエディターを見つけるのも良いと思いますが、私が使っているのは一番上の「Atom」というエディターを使っています。このエディターを使うかというと、無料ということもありますが、ホームページを作るために必要なHTMLソースの補完機能だけでなく、ホームページのスタイルを定義するCSS、ホームページのアニメーションを定義するJavascript(ジャバスクリプト)、それ以外のシステム開発で使う言語の補完機能が、必要に応じて自由に追加して使いやすいエディターに出来るというところが良くて、このエディターを使っています。分からないと思う方は、とりあえずAtomを使っておけば問題ありません。ここまで準備できれば後はホームページ制作の方法を学ぶだけです。一番に覚えなければならないのが、ホームページを生成するHTMLソースの書き方になります。ホームページは、htmlという形式のテキストファイルでできていて、以下のような枠組みを定義することで最低限の文字の表示までと検索結果の操作までができます。コンテンツ</body></html>一つ一つの意味については、独自に調べて欲しいと思いますが、<head>〜</head>と囲まれたところがこのページの設定部分だと思って下さい。charset=”UTF-8′′>と書かれている部分は、このページの文字コードはutf-8ですというものになります。昔はよく日本語はshift-jisなどを使っていましたが、今はutf-8が推奨になっているので特に気にせずutf-8と書いておけば問題ありません。<title>タイトル</title>という部分は、このページのタイトルになります。検索したときに表示される下の赤枠部分がタイトルになります。name=”description”>は、上記のタイトル下の説明文になります。ページ内の作成は、<body>〜</body>の中に記載していきます。ここに文章を書いていけば、文字だけの日記は作成できると思います。改行する場合は、ただエンターを押して改行しただけではホームページ上反映されず、<br>のタグ(HTMLソースで書く1つ1つの命令をタグという)書く必要があります。HTMLタグはたくさんあるので、一つ一つ調べてどのようなものがあるか事前に把握する必要があります。CSSの書き方HTMLソース(タグ)についてある程度理解したら、CSSの書き方を学ぶ必要があります。CSSはホームページのスタイルにあたり、オシャレなデザインのサイトを作るには必ず覚える必要があります。/>を記載して、htmlファイルを作った中にstyle.cssというファイルを作成します。こちらもAtomで開けば自由にテキストを書くことができ補完してくれます。CSSファイルの中に自分がどのタグに対して、どのようなスタイルにするかを定義することでスタイル調整することができます。CSSファイルの中に以下のような定義を書くことで、ページ内のすべての文字は白色になり、ページの背景は黒色になります。black;}タグは直接的に定義してもいいですし、タグにidやclassをふることで特定のタグに対してのみスタイルを当てることができます。divタグに対してふったときはこんな感じです。class=”test-id”>〜</div>idはページ内で1つの場所のみにスタイルを掛けるときに定義します。classは複数にスタイルを掛ける場合に使います。文字を部分的に赤にしたい場合は、classで赤文字になるスタイルを1つ定義し、文字を変えたい部分にタグで囲みそこに赤文字スタイルを定義したclassをふることで、1つのスタイルの定義で複数の箇所を変えることができます。イメージがつきにくいと思いますので、この辺りも一つ一つ学ぶようにしてみて下さい。理解したら色んなことが出来るようになりますので、楽しくなってくるかと思います。javascriptの書き方HTMLソースとCSSソースを書くことが出来るが、実はホームページ制作者の中にはこのJavascriptが使えない人が日本ではたくさんいます。このJavascriptをマスターすると、ホームページ内で自由にアニメーションさせることができ、面白い仕組みをどんどん作り出すことができますので、もしホームページ制作をするならこちらも覚えてみると良いと思います。JavascriptはHTMLの定義方法や、CSSの定義と全く異なり、プログラミングの知識が必要になります。説明しているととても長くなってしまうので省きますが、是非、やってみるならこちらにもトライしてみると良いかと思います。Bootstrapなどのフレームワークを学ぶ基本を覚えてきたなら、Bootstrapというホームページをパソコン、スマートフォンなどのあらゆる端末で見ても良い感じにしてくれるCSSが事前に定義されているフレームワークを学んでみると良いです。最近のホームページ制作では、何かしらのフレームワークを使用して効率的にホームページ制作を行っています。しないと、年々増している様々なデバイスやオシャレな動きがたくさんあるサイトを作るには膨大な時間が掛かってしまいます。方は、まずは、現在メジャーになっているBootstrap4などを学んでおけば良いと思います。Javascriptのプラグインの使い方を学ぶJavascriptのアニメーション構築も、実は世の中に既に作られたものが多くあり、それがプラグインという形で無償/有料で提供されています。何処かのサイトを参考にこんなアニメーションを入れたいと思ったら、まずはプラグイン探しからしてみることをオススメします。プラグインを組み合わせて作れば、大抵のアニメーションを作ることができ、javascriptが全くわからない人でも素敵なホームページを作ることができます。ホームページ制作を理解するには実践あるのみ!学ぶ必要があるものが理解できたら、とりあえず作りたい目的のものを決めて、実践あるのみになります。ホームページ作成は、簡単にするためのツールやCMSといわれる既にホームページが出来上がったものがたくさんあり、これを使えば、何も勉強せずに作れてしまいます。1から作ることをしてみたい人には、まずはCMS等を使わずにある程度ホームページ制作の基礎を学んで、そこから簡単に作れるCMSに移ったほうが良いと思います。することによって、デザインの変更や、好きなアニメーションの導入が簡単にできるようになり、より自分好みのホームページを作ることができます。時間を掛けて作ったホームページには愛着も湧いてくるので、更にホームページ制作の楽しさがわかってくるかと思います。今回、ホームページ制作することだけに注目して説明してきましたが、ホームページを作ったらインターネット上でみることが出来るようにするための準備などもありますので、それはまた次のタイミングで説明します。文字にぼかしを掛けて読めなくしたい。画像にぼかしを掛けて背景にしたい。Photoshopで画像にして処理すれば簡単にできますが、いちいち作るのが手間。設定方法は簡単!functions.phpに以下を追加するだけです。上記のソースでは、IDが小さいカテゴリーを優先します。