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

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

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

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

VScodeをインストールしよう

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

[blogcard url=”https://code.visualstudio.com/”]

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

[blogcard url=”https://code.visualstudio.com/”]

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

Emmetの詳しい記事はこちら↓
[blogcard url=”https://haniwaman.com/emmet/”]

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

[blogcard url=”https://qiita.com/naru0504/items/99495c4482cd158ddca8″]

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

プラグイン（拡張機能）とは、ツールの機能をパワーアップしてくれるもので、「プラグイン」とも呼ばれます。ここではよく使う拡張機能を厳選して紹介いたしますので、皆さんのお持ちの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のプラグインの入れ方の詳しくはこちらを参考にしてください。

[blogcard url=”https://www.atmarkit.co.jp/ait/articles/1511/27/news029.html”]

自動セーブにしよう

ここでVScodeの自動保存をしてくれる便利な設定をしておきましょう。これによりわざわざ上書き保存をしなくても勝手に書き換えて保存してくれるのでこの先大変便利で開発が大幅に早くなります。

左下の歯車のボタンをクリック→設定を選択します。

設定の一番上の欄のAuto SaveをafterDelayにします。

これで完了です。

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

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

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

[clickliscode color=”orange” type=”oehler” url=”https://zukulog098r.com/wp-content/uploads/2019/05/img.zip” target=”” rel=””]画像フォルダダウンロード[/clickliscode]

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

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

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

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

VScodeで読み込もう

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

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

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

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

htmlとcssを作ろう

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

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

[blogcard url=”https://wa3.i-3-i.info/diff354file.html”]

手順

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

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

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

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

htmlを書いてみよう

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

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

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

[blogcard url=”https://saruwakakun.com/html-css/basic/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>

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

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

[blogcard url=”https://saruwakakun.com/html-css/basic/head”]

パスを繋げてみよう

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

<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";

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;
}

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

.red{
color:red;
}

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

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

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

XDデータの見方を知ろう

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

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

[blogcard url=”https://xd.adobe.com/spec/d5a39894-59ad-4369-54d0-1e00d2521f83-a392/”]

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

[blogcard url=”https://haniwaman.com/xd-coding/”]

innerを作ろう

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

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

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

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

flex-boxを知ろう

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

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

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

[blogcard url=”https://www.webcreatorbox.com/tech/flexbox”] [blogcard url=”https://haniwaman.com/flexbox/”]

検証機能を知ろう

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

[blogcard url=”https://saruwakakun.com/html-css/basic/chrome-dev-tool”]

参考コード

目安としては30分調べてもわからなかったら参考コードを見てみましょう。この段階で全て把握できていなくても全く問題ありません。なんとなくの理解でも大丈夫です！

コードには一つ一つに解説は入れていません。ググる力が大切になるので、cssのわからないところなどはこの文をそのままコピーしてググってみましょう。

[clickliscode color=”green” type=”oehler” url=”https://zukulog098r.com/wp-content/uploads/2019/05/marumo-cording-1.zip” target=”” rel=””]コーディングサンプルダウンロード[/clickliscode]

レスポンシブについて

レスポンシブに関しては今回はデザインデータがありません。実務ではレスポンシブのデータがないことが多く、自分でデザインしなければならない時が多いです。

その時の注意点、作り方等をまとめましたので、こちらを参考にレスポンシブまで作ってみてください。

webサイトコーダーなら最低限知っておきたいスマホレスポンシブデザイン

2019年3月5日

最後に

ここまで最初から完璧に作れる必要はありません。まずは「見た目通りのものを作る」という目標だけに絞り、作っていきましょう！

もしご質問等あれば私のtwitterのDMに連絡くださればお答えしますので、ご連絡ください。

twitter

それでは頑張りましょう！＼＼\\٩( ‘ω’ )و //／／