田舎フリーランス養成講座サイト制作学習【コーディング編】

こんにちは！これからコーディングの基礎を固めていただくために実践形式で学習を進めていきます！

まずはこの手順通りに進めていきましょう！

（この課題はprogateの上級編が終わった方を対象とした内容になっています。）

VScodeをインストールしよう

まずはエディターと呼ばれる、コードなどを記述、編集するためのものです。中でもVScodeは特に使い勝手がよく、便利な機能がたくさん搭載されています。まずはこちらをインストールしましょう。

code.visualstudio.com

Visual Studio Code - Code Editing. Redefined

https://code.visualstudio.com

Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.

インストールの手順はこちらをご覧ください。

code.visualstudio.com

Visual Studio Code - Code Editing. Redefined

https://code.visualstudio.com

VScodeでは標準でEmmetというコーディングの高速化のためのツールが搭載されています。web制作には欠かせないツールなので、自分ができそうな部分から導入していくことをおすすめします！

Emmetの詳しい記事はこちら↓

HPcode（えいちぴーこーど）

「はじめて」でも簡単！Emmetの使い方とよく使うパターン集 | HPcode

https://haniwaman.com/emmet/

display: block;の15文字をdbの2文字で入力できるようになるのがEmmetです。 1日中コーディングしているわたしにとってこの1回の差は大きく、100回入力したときには1,300文字分の差が生まれているわけですね。1,300文字入力するのにどれくらい時間がかかりますか？ ...

また、VScodeのショートカットキーにも慣れて少しづつでも導入して行きましょう！

Qiita

【Mac版】 VisualStudioCode キーボードショートカット - Qiita

https://qiita.com/naru0504/items/99495c4482cd158ddca8

Visual Studio Codeは0.5.0のときにインストールして使ってみてしばらく様子見だなあって思ってあまりまじめに使っていなかったのですが、オープンソース化されたので一念発起してv0.10.1までアップグレードしてまじめに...

便利なプラグインを入れよう

プラグイン（拡張機能）とは、ツールの機能をパワーアップしてくれるもので、「プラグイン」とも呼ばれます。ここではよく使う拡張機能を厳選して紹介いたしますので、皆さんのお持ちのVScodeにも拡張機能を入れてみてください。またそれぞれどんな拡張機能なのか、公式から読む or 日本語サイトをググってみてください！

以下のプラグインを導入してみてください。

プラグイン

Japanese Language Pack for Visual Studio Code

Auto rename tag
CSSTree validator
IntelliSense for CSS class names in HTML
HTMLhint
zenkaku

Live Server

プラグインの入れ方は左側の一番下にあるアイコンをクリックします。

ここに検索窓が出てくるのでこちらにプラグイン名を入力→インストールを実行します。

VScodeのプラグインの入れ方の詳しくはこちらを参考にしてください。

＠IT

Visual Studio Codeの拡張機能を使ってみよう (1/2)

https://www.atmarkit.co.jp/ait/articles/1511/27/news029.html

Visual Studio Codeは拡張機能（エクステンション）をインストールすることで、さらに強力なエディターへと姿を変える。本稿では拡張機能の使い方を見てみよう。

フォルダとファイルを作ってみよう

まず、どこでもいいので「marumo」という名前のフォルダを作ってみましょう。

次にコチラをクリックしてダウンロードします。

画像フォルダダウンロード

