見出し画像

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

くりのすけです。

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

「コーディング練習 」「コーディング 練習 無料」と検索すると1位表示で、Google先生からの評価も高いです。

スクリーンショット 2020-02-22 21.08.51



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

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



このnoteがきっかけで、案件獲得されました!!(2019年12月16日追記)

さらに、もう1人!(2020年1月23日追記)

さらに、もう1人!(2020年1月29日追記)

続々と案件獲得者が増えています!

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

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


▼note購入者の感想


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


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


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

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

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

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

画像6

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

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

▼こんな人にオススメ
・コーディング初級者
・ProgateのHTML・CSSコースを一通り終えた方
・模写コーディングに取り掛かったが、難しくて悩んでいる
▼オススメしない人
・コーディング中級者〜上級者
・Sassを使って、コーディングしたい方
・CSS設計についてを知りたい方
▼このコーディング練習をするメリット
・実務でも通用する技術が身に付く
・現在良く使われている、ノングリッドデザインのコーディングの仕方が分かる
・模写コーディングに挫折しにくくなる

・ポートフォリオとして、掲載していただいてOK
※ただし、練習用としてください。
※なるべく、そのまま載せるのではなく、自分なりにカスタマイズしてください。
▼注意
・今回の練習ではレスポンシブ対応はしておりません。申し訳ありません。

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

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

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

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 {
   width: 100%;
}

.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頂ければと思います。

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

画像6


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

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

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

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



▼ noteの続き、その他のnoteが気になる方はこちら

==================================

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

無料公開しています!


▼ お買い得なnoteマガジン版はこちら

個別で買うよりお得なマガジン版です!
1900円→900円に値下げ中!


▼ さらにスキルアップしたい方はこちらのnoteもオススメ

レスポンシブ対応のコーディングnoteシリーズ第2弾です!
1900円→900円に値下げ中!


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

セット購入でお買い得です!
3300円→1300円と今だけ大幅値下げ中!


▼ Twitter運用をして、効率よくフォロワーを増やしてみたい方はこちらのnoteがオススメ

これからはSNSマーケティングが重要な時代になってきます。
1980円→980円に値下げ中!


▼売れてます!コーディングとTwitter運用の両方が学べるコンプリートパック!!

全てを詰め込んだ、コンプリートパックです!お買い得です!
3900円→1900円に今だけ大幅値下げ中!

==================================



この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

嬉しいです!!
791
WEBデザイナー兼コーダーのくりのすけです。
コメント (1)
あかさこ商店です!くりのすけさん、楽しみにしてました〜!
私初心者なので、こういう記事がとてもありがたいです。
次回も楽しみにしてます!
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。