こんにちは！これからコーディングの基礎を固めていただくために実践形式で学習を進めていきます！
まずはこの手順通りに進めていきましょう！
（この課題はprogateの上級編が終わった方を対象とした内容になっています。）
VScodeをインストールしよう
まずはエディターと呼ばれる、コードなどを記述、編集するためのものです。中でもVScodeは特に使い勝手がよく、便利な機能がたくさん搭載されています。まずはこちらをインストールしましょう。
インストールの手順はこちらをご覧ください。
VScodeでは標準でEmmetというコーディングの高速化のためのツールが搭載されています。web制作には欠かせないツールなので、自分ができそうな部分から導入していくことをおすすめします！
Emmetの詳しい記事はこちら↓
また、VScodeのショートカットキーにも慣れて少しづつでも導入して行きましょう！
便利なプラグインを入れよう
プラグイン（拡張機能）とは、ツールの機能をパワーアップしてくれるもので、「プラグイン」とも呼ばれます。ここではよく使う拡張機能を厳選して紹介いたしますので、皆さんのお持ちのVScodeにも拡張機能を入れてみてください。またそれぞれどんな拡張機能なのか、公式から読む or 日本語サイトをググってみてください！
以下のプラグインを導入してみてください。
自動セーブにしよう
ここでVScodeの自動保存をしてくれる便利な設定をしておきましょう。これによりわざわざ上書き保存をしなくても勝手に書き換えて保存してくれるのでこの先大変便利で開発が大幅に早くなります。
左下の歯車のボタンをクリック→設定を選択します。
設定の一番上の欄のAuto SaveをafterDelayにします。
これで完了です。
フォルダとファイルを作ってみよう
まず、どこでもいいので「marumo」という名前のフォルダを作ってみましょう。
次にコチラをクリックしてダウンロードします。
「img」というzip(圧縮されたフォルダ）がダウンロードできたと思います。
コチラを解凍（ダブルクリック）します。
これを、先ほど作った「marumo」というフォルダの中にいれましょう。
↓このように「marumo」のフォルダの中に「img」フォルダが入っている状態になればOKです！
VScodeで読み込もう
次にこのフォルダをVScodeに読み込んでみます。
VScodeを起動したらファイル→Open(開く）を選択、「marumo」フォルダを選びます。
↓フォルダの開き方はこのようにVScodeに直接ドラックしていっても読み込むことができます（特にwinの方はコチラでどうぞ）
↓VScodeで「marumo」 フォルダを開いてこのように表示されていればOKです。
htmlとcssを作ろう
次にhtmlファイルとcssフォルダ、cssフォルダの中にcssファイルを作ります。
↓※フォルダとファイルの違いがわからない方はコチラを参考にしてください。
- marumoフォルダの直下にindex.htmlファイルを作る
- marumoフォルダの直下にcssフォルダを作る
- cssフォルダの中にcssファイルを作る
↓このようにVScode上で作成してみましょう
構造はこのようになります。これは基本的な構造になるので覚えておきましょう。
↓VSocde上ではこのようになればOKです。
htmlを書いてみよう
まずはhtmlを書いて見ましょう。htmlの書き始めにはいくつかルールがあります。暗記するものではありませんが、導入すべきものを把握しておきましょう。
htmlには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>
↓htmlがこのように表示されているか確かめてみましょう。
▼詳しくはこちらも見てみてください
パスを繋げてみよう
次に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のデザインカンプからコーディングを行っていただきます！
↓コチラが今回のデザインカンプです。
↓XDデータからの値の取得方法、コーディングの方法はコチラを参考にしてください。
innerを作ろう
コーディングする時はinnerを意識するととても作りやすいです。
今回の場合は1080pxの中にコンテンツ（内容）が基本おさまっています。
これを意識しましょう。詳しくはこちらの記事を参考にしてください。
レイアウトの基本である.innerの中央寄せを覚えよう！
flex-boxを知ろう
横並びのレイアウトを作る時、progateではを主にfloatを使ってきましたが、今回はflex-boxというcss技法でレイアウトを作ってみましょう！
flex-boxはこちらを参考にしてください。そのほかでも「flex-box とは」などで自分でも調べてみてください。
横並びのレイアウトは基本flexboxを導入してみましょう！
検証機能を知ろう
コードがうまく反映されない・何かずれてる…といった時にまず確認して欲しいのがGoogle Chromeの「検証」機能です。 HTMLやCSSが確認でき、さらにエラー箇所も教えてくれるのでコーディングの際はこちらを開いて確認しながら進めましょう。 使っていくうちに便利さがわかりますので、まずは使い方をざっくり把握してください。
参考コード
目安としては30分調べてもわからなかったら参考コードを見てみましょう。この段階で全て把握できていなくても全く問題ありません。なんとなくの理解でも大丈夫です！
コードには一つ一つに解説は入れていません。ググる力が大切になるので、cssのわからないところなどはこの文をそのままコピーしてググってみましょう。
レスポンシブについて
レスポンシブに関しては今回はデザインデータがありません。実務ではレスポンシブのデータがないことが多く、自分でデザインしなければならない時が多いです。
その時の注意点、作り方等をまとめましたので、こちらを参考にレスポンシブまで作ってみてください。
最後に
ここまで最初から完璧に作れる必要はありません。まずは「見た目通りのものを作る」という目標だけに絞り、作っていきましょう！
もしご質問等あれば私のtwitterのDMに連絡くださればお答えしますので、ご連絡ください。
それでは頑張りましょう！＼＼\\٩( ‘ω’ )و //／／