「img」というzip(圧縮されたフォルダ）がダウンロードできたと思います。

コチラを解凍（ダブルクリック）します。

これを、先ほど作った「marumo」というフォルダの中にいれましょう。

↓このように「marumo」のフォルダの中に「img」フォルダが入っている状態になればOKです！

VScodeで読み込もう

次にこのフォルダをVScodeに読み込んでみます。

VScodeを起動したらファイル→Open(開く）を選択、「marumo」フォルダを選びます。

↓フォルダの開き方はこのようにVScodeに直接ドラックしていっても読み込むことができます（特にwinの方はコチラでどうぞ）

↓VScodeで「marumo」フォルダを開いてこのように表示されていればOKです。

htmlとcssを作ろう

次にhtmlファイルとcssフォルダ、cssフォルダの中にcssファイルを作ります。

↓※フォルダとファイルの違いがわからない方はコチラを参考にしてください。

wa3.i-3-i.info

「ファイル」と「フォルダ」の違い｜「分かりそう」で「分からない」でも「分かっ...

https://wa3.i-3-i.info/diff354file.html

「ファイル」と「フォルダ」の違いを何となく説明しています。

手順

marumoフォルダの直下にindex.htmlファイルを作る
marumoフォルダの直下にcssフォルダを作る
cssフォルダの中にcssファイルを作る

↓このようにVScode上で作成してみましょう

構造はこのようになります。これは基本的な構造になるので覚えておきましょう。

↓VSocde上ではこのようになればOKです。

htmlを書いてみよう

まずはhtmlを書いて見ましょう。htmlの書き始めにはいくつかルールがあります。暗記するものではありませんが、導入すべきものを把握しておきましょう。

htmlにはheadタグというものがあり、この中に必要な情報を入れていくことから始まります。

▼headについてはこちらを参考にしてください。

サルワカ | サルでも分かる図解説明マガジン

head内に書くべきタグを総まとめ：SEO対策に有効なものは？

https://saruwakakun.com/html-css/basic/head

head内に書くべきタグを総まとめしました。大手メディアが実際にどんなタグを入れているのかも紹介しています。

まずはこちらをコピーして貼ってみてください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>まるも</title>
  <meta name="description" content="まるもは千葉県にあります。">
</head>
<body>
<h1　class="red">こんにちは！</h1>
</body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

<h1　class="red">こんにちは！</h1>

</body>

</html>

↓htmlがこのように表示されているか確かめてみましょう。

▼詳しくはこちらも見てみてください

サルワカ | サルでも分かる図解説明マガジン

head内に書くべきタグを総まとめ：SEO対策に有効なものは？

https://saruwakakun.com/html-css/basic/head

head内に書くべきタグを総まとめしました。大手メディアが実際にどんなタグを入れているのかも紹介しています。

パスを繋げてみよう

次にhtmlとcssが繋がるような記述を書いていきます。コチラをコピーしてタイトルの下にいれましょう

<link rel="stylesheet" type="text/css" href="〇〇">

1	<link rel="stylesheet" type="text/css" href="〇〇">

そして〇〇となっている部分を書き換えます。index.htmlから見て同じ階層のcssフォルダの中のstyle.cssにパスを繋げたいので以下のように書き換えます。

これでパスが繋がるはずです。これは相対パスと言われる記述です。詳しくはこちらをみてみてください。

✅なくそう！ファイルパス！の壁！ html,css初心者泣かせのファイルパス（自分も泣いた）について図解しました。 pic.twitter.com/QfNp83HUOO
— ちづみ (@098ra0209) 2019年3月11日

これでindex.htmlとstyle.cssのパスが繋がりました。

cssを書いてみよう

次にstyle.cssのファイルを開き、一行目に以下のように記入しましょう。

これはcssに最初に記述するべきもので、以下を記述することによって、 css言語を正しく読み込んでくれるようになります。

@charset "utf-8";

1	@charset "utf-8";

reset.cssを書こう

reset.cssとは、ブラウザ毎に異なるスタイルを持つ特定のセレクタに対してプロパティを指定してブラウザ間の表示を揃えるという仕組みです。これを書いておくことによってブラウザごとにつけられているcssのことを打ち消すことができ、デザイン通りのコーディングがしやすくできます。開発規模によってはreset.cssで別のcssファイルを作った方がいい場合もありますが、今回はstyle.cssの上部に記載しましょう。

ひとまずはこんな感じに書いてみて、後々自分なりにやりやすいように変えてみてください。

/*resetCSS*/
html, body, h1, h2, h3, h4, ul, ol, dl, li, dt, dd, p, div, span, img, a, table, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  font-weight: normal;
  font-size: 100%;
  vertical-align:baseline;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
p{
  line-height:1.65;
}
article, header, footer, aside, figure, figcaption, nav, section {
  display:block;
}
body {
  line-height:1;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
    background: #fff;
    color: #333;
    font-family: 'Noto Sans JP', '游ゴシック Medium', '游ゴシック体', 'Yu Gothic Medium', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
    font-size: 16px;
    line-height: 1;
}

ol, ul {
  list-style: none;
  list-style-type: none;
}

a{
  text-decoration: none;
  color:#333;
}

/*resetCSS*/

html, body, h1, h2, h3, h4, ul, ol, dl, li, dt, dd, p, div, span, img, a, table, tr, th, td {

margin: 0;

padding: 0;

border: 0;

font-weight: normal;

font-size: 100%;

vertical-align:baseline;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

line-height:1.65;

}

article, header, footer, aside, figure, figcaption, nav, section {

display:block;

}

body {

line-height:1;

-ms-text-size-adjust: 100%;

-webkit-text-size-adjust: 100%;

background: #fff;

color: #333;

font-family: 'Noto Sans JP', '游ゴシック Medium', '游ゴシック体', 'Yu Gothic Medium', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳＰゴシック', 'MS PGothic', sans-serif;

font-size: 16px;

line-height: 1;

}

ol, ul {

list-style: none;

list-style-type: none;

}

text-decoration: none;

color:#333;

}

次にこの記述をしてみましょう。

.red{
color:red;
}

.red{

color:red;

}

これでhtmlに記述した「こんにちは！」の文字が赤くなっているか確認してみましょう。

このように表示されて入ればOKです！

これで、htmlとcssのコードを書くための準備は整いました！次からはコーディングに関して意識するべきことを記述していきます。

XDデータの見方を知ろう

今回はXDのデザインカンプからコーディングを行っていただきます！

↓コチラが今回のデザインカンプです。

xd.adobe.com

marumo

https://xd.adobe.com/spec/d5a39894-59ad-4369-54d0-1e00d2521f83-a392/

1 Screen, Published on Apr 06, 2019 09:47 GMT

↓XDデータからの値の取得方法、コーディングの方法はコチラを参考にしてください。

HPcode（えいちぴーこーど）

Adobe XDのデザインカンプからコーディングに必要な画像や値を取得する方法 | HPcode

https://haniwaman.com/xd-coding/

WebコーダーはAdobe XDを完全に扱える必要はありませんが、コーディングに必要な値やデータを取得できなければなりません。この記事ではXDのデザインカンプからコーディングする際に必要な値や画像を取得する方法を紹介していきます。 Photoshop、Illustratorに比べ...

innerを作ろう

コーディングする時はinnerを意識するととても作りやすいです。

今回の場合は1080pxの中にコンテンツ（内容）が基本おさまっています。

これを意識しましょう。詳しくはこちらの記事を参考にしてください。

レイアウトの基本である.innerの中央寄せを覚えよう！

flex-boxを知ろう

横並びのレイアウトを作る時、progateではを主にfloatを使ってきましたが、今回はflex-boxというcss技法でレイアウトを作ってみましょう！

flex-boxはこちらを参考にしてください。そのほかでも「flex-box とは」などで自分でも調べてみてください。

横並びのレイアウトは基本flexboxを導入してみましょう！

Webクリエイターボックス

これからのCSSレイアウトはFlexboxで決まり！

https://www.webcreatorbox.com/tech/flexbox

FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。前々からあった技術ですが、ブラウザーによって書き方が違ったり、仕様が

HPcode（えいちぴーこーど）

【コピペOKのサンプル付き】Flexboxはこの5パターン覚えておけば大丈夫！ | HPcode

https://haniwaman.com/flexbox/

Flexboxのプロパティってめっちゃ多いですが、全部を覚えなくても実務レベルで使うことはできます。わたしも最初のころはFlexboxのプロパティを試していましたが、実際に使うようになって「あれ、ほとんどのプロパティは使わなくて実装できるよね？」ってなりました...

検証機能を知ろう

コードがうまく反映されない・何かずれてる…といった時にまず確認して欲しいのがGoogle Chromeの「検証」機能です。 HTMLやCSSが確認でき、さらにエラー箇所も教えてくれるのでコーディングの際はこちらを開いて確認しながら進めましょう。使っていくうちに便利さがわかりますので、まずは使い方をざっくり把握してください。

サルワカ | サルでも分かる図解説明マガジン