PC用ウェブサイト(ホームページ)を丸ごと作ってみよう(1) 始める前の概要について

みなさまどうも。

初めましての方は初めまして、どこかの記事でお会いした方はまたお会い出来て大変光栄でございます。こちらはHTMLとCSSの実践編のコーナーでございます。ようこそおいで下さいました。

さて、こちらのコーナーではこれまで紹介してきたHTMLとCSSを使ったり使わなかったりして実践向きな内容を色々と紹介していきたいと思います。

当サイトによせられる質問で
「単純なHTMLページを作る時の一連の流れをなるべく細かく教えて欲しいデス(*'ω'*)」
という内容がかなり多いのでそれにバシッとお応えしていこうかなという次第でございますね。

ですのでJavaScript、更にPHPやRailsなどの動的言語は一切使わずHTMLとCSSのみでやっていきます。HTMLとCSSはJavaScriptやPHPとかを学ぶ前にやっておかないとどうしても次に進めなくなってしまう部分ですし意外と重要だったりしますからね。

あとPhotoshopもちょいちょい使っていくので「事前勉強もこのサイトでやってきたいぜぇ」っていう粋な方は

『HTML入門編』、『CSS入門編』、『CSS中級編』、『Photoshop入門編』

あたりを読み進めて頂ければと思います。

ただ単純なHTMLとCSSで構成されたサイトを作る解説、となるとそんなもんは世間にありふれてますし少々面白みが足りないのではと著者は考えます。

せっかく当サイトを訪れてくれた皆様にはより良い内容をご提供したいわけでございますので今回は「取引先から依頼を受けたと仮定してウェブサイトを作る」って感じのビジネス的な交渉や打ち合わせとかをする部分とかも含めたロールプレイング形式で色々とちょーーーーーーーー細かくやっていきましょう。

これは世間一般で言われるHTMLコーダーさんとかウェブデザイナーさんとかフロントエンドエンジニアさんって呼ばれる方々が日常的に仕事でやってるであろう内容になりますね。

まず今回作成していくウェブサイトの完成版の画像は以下となります。

(´-`).｡oO(画像素材はいつも通りぱくたそ様より拝借させて頂いておりマス...)

まあよくある少しおしゃれな感じのウェブサイトになりますね、デザインは著者が1時間くらいで作ったあんまやる気無いそこそこ適当なやーつになります。

さて、これから皆様にはウェブサイトを1本作成してもらうわーけなのですがこれまでHTMLとCSSをやってみて
「内容的にはそこまで難しくはなかったかなー(*'ω'*)」
って人が大半だったと思います。

ただウェブサイトを作成する際に注意すべきや確認しておくべき点が沢山あって、更にそれらはHTMLとかCSSとかそういうソースコード部分じゃないって事で慣れないとうちは色々と戸惑ってしまう部分が多いってのが実情なんですね。

ざざーーっと並べてみると

• HTMLタグ(要素)はどれを使えばいいの？divなの？pなの？
• フォントはどれを使えばいいの？どれでも使えるわけじゃないよね？
• 画像はどの形式のやつを使えばいいの？jpgなの？pngなの？それともsvgなの？
• アイコン画像だと形式はどうするべきなの？
• HTMLは5なの？4.01なの？それともXHTMLなの？
• CSS3は使って良いの？
• UTF-8なの？それともShift_JISの方が無難なの？
• こういうお仕事でのフォトショップなデータってどういう感じになるの？
• フォトショップ上なら色々なフォント使っても良いの？それともダメなの？
• フォトショップのフォルダ分けはどうするべきなの？
• フォトショップの単位はptで良いの？それともpxにすべきなの？mmとかは？
• 対応ブラウザは？
• 対応OSは？
• PCなの？スマホなの？それとも両方なの？
• ブラウザの幅は？ブラウザって大きくなったり小さくなったりするよね？
• ブラウザの一番小さい幅とか決めないとまずくない？だってブラウザが小さすぎると何も読めないよね？
• 古いブラウザはどうするの？切り捨てるべきなの？
• 音楽って流して良いの？
• 日本人向けのサイトに英語って使って良いの？それとも避けたほうが良いの？
• SEO対策はどうするの？SEOって重要だよね？
• meta keywordsって今必要なの？
• meta descriptionは？
• リンク付ける時って絶対URL？それとも相対？
• こういうお仕事受ける時って相手さんの組織的な構成はどういう感じなの？
• 交渉は誰にすればいいの？
• 納期はどのくらいがベストなの？
• ウェブサイトを公開するときはどうすればいいの？
• サーバーってなに？どれを選べば良いの？
• レンタルサーバー？それともVPS？それとも専用サーバー？
• FTPソフトってなに？それが無いとアップロードできないの？
• 今日の晩ごはんは何を食べればいいの？カレーなの？豚しゃぶなの？
• 初音ミクちゃんなの？IAちゃんなの？セクシーなの？キュートなの？どっちが好きなの？

なんてのがあったりします。

長年プログラミングをお仕事でやってる人にとってはごくごく基本的かつ簡単な内容になるわけなんですが初心者の方からするとやっぱり色々と謎が多いような感触がありますよね。

多分1度ちゃんとしたウェブサイトを作ってみれば注意すべき点が大分把握できるかと思いますので今回はこれらをがががーっと潰してしまいましょう。

(´-`).｡oO(ちなみに上記のウェブサイトを公開とかのサーバー周りに関する項目は別の記事でやっていきます...)

(´-`).｡oO(今回はHTMLとCSSがメインとさせて頂きますのでウェブサイトを作成するとこまででございますね...)

あとHTMLとかCSSとかを書かない完全ウェブ系なデザイナー志望の方も当コーナーは非常におすすめしたい次第でございます。ソースコードを書かないとはいえやはりHTMLやCSSの基礎を軽くでも知っておかないとウェブサイトとして構築しづらいデザインを作ってしまいがちになるのでそれを予防する感じですね。

というわけで一旦ここで記事を切りますね。次の記事では交渉とか相手(依頼者側)さんの組織的な構成とかそういうのを色々と確認していきましょう。ではこの辺で失礼致します。

この記事は桜舞が執筆致しました。

著者が愛する小型哺乳類

桜舞 春人 Sakurama Haruto ISDN時代から様々なコンテンツを制作しているちょっと髪の毛が心配な東京在住のプログラマー。生粋のロングスリーパーで、10時間以上睡眠を取らないと基本的に体調が悪い。好きなだけ寝れる生活を送るのが夢。ゲームとスポーツと音楽が大好き。誰か髪の毛を分けて下さい。

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。

トップページへ

次の記事へ

Tweet

シェア