なきちこんにちは、かなきち(@kanakichi0801)です今後、簡単なサイトを1サイト作っていきます!お金をかけずに、コーディングの勉強ができる記事を日々あげていきますので他の記事も見ていただけたら幸いです。以下のリンクからコーディング練習用の完成デザインを確認できます。コーディング練習用デザイン[手順1]以下のリンクから、コーディングに必要なパーツをダウンロードください。ダウンロードリンク[手順2]パーツをの中身を確認してください。以下の画像のように名前がついています。使用用途は、あくまでコーディング練習用としてお使いください。ダウンロードしたものになります。これからの記事を読むとホームページが1つ作れます今回の記事では、先ほどのコーディング用パーツをダウンロードし、コーディング計画図の作成、リセットCSSの作成とファイルの読み込み方について書きます。事前準備はめちゃめちゃ重要なのでしっかり覚えて行きましょう!コーディングの計画を立てよう!htmlの基礎コーディングドメインをたたいて最初に表示されるファイルとは?ファイル階層を揃えよう!リセットCSSを読み込もうCSSファイルをHTMLファイルに読み込もうできたと思っても必ず確認。まとめコーディングの計画を立てよう!デザインデータが来て、まずやることはコーディング計画図を作ることです。コーディング計画図とは、どの流れ・順番でコーディングをしていくか。class名はどうするかなどを書いたものです。コーディング初心者のうちはデザインデータを印刷し、そこに箇条書きでいいので自分のコーディングの計画を書き込みましょう。以下の画像は、今回のデザインを元に私なりに計画を立てたものです。Screenshot]を使って作りました。1.ヘッダーの中にナビゲーションいれます。gnav2.メインビジュアル。mv3.タイトルパーツ。base__title4.こだわりabout5.こだわりの3カラム。about__3column6.メニュー。menu7.メニューのリスト。menu__list8.住所やマップエリア。access9.ツイッターやメールボタン。footerのトップへ戻るボタン。totophtmlの基礎コーディングみみぺんブログで何度も登場している、HTMLの基本構造をテキストエディタにコピペしてください。ファイル名はindex.htmlにして保存してください。<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というファイルを次に読みに行きます。いう名前で保存すると覚えましょう。ファイル階層を揃えよう!先ほどの[index.html]と記事の冒頭でダウンロードした[img]フォルダを同じ場所に格納してください。同じ場所に[css]というフォルダを作ってください。リセットCSSを読み込もうリセットCSSとは以下のコードを言います。bottom;}:focus{outline:none;}上記のコードをコピペして、[base.css]を作成しましょう。それを先ほど作った[cssフォルダ]の中にいれましょう。コードを覚えようとしなくて大丈夫です。ホームページを作る時はリセットCSSを必ず読み込むとだけ覚えましょう。CSSファイルをHTMLファイルに読み込もう読み込むためのタグは以下の通りです。href="[CSSファイル場所]">今回は、[index.html]と同階層に[cssフォルダ]を作り、その中に[base.css]というファイルをいれました。[index.html]から見て、同階層にある[cssフォルダ]内の[base.css]を呼び出します。書き方は以下の通りです。記述するか何も記述しません。-->[index.html]と同階層に[base.css]を置いた場合は以下の指定になります。-->また、href=""の中身をパスと言います。パスには種類があり、このパスの種類は[相対パス]と言います。確実に覚えて行きたいところですが、複雑なので今回は飛ばします。href="./css/base.css"></head><body></body></html>index.htmlを上記のように記述すればホームページの事前準備の完了です。できたと思っても必ず確認。ブラウザに[index.html]をドラックしましょう。画面上で右クリックをし[ページのソースを表示]をクリックします。ソースが開いたら、赤で囲っているパスをクリックしましょう。パスの中身(base.cssの中身)が表示されていれば成功です。お疲れ様でした!まとめ今回のふりかえりですが、ホームページを作る前の事前準備ということで、コーディング練習用パーツをダウンロードしました。次に、デザインデータを元にコーディング計画図を作りました。最後に、[index.html]とリセットCSSを記述した[base.css]を作成し、それを[index.html]に読み込ませました。これで事前準備完了です!最後までご覧いただきありがとうございます。こんにちは、かずん(@kazoonLab)です。前回の記事で...2019-12-05コーディング練習(3)特殊文字を使いメニュー表を実装しよう!こんにちは、かなきち(@kanakichi0801)です。かなきちスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。