見出し画像

【無料】【コーディング練習①　準備〜ヘッダー編】

くりのすけ


今だけ！お早めに！！

コンプリートパック02



コーディングの基礎、レスポンシブコーディング、実案件レベルのカンプからのコーディング×6、コピペで効率的にWEB制作が出来るHTMLデザインパーツ集、案件数豊富で高単価のWordPress構築方法、流行りのノーコードツールSnowMonkeyを使ったサイト制作、作りながら学ぶWEBデザイン（デザインカンプの作り方）など現場レベルのWEB制作スキルとTwitter運用やマーケティングに関することまで学べる決定版30,000円相当が覚悟の900円！！　正直どうかしていますww
このボリューム、内容でこの値段なのは #くりnote くらいです！！
本当にあり得ませんよー

これは良いと感じて頂きましたら、Twitterなどで #くりnote でシェアをお願いいたします！！

現在メインでスクールや他の教材などで学ばれている方は、別の角度から学ぶのも良い方法なので、サブとしてこちらの教材を活用するのもおススメです^^
たくさんの初学者様に届きますように！
現場レベルのスキルを身に付け、少しでも明るい未来を手に入れましょう！！


＝＝＝＝ここから本noteの内容＝＝＝＝


くりのすけです。

おかげさまで、こちらのnote（全6記事）が8000部突破いたしました！
これも、購入してくれたみなさんのおかげです！


このコーディング練習noteがきっかけで、案件獲得された方、続出！！

続々と案件獲得者が増えています！全員は紹介できませんが、何名か紹介します！

本当におめでとうございます！！








本気で取り組めば、このように案件獲得し、収益化に繋がりますので頑張りましょう！自分次第です！！


▼note購入者の感想


▼購入者の感想・進捗をまとめました。


全部は、紹介しきれてませんが。たくさんの感想や進捗報告を頂きとてもうれしいです！


では、【コーディング練習①　準備〜ヘッダー編】始めましょう！

以前、このようなツイートをしました。

反響があれば、コードの公開と解説をしようか。とつぶやいたところ
400いいねを超えて、結構反響が良く、勉強したいという声があったので、今回noteで記事にしてみようと考えました。

みなさん、勉強熱心で素晴らしいです！

画像10

これから、作っていくのはこのような良くありそうな、コーポレートサイトのTOPページです。

大体のサイトのTOPページは、こんな感じの構成だと思いますので、これが出来ると、実際の仕事の現場でも使えると思うので、ぜひ覚えて頂きたいなと感じます。

▼こんな人にオススメ
・コーディング初級者
・ProgateのHTML・CSSコースを一通り終えた方
・模写コーディングに取り掛かったが、難しくて悩んでいる
▼オススメしない人
・コーディング中級者〜上級者
・Sassを使って、コーディングしたい方
・CSS設計についてを知りたい方
▼このコーディング練習をするメリット
・実務でも通用する技術が身に付く
・現在良く使われている、ブロークングリッドデザインのコーディングの仕方が分かる
・模写コーディングに挫折しにくくなる
・ポートフォリオとして、掲載していただいてOK
※ただし、練習用としてください。
※なるべく、そのまま載せるのではなく、自分なりにカスタマイズしてください。




▼注意
・今回の練習ではレスポンシブ対応はしておりません。申し訳ありません。

では、やっていきたいと思います。



■ コーディングデータ（TOPページ）

コーディングデータをご用意いたしましたので、コピペしてもうまく反映されない場合は、こちらをご活用ください↓↓

コピペも良いですが、最初のうちは、ちゃんと手を動かして見てくださいね。



まずは、準備〜ヘッダーまでのコードと解説をしていきます！

画像2

この部分の実装をしていきましょう！

■ 準備

1.　適当な名前でフォルダを準備します。

スクリーンショット 2019-11-01 22.54.11

2.　index.html、style.css、imagesフォルダを作成します。
※画像は、ご自身でお好きなものをフリー素材などでダウンロードをお願いします。

スクリーンショット 2019-11-01 22.57.39

もしくは、ダミー画像でも大丈夫です。

■ コーディング

では、実際にコーディングをしていきます。

テキストエディタはなんでも構いません。

個人的にオススメはVisual Studio Codeです！

