こんにちは、かなきち(@kanakichi0801)です
今後、簡単なサイトを1サイト作っていきます！
お金をかけずに、コーディングの勉強ができる記事を日々あげていきますので他の記事も見ていただけたら幸いです。
以下のリンクからコーディング練習用の完成デザインを確認できます。
＞ コーディング練習用デザイン
[手順１]以下のリンクから、コーディングに必要なパーツをダウンロードください。
＞ ダウンロードリンク
[手順２]パーツをの中身を確認してください。以下の画像のように名前がついています。
使用用途は、あくまでコーディング練習用としてお使いください。
※デザインに使用している写真は 写真AC からダウンロードしたものになります。
これからの記事を読むとホームページが１つ作れます
今回の記事では、先ほどのコーディング用パーツをダウンロードし、コーディング計画図の作成、リセットCSSの作成とファイルの読み込み方について書きます。事前準備はめちゃめちゃ重要なのでしっかり覚えて行きましょう！
コーディングの計画を立てよう！
デザインデータが来て、まずやることはコーディング計画図を作ることです。
コーディング計画図とは、どの流れ・順番でコーディングをしていくか。class名はどうするかなどを書いたものです。
コーディング初心者のうちはデザインデータを印刷し、そこに箇条書きでいいので自分のコーディングの計画を書き込みましょう。
以下の画像は、今回のデザインを元に私なりに計画を立てたものです。
以下の記事で紹介している[Awesome Screenshot]を使って作りました。
blog.mimipen.net
【計画例】※あくまで私の場合です。
1.ヘッダーの中にナビゲーションいれます。gnav
2.メインビジュアル。mv
3.タイトルパーツ。base__title
4.こだわりabout
5.こだわりの3カラム。about__3column
6.メニュー。menu
7.メニューのリスト。menu__list
8.住所やマップエリア。access
9.ツイッターやメールボタン。site__link
10. footerのトップへ戻るボタン。totop
htmlの基礎コーディング
みみぺんブログで何度も登場している、HTMLの基本構造をテキストエディタにコピペしてください。ファイル名はindex.htmlにして保存してください。
[HTML基本構造]
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>みみぺんカフェ</title> </head> <body> </body> </html>
[HTMLの基本構造の解説↓]
blog.mimipen.net
[テキストエディタを使って、ブラウザに文字を表示させる方法↓]
blog.mimipen.net
[index.html]というファイル名で保存と言いましたが、こちらは任意のファイル名ではありません。次に[indexファイル]について少し解説しています。
ドメインをたたいて最初に表示されるファイルとは？
ホームページにはそれぞれ住所が割り当てられます。ホームページの住所をドメインと言います。
みなさん何気なくサイトを表示しているかと思います。
サイトのTOPページ、このブログでいうとhttps://blog.mimipen.netにアクセスして最初に表示されるのはindex.htmlという名前のファイルです。
また、index.htmlがなければ、ブラウザが自動でindex.phpやindex.htmというファイルを次に読みに行きます。
これはルールなので、TOPページに指定したいページは index という名前で保存すると覚えましょう。
ファイル階層を揃えよう！
先ほどの[index.html]と記事の冒頭でダウンロードした[img]フォルダを同じ場所に格納してください。
そして、同じ場所に[css]というフォルダを作ってください。
リセットCSSを読み込もう
リセットCSSとは以下のコードを言います。
html{color:#000;background:#fff} body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,figure{margin:0;padding:0} table{border-collapse:collapse;border-spacing:0} fieldset,img{border:0} address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal} ol,ul{list-style:none} caption,th{text-align:left} h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal} q:before,q:after{content:''} abbr,acronym{border:0;font-variant:normal} sup{vertical-align:text-top} sub{vertical-align:text-bottom} input,textarea,select{font-size:inherit;font-weight:inherit;} legend{color:#000} *{zoom: 1;} img{vertical-align: bottom;} :focus{outline:none;}
[リセットCSSについて↓]
blog.mimipen.net
@charset "utf-8"; /*-------------------------------------------------------------- RESET --------------------------------------------------------------*/ html{color:#000;background:#FFF} body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,figure{margin:0;padding:0} table{border-collapse:collapse;border-spacing:0} fieldset,img{border:0} address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal} ol,ul{list-style:none} caption,th{text-align:left} h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal} q:before,q:after{content:''} abbr,acronym{border:0;font-variant:normal} sup{vertical-align:text-top} sub{vertical-align:text-bottom} input,textarea,select{font-size:inherit;font-weight:inherit;} legend{color:#000} *{zoom: 1;} img{vertical-align: bottom;} :focus{outline:none;}
上記のコードをコピペして、[base.css]を作成しましょう。それを先ほど作った[cssフォルダ]の中にいれましょう。
コードを覚えようとしなくて大丈夫です。ホームページを作る時はリセットCSSを必ず読み込むとだけ覚えましょう。
CSSファイルをHTMLファイルに読み込もう
読み込むためのタグは以下の通りです。
<link rel="stylesheet" type="text/css" href="[CSSファイル場所]">
今回は、[index.html]と同階層に[cssフォルダ]を作り、その中に[base.css]というファイルをいれました。
[index.html]から見て、同階層にある[cssフォルダ]内の[base.css]を呼び出します。書き方は以下の通りです。
<link rel="stylesheet" type="text/css" href="./css/base.css">
同じ階層、または下の階層(深い階層)にあるファイルを指定する場合は、先頭に ./ を記述するか何も記述しません。※どちらでもOK！
<link rel="stylesheet" type="text/css" href="./css/base.css"><!-- 記述有り --> <link rel="stylesheet" type="text/css" href="css/base.css"><!-- 記述有り -->
[index.html]と同階層に[base.css]を置いた場合は以下の指定になります。
<link rel="stylesheet" type="text/css" href="./base.css"><!-- スラ有り --> <link rel="stylesheet" type="text/css" href="base.css"><!-- スラ無し -->
また、href=""の中身をパスと言います。 パスには種類があり、このパスの種類は[相対パス]と言います。確実に覚えて行きたいところですが、複雑なので今回は飛ばします。
[コピペ用のHTML]
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>みみぺんカフェ</title> <link rel="stylesheet" type="text/css" href="./css/base.css"> </head> <body> </body> </html>
index.htmlを上記のように記述すればホームページの事前準備の完了です。
できたと思っても必ず確認。。。
ブラウザに[index.html]をドラックしましょう。画面上で右クリックをし[ページのソースを表示]をクリックします。
ソースが開いたら、赤で囲っているパスをクリックしましょう。
パスの中身(base.cssの中身)が表示されていれば成功です。お疲れ様でした！
まとめ
今回のふりかえりですが、ホームページを作る前の事前準備ということで、コーディング練習用パーツをダウンロードしました。
次に、デザインデータを元にコーディング計画図を作りました。最後に、[index.html]とリセットCSSを記述した[base.css]を作成し、それを[index.html]に読み込ませました。これで事前準備完了です！
最後までご覧いただきありがとうございます。
次の記事はこちら↓
blog.mimipen.net
この記事がいいなっと思ったら読者登録をお願いいたします！
【ツイッターでは主に、仕事や技術系の内容をつぶやいています】
技術者の方ともっと繋がりたいっす！お気軽にフォローもお願いします！
かなきち(@kanakichi0801)
かずん(@kazoonLab)