見出し画像

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

くりのすけです。

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

ありがたいことに「コーディング練習 無料公開」などと検索して頂くと、Google検索で1位表示と、Google先生からの評価もそれなりですw

画像7


noteさんから、紹介されました!!

こちらは、第1弾と第2弾(レスポンシブ対応)をセットにしたマガジンですが、公式のnoteさんから紹介ということもあり、とても嬉しいです!!


▼第1弾と第2弾のコーディングセット

セット購入でお買い得です!


また、サイト模写はできるようになってきたけど、これからどうすれば良いか迷っている方は

こちらのロードマップを参考に進めてみてください。KindleUnlimitedで無料で読めます!



WEBクリエイタースターターパック!!

今紹介した、noteをまとめた、WEBクリエイタースターターパックがあります。値段もそれぞれ個別で購入するよりお得です!!


実務必須スキルを身につけたい方は

デザインカンプからのコーディングはほぼ必須スキルです。
貴重なPSDデータからコーディングにチャレンジしたい方におススメです!


全部盛りの盛りだくさん!!

ロードマップ、コーディング練習note1弾、2弾、デザインカンプnoteを全て盛りこんだブースターパックです!
それぞれ個別で購入より、お得です!!


さらにマーケティングについても学べる!!

WEB制作スキルとTwitter運用を一緒に学べるマスターパック!!
案件獲得、個人で稼ぐことに特化した内容になっています。


このコーディング練習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②のメインビジュアル~会社概要編

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


この続きをみるには

この続き: 0文字
この記事が含まれているマガジンを購入する
大体のWEBサイトはトップページと下層ページで作られていますので、こちらのnoteでコーポレートサイトで汎用的に使われる下層ページを作れるようになり、実際に作るときに困らないようにしましょう!!

★★★想定月収3万★★★ こちらのnoteをやることで、想定月収3万円ほど稼げるスキルが身に付きます! コーディング練習note第1弾の下…

全て個別で購入しますと15000円ですが、今だけ、90%OFFの1500円です!!

★★★通常1,5000円が今だけ90%OFF!!【数量限定】★★★ WEB制作スキルとSNSマーケティング(Twitter運用)も一緒に学…

スキルアップ間違いなしで、WEB制作会社に就職や案件獲得などの確立も上がります! このブースターパックでWEBクリエイターへの道にブーストをかけましょう!! スクールなどをお考えの方、高いお金を払う前にまずこちらを試してみてくださいませ^^

★★★某スクール15万相当の内容です★★★ こちらのnoteをやることで、想定月収10〜20万円ほど稼げるスキルが身に付きます! 副収入を…

これからWEBクリエイターを目指す方におススメです!! スクールなどをお考えの方、高いお金を払う前にまずこちらを試してみてくださいませ^^

★★★想定月収5〜10万★★★ こちらのnoteをやることで、想定月収5〜10万円ほど稼げるスキルが身に付きます! 副収入を確保し、明るい…

★★★想定月収5万★★★ こちらのnoteをやることで、想定月収5万円ほど稼げるスキルが身に付きます! コーディング練習note第1弾と第…

この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
いやー、照れます。笑
1,526
WEBクリエイターのくりのすけです。