【一部無料】コーディング練習「初級編」第一部 - 準備
おはようございます。
K2De-signの金子です。
前回のnoteを読んでいただいた方、ありがとうございます。
前回の「WEBデザイン模写に隠された罠」を読んでいただいた方々から、たくさんのご意見をいただきました。
・模写noteを購入したけど、情報設定がされていなかった。
・教材プログラムを受講したが、結局は模写ではなくコピーだった。
・案件をとれたけど、実際には求められているレベルではなかった。
・確かに本当にこれでいいのか不安だった。
など、主に現状に対して不満不安のご意見をいただいております。
上記のnoteでも話をしたように、私は情報設定しているものは見たことがありません。
ありませんと言ったからと言って解決するわけではありません。
頂いた中には、実際に制作をしてほしいというご意見も多々ありました。
はい、作っちゃいました！
コーディング練習「初級編」
私がコーダーとして15年以上活動中で学んだ知識や、必要になる知識を提供していきます。
今まで100名以上に教えて、コーダーとして世に排出してきた情報をできる限り詰め込んでいきます。
まずは「初級編」からになりますが、お付き合いください。
コーディング練習「初級編」第一部 - 準備 始めていきます。
▶初級編について
今回の「初級編」では、コーディングの基礎を学ぶことができます。
合わせて本来の模写が行えるようにしております。
◎この「初級編」はこんな人にオススメです。
・コーディング初心者
・Progateのhtml/cssコースを終わらせた
・ただサイトのコピーを行っている
・なんとなく理解している
・デザインしかできない
・本気でこの業界で仕事を行っていきたい
×この「初級編」をお勧めしない人
・コーディング中級～上級者
・レスポンシブ制作を行いたい
・模写を理解して行っている
・コーディングについて理解度が高い
・動的サイトやJs/javaを使ったサイト制作がしたい
！この「初級編」で学べる事
・コーディングの基礎
・デザイン情報を読み取ったコーディング
・コピーではなく本来の模写
▲注意
・レスポンシブ化はしておりません。
・本気で学びたい人向けに制作しております。
・最終的にテキストと画像を変更する場合のみ利用可。
・画像テキストをそのままFTP等を使いアップロードするのは禁止。
・学習報告などで制作過程を写真や動画にするのはOKです。
レスポンシブには ”あえて” 対応しておりません
理由といたしましては、今回の「初級編」を理解していない状態でレスポンシブ対応のコーディングを行ってしまうと、コーディングについて理解せずなんとなくの状態で制作をしてしまうためです。
今回の「初級編」では基礎をしっかり身に着けていただけたらと思います。
▶今回の制作サイトデザイン
まずは以下をご覧ください！
今回の練習で使うサイトのデザインとなります。
「初級編」ではこのページを作っていきます。
デザイン情報などは第二部でご紹介します。
▶準備するもの
今回制作の前に準備するものはいかになります。
・Visual Studio Code
マイクロソフトによって開発されているソースコードエディタ。
WEB制作を行うのなら、このソフト1本でほぼほぼカバーできるので今回はこれを使用します。
以下に「公式サイト」「インストール方法」「日本語化」のサイトを張り付けておきますので、参照してください。
※ソフトの使い方はご自身で検索してください。
上記のソフトが準備できましたら、今回制作するサイトのフォルダーを任意の場所に制作してください。
①任意の名前でフォルダーを作成
▶フォルダー作成方法
右クリック＞新規作成＞フォルダー
②①で作成したフォルダーにcssとimageフォルダーとindex.htmlファイルを作成。
▶index.htmlファイル作成方法
右クリック＞新規作成＞テキストドキュメント
「新しいテキスト ドキュメント.txt」から「index.html」へ名前変更。
もしくはVisual Studio Code(以下VSC)で制作。
※この時拡張子事変更を行う。
※拡張子が表示されてない場合は、検索サイトで「拡張子の表示方法」と検索して対応してください。
③cssフォルダーの中に以下のcssファイルを設置。
VSCでcssファイルを制作してください。
▶base.css
リセットCSSの設定
「HTML5 Doctor CSS Reset」を使用。
以下をコピペでもOKです。
/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body {
line-height:1;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block;
}
nav ul {
list-style:none;
}
blockquote, q {
quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}
a {
margin:0;
padding:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
/* change colours to suit your needs */
ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}
/* change colours to suit your needs */
mark {
background-color:#ff9;
color:#000;
font-style:italic;
font-weight:bold;
}
del {
text-decoration: line-through;
}
abbr[title], dfn[title] {
border-bottom:1px dotted;
cursor:help;
}
table {
border-collapse:collapse;
border-spacing:0;
}
/* change border colour to suit your needs */
hr {
display:block;
height:1px;
border:0;
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}
input, select {
vertical-align:middle;
}▶common.css
サイト内の共通項で使うCSSの設定
他章にて解説
▶top.css
サイトのトップページで使うCSSの設定
他章にて解説
プラスワンポイント知識 ≪ style.cssがない理由 ≫
説明の前に、style.cssと名前を付け始めた理由を説明します。
もともとCSSとはCascading Style Sheetsの略でHTML内では<style></style>内に記述をしていたため、その名残で分かりやすいようにstyle.cssと名前をつけていました。
しかし、現在では「WordPress」や「EC-CUBE」などのCMS（※）のシステム側やメインCSSとして使用される事があるため、style.cssは基本的にシステムで使用していて階層が違えど同じ名前のcssが複数存在する可能性があるため、避けて使われています。
実際に自分でシステム開発を行っている人や、理由があって使用している人もいるため、一概に使っている人は間違えているとは言い切れませんが、システム導入があることを考えてコーディングを行うと、その後システムを制作する人や自分でシステム構築するときに楽になるので覚えておいて損はありません。
ということで、これを見た方が今後現場にでて仕事をすると考え、あえてstyle.cssを使用しない方法で解説しています。
④imageフォルダーに画像を設置。
今回はこちらで用意したものを使用してください。
※完成した後にご自由に画像を変更していただいても大丈夫です。
⑤index.htmlに必要情報を記述する。
①で作成したindex.htmlファイルをVSCで開き、実際にコードを記述（マークアップ）していきます。
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
<title>K2De-sign コーディング練習 初級編</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="format-detection" content="telephone=no">
<link rel="shortcut icon" href="/images/favicon.ico" />
<link href="css/base.css" rel="stylesheet" type="text/css" />
<link href="css/common.css" rel="stylesheet" type="text/css" />
<link href="css/top.css" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Roboto:900&display=swap" rel="stylesheet">
</head>
<body>
<header>
</header>
<footer>
</footer>
</body>
</html>上記を説明すると大変ですが、コーディングするために必要なので説明をします。
<!doctype html>文書がHTML5で作成されたものであることを宣言するために<html></html>よりも上にマークアップします。
<html lang="ja">
中略
</html>この中にhtml文章を使うよと宣言するのに使います。
<html></html>の中には必ず<head></head>と<body></body>がそれぞれ一つづつ必要となります。
html要素には、lang属性で言語を指定することができます。 例えば、日本語の場合はlang="ja"、英語の場合にはlang="en"が指定できます。
HTML5から、html要素にmanifest属性が指定できるようになりましたが、これについては余裕があるときにご自身で検索してみてください。
<head>
中略
</head>この中には文書のタイトル等のヘッダ情報や設定を記述します。
必要なものと覚えておけば大丈夫です。
<meta charset="utf-8">サイトで使う文字コードを設定しています。
詳しく言うととても長くなるために、とりあえずutf-8を使うと覚えておけば大丈夫です。
<meta http-equiv="X-UA-Compatible" content="IE=edge">Internet Explorerを使用している人向けの設定。
現行の最新のバージョンで見ることができるように設定をしています。
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />スマートフォンなどのモバイル端末でホームページを表示する設定。
Viewportと呼ばれるタグを挿入し、設定を行います。
今回はレスポンシブ対応ではありませんが、基本的に必須設定なので使用しています。
<title>K2De-sign コーディング練習 初級編</title>ホームページタイトルの設定。
<head>内に必ず一つ設置してください。
ここで指定した文章は、ブラウザのツールバーやお気に入りに登録された際、 検索エンジンの検索結果などにも表示されます。
タイトルをつける際には、変な言葉にしないように気を付けましょう。
<meta name="description" content="" />meta descriptionの役割は、クローラーとユーザーにウェブページ概要を伝えることです。
簡単に言えば、検索結果の時に表示される説明文です。
content="この中に" 50～100文字程度で、ユーザーの興味を引くテキストを設定します。
また、検索クエリを意識してキーワードを入れると、一致する部分が太字になるためより目立ちやすくなるメリットがあります。
<meta name="keywords" content="" />Webページのキーワードを設定できます。
かつてはSEOでかなり影響がある物でしたが、Googleからランキング決定要因にはならないと明確に発言があり、設定してもSEO効果は望めない状態です。
設定する場合は、以下のようにキーワードをカンマで区切って設定します。
<meta name=”keywords” content=”コーディング,コーディング練習”>
<meta name="format-detection" content="telephone=no">スマートフォンなどで見たときに、数字が羅列していたら電話番号と認識しないでね！と設定しています。
よくスマホで55323みたいな数字をタップすると、電話するとか項目が出ると思いますが、それをtelephone=noで禁止しています。
今回レスポンシブ対応ではありませんが、必須設定のため設置しています。
<link rel="shortcut icon" href="/images/favicon.ico" />ファビコンと呼ばれる、お気に入りやブラウザで開いたときにタグなどに表示されるアイコンとなります。
作成方法は検索サイトで「ファビコン 作成」で検索してみてください。
今回は設定はしていますが、実際にファイルは設置していません。
もし設定を試したい場合は、imagesフォルダー内にfavicon.icoで保存すると適応されますので、試してみてください。
<link href="css/base.css" rel="stylesheet" type="text/css" />
<link href="css/common.css" rel="stylesheet" type="text/css" />
<link href="css/top.css" rel="stylesheet" type="text/css" />このページで使用するcssを設定しています。
href=""の中には、いま編集しているファイルがあるところから見て、cssがあるところまでのパスを設定してください。
この場合は、編集中のindex.htmlと同じところにあるcssフォルダーの中のbase.cssをするので、css/base.cssとなっています。
以下3個のファイルも同じように指定しています。
プラスワンポイント知識 ≪ 絶対パス と 相対パス ≫
▶絶対パス
http://~~~~
のように目的地のファイルまでのURLをすべて記述すること。
▶相対パス
images/main.png
今編集中のファイルから見て、目的地のファイルまでのファイル階層を記述すること。
※「../」これは一つ上の階層に戻るという意味
<link href="https://fonts.googleapis.com/css?family=Roboto:900&display=swap" rel="stylesheet">今回使用するフォントの一部をgoogle fontsから読み込んでいます。
google fontsについては以下をごらんください
<body>
<header>
</header>
<footer>
</footer>
</body><body></body>の中には実際にブラウザに表示させる情報をマークアップしていきます。
<header></header>はHTML5から追加されたタグになります。
名前のごとくヘッダーを意味しており、ヘッダー専用のタグになります。
よく<header id="header" class="header">などとIDやCLASSをマークアップしている人がいますが、cssで使うときはheaderだけで認定ができるため基本的にはIDやCLASSの指定は必要ありません。
必要になるケースといたしましては、JSやJAVAで動きをつけたりするときになります。
<footer></footer>はHTML5から追加されたタグになります。
ページ最下部で使われるフッターを指定しています。
IDやCLASSはheaderと同じようにfooterで指定できます。
他に詳しく知りたいという方は、以下のサイトをご覧ください。
※以下サイトでstyle.cssを使用していますが、この教材では使用していません。
今回の第一部はここで終了となります。
今後も初級編では、このような基本的な情報を覚えていく形で解説をいたします。
そして無料もここまでとなります。
本当は全部無料でご提供できればいいのですが、私にも家族がおり生活をしてく為に稼がないといけません。
そして本気で１から学び直す方や、本気でWEB業界で働きたい方向けに制作しているため、この先は有料とさせていただきます。
そしてここからはお願いになります。
記事を読んで参考になったり、新しい発見などがございましたらTwitterなどのSNSで拡散していただけますでしょうか。
まだ出会えていないコーダーさんや、困っているコーダーやデザイナーの助けに少しでもなればと思っております。
その際は、「@K2De_sign」のメンション付きでお願いいたします。
次回からはデザインの情報を確認し、実際にコーディングを行っていきます。
次回もよろしくお願いいたします。
よろしければ私の執筆活動へのサポートをお願いいたします。いただきましたサポートはこれからの活動費に使わせていただきます。