初心者がHTML&cssで完全無料で1からホームページを作って気づいた10の事柄

プログラミング

ついに研究室のホームページが完成しました。

いやー、長かった。
本当に、初心者になんてことをやらせるんだあの先生は。

この記事はいかに私が素晴らしいかを伝える記事です。
技術的なことはまったく触れていません。
ただ、初心者がホームページを作るにあたって知っておきたかったこと、
知っていると便利だったことについてまとめます。

初心者の実力

ここで、初心者の実力を見せておきます。

・HTMLは学校の授業で少しやったことがある(Hello Worldを表示する程度)
・プログラミングに興味はある(C言語を少しかじった程度、for文で挫折)
・Wordpressでブログをしていた(このサイトとは別)
・CSS?
・なんちゃって理系(数学嫌い、無名大学)

こんな感じ。

使ったツール

・テキストエディタ:Brackets
・ブラウザ:Google Chrome
・写真編集:GIMP
・画像作成・編集:inkscape
・教科書:HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)

[amazonjs asin=”4883379647″ locale=”JP” title=”HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)”]

HTML5&CSS3レッスンブック

[amazonjs asin=”4883378721″ locale=”JP” title=”HTML5&CSS3レッスンブック”]

モチベーションのためにMacBook Proで大体は作りました。
細かな編集は慣れてるWindowsでしたけどね。
大学の図書館にあった本を教科書にしたけど、かなり分かりやすかったです。

作ったサイト

・所属している大学の研究室の紹介サイト(お見せできません)
・HTMLとCSSのみで作った(java scriptは無理)

かかった時間

・大枠の作成:1週間
・画像の編集:3日
・先生とデザイン打ち合わせ:3週間

大体、一ヶ月くらいで完成です。

その後、公開まで3ヶ月くらい足止めされましたけど。(先生がGoサインを出さない)
けどこれは、ほとんど毎日ホームページ作成に費やしてました。

まったくの初心者がHTMLとCSSを使って1からホームページを作って気がついた10のこと

1.実践的な教科書があった方が良い

私は大学の図書館で本を借りましたが、仕組みがうんぬんかんぬん。
サーバがうんたらかんたら、言ってる本より、実際に作りながら説明してくれる教科書の方が楽しいです。
サーバがどうたら、なんて話は実際に公開する段階で必要になりますが、
コンテンツもないのにそんな話はつまらないです。
ので、こういうサイト作ります。
コードはこれです!って書いたある教科書の方が楽しいです。

2.デュアルディスプレイだと便利

テキストエディタ(HTML書くためのソフト)をBracketsにすると編集したものをリアルタイムで確認できるのが便利です。
無料ですし、デザインもかっこいいです。
ただ、ノートパソコンだったり、シングルディスプレイだと、Bracketsとchromeの画面がどうしても被るので、
画面が2つあると便利だなーと思いました。
絶対必要かと言われると、必要ではないですが、あると便利!くらいな感じです。

3.サイトマップは作っておくと自分が楽になる

サイトマップ(どこと、どこのページが繋がっているかが分かるもの)は絶対に作った方がいいです。
ホームページをHTMLで全部書くとリンクを貼る作業が苦行でしかありませんでした。
リンク貼り間違えると全然違うページに行っちゃいます。
これは、本当に世の中にあるサイト、全部すげーなって思います。
だってちゃんと、思い通りのページに行くんですもん。
ということで、リンクの正誤を確かめるためにサイトマップは作っておきましょう。

4.最初にページのテンプレートを作るべし

これも絶対に要る。
私の顧客(先生)は意外とデザインにこだわって大変でした。
なので、まず、サイトの概形のデザインを手書きで書いて、先生に見せてから作ってました。
CSSを後から変更するのってめんどいんです。
ということで、まず、サイトをどんなデザインにしたいか考えましょう。
細部までこだわった方が良いです。
ある程度完成してからだと、全部のページに反映するのが辛いです。

5.HTMLとCSSは勉強でなんとかなる

これ自分のことですが意外でした。
作りながらだと、知識がつきやすいのか自然とできるようになります。
ただ、実際に手を動かさないことにはサイトはできないので、教科書を読むというより、
教科書のコードをそのまま書いて、実際にサイトにできているか確認してました。
まったくの初心者でも、案外なんとかなりました。

6.デザインのセンスはなんともならない

これが一番の問題。センスを問われます。
HTMLとCSSは付け焼き刃の知識でもなんとかなるんですけど、
デザインの知識と構成だけはどうにもなりません。
おそらく練習していくことである一定のレベルには到達できるんでしょうけど、
いわゆるプロのレベルはハードルが高すぎます。
でも、教科書通り作れば、最低限”今風”のサイトはできますので、ご安心を。

7.SQLインジェクションって何?

ホームページを作成していることを、詳しい人に話したら、
「SQLインジェクションの対策とかしないといけないよ」とのこと。
聞いた直後は思考停止状態でしたか、プログラムに誤作動を起こすようなことを書いて、
サーバ内のデータを盗む悪い人がいるみたいで、その手段のようです。
対策って言われてもな〜と思っていたら、java scriptとか使ってないなら大丈夫見たいので、
今回のサイトではscriptなしの動きのないサイトになっちゃいました。
でも、大学のサーバで研究データ盗まれたとかよく聞くので、対策できないなら
オールカットの方針で行こう!と決めました。

8.画像編集が面倒臭い

サイトに画像を入れようと思うと、フリー素材とか拾ってくるんですけど、
そこは研究室の紹介サイト。実験器具とかは一々、自分で写真撮って加工しないといけません。
しかも、私の先生、写真にこだわりのある人なので大変でした。

百歩譲って写真はまだ良いです。
そのうち、こんなイメージの画像が欲しいと言われれば、inkscapeとGIMPを駆使して
画像作り。これが一番大変だったかもしれないです。
できれば、最初はフルー素材で徐々にこだわって行くと吉です。

9.WordPressで作った方が絶対に楽

何度思ったことか。絶対にWordPressでサイト作った方が楽です。
でも、今回は引き継いでくれる人がそう言う知識ないので、「更新とかしないと困るしなぁ」
って感じで、HTMLベタ打ちでサイト作りました。
もし、自分のサイト作るなら絶対にWordpree使います。
ホームページビルダーとかは使ったことありませんが、
ホームページビルダーで作ると、何がどう動いているのかわからないので、使いませんでした。

10.自分で作った自己満足感でにやける

まぁ、何はともあれ完成してしまえば、自己満足感が半端ないです。
研究室で両手挙げてガッツポーズしましたからね。
そして、同級生に「見て見て!」ってスマホ片手に見せに行きましたから。
先生も喜んでくれたし、これが何年かはネットの世界に流れていると思うと
自分が誇らしいです。
研究では一度もそんなこと思ったことないですけどね!( ´∀`)

まとめ:無料でホームページは作れる、でも大変!

ホームページを作るのは意外に簡単です。
ただ、HTMLの勉強したり、サーバの契約だったりと面倒なことは確かに多いです。
完全無料で見栄えの良いものを作るにはそれなりに自分が努力しないといけないのもわかりました。

でも、それでも、一から自分で作ったサイトというのは愛着がすごい湧きます。
もし、私と同じような立場になった方がいましたら、ぜひ完成の満足感を味わって欲しいです。
やって良かったなって思えます!
何より、周りがすごい感謝してくれます。(私は先生だけでしたが、それでも嬉しいです。)

コメント

タイトルとURLをコピーしました