1. index.htmlファイルに全体の構造をマークアップします。

<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="UTF-8">
 <title>practice</title>
 <link rel="stylesheet" href="style.css">
</head>
<body>
 <header class="header">
   <div class="content-wrapper header-nav">
 
   </div>
 </header>
 <section class="mainvisual">
   
 </section>
 <main>
 <section class="greeting">
   <div class="content-wrapper">
    
   </div>
 </section>
 <section class="work">
   <div class="content-wrapper">
   　
   </div>
 </section>
 <section class="news">
   <div class="content-wrapper">
   
   </div>
 </section>
 <section class="recruit">
    
 </section>
 </main>
 <footer class="footer">
   <div class="content-wrapper">
   
   </div>
 </footer>
</body>
</html>

※<section class="mainvisual"></section>が抜けていましたので、追記しました。（2019年11月3日）

コーディングの手順に関しては、個人差がありますので、一例として見ていただければと思います。

2. style.cssにベースとなるスタイルを記述します。

@charset "UTF-8";

/*========= base ===========*/

html {
  margin: 0;
  padding:0;
}

body {
  margin: 0;
  padding: 0;
  font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", sans-serif;
  font-weight: 500;
  color: #333;
  line-height: 2.0;
}

h2,h3,h4,h5 {
  margin: 0;
  padding: 0;
}

figure {
  margin: 0;
}

img {
  width: 100%;
  vertical-align: bottom;
}

ul,li,dl,dt,dd {
  margin:0;
  padding:0;
  list-style: none;
}

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

a:hover { 
  transition: .3s;
  opacity: 0.6;
}

section {
  margin-bottom: 120px;
}

.content-wrapper {
   width: 1400px;
   margin: 0 auto;
 }

これに関しては、こういうものと覚えてもらえれば良いです。

こういう、同じものを何度も使う場合は、自分なりにテンプレート化してしまうのが、オススメです！

ソースコードの管理には、Boostnoteがオススメ！

3. ヘッダーのコーディング

<header class="header">
   <div class="content-wrapper header-nav">
       <h1>XX株式会社</h1>
       <nav>
           <ul>
               <li><a href="#">トップページ</a></li>
               <li><a href="#">会社概要</a></li>
               <li><a href="#">事業内容</a></li>
               <li><a href="#">採用情報</a></li>
               <li><a href="#">お問い合わせ</a></li>
           </ul>
       </nav>
   </div>
 </header>
/*========= header ===========*/

.header-nav {
   height: 100px;
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.header nav ul {
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.header nav ul li {
   margin-right: 50px;
}

ヘッダーのコーディングは、大体こんな感じですね。

flexboxが出てきてからは、ほとんどこの実装の仕方をしてますね。

あとやるとしたら、display: inline-block;を使った実装ですね。

今回はベーシックなヘッダーを作りましたが、色々なヘッダーの形がありますので、余裕があれば作ってみてくださいね。

例えば

スクリーンショット 2019-11-02 0.30.53

レスポンシブでない状態で、ハンバーガーメニューになっているのも、最近多いので、この実装も出来ると良いかと思います。

今回は、以上となります。

足早になってしまいましたが、随時更新して良いものにしていきたいと思っています。

何かご意見等ありましたら、DM頂ければと思います。

次回は、みなさんが気になる部分ではないでしょうか。

画像10


メインビジュアルと、会社説明部分のコーディングの仕方についてになります。

読んでいただき、ありがとうございました！

ぜひ、ツイッターなどで、感想などをツイートしていただけると幸いです！

ツイートの際はハッシュタグ「 #くりnote 」又は「 #くりノート 」を付けてツイートをお願いします！！ハッシュタグを付けることで、同じく取り組んでいる仲間と繋がれて、挫折しにくい環境が出来るので、とてもオススメです！！


完了した方は、

画像8

この記事の画面下に出てくるTwitterシェアボタンをクリックします。

スマホからの方は、

画像9

Twitterシェアボタンをクリックします。

画像10

すると、このようにツイート画面が出てきますので、学習報告、完了報告や感想などを頂けると返信がいくかと思いますが、ぜひ、報告をお願いします^^



▼ note②のメインビジュアル～会社概要編

次はこちらをやってみてくださいね！！










この記事が気に入ったらサポートをしてみませんか？