初めてのデザインカンプからのコーディング ~おススメ課題(解説を添えて)~

プログラミング
ジもちー
ジもちー

こんにちは、ジもちーです!

喜びの息子
喜びの息子

ウンチが固形になってきた息子です!

 

今回はデザインカンプからのコーディングを始めるにあたって最初のおススメ課題の紹介と解説をしていきます。

これからWeb制作学習を進めていく方々が挫折せずに学習を進めてもらえるように躓きやすいポイントの解説も交えていきますので是非ご参考にしてください。

因みに模写コーディングとデザインカンプからのコーディングって何が違うの?って方はこちらをご覧ください☟

 

記事の内容は下の目次の通りです☟

 

おススメ最初の課題

模写コーディングもデザインカンプからのコーディングも最初に取り組む課題が非常に大切です。

理由は難しすぎると挫折してしまうから。

結構な人が基礎学習を終えて模写コーディングでアウトプットを実践して全然できずに挫折してしまいます。

実際私も全然わからなくてぼーっと口を開けたまま空虚を見つめてよだれを垂らしていました(º﹃º)

この世によだれを垂らすようなみっともない大人を一人でも減らすべく最初にふさわしいとっても簡単なデザインカンプを紹介します!

それがこちら☟

 

こちらはしょーごさん(@samuraibrass)が提供している完全無料の入門編デザインカンプです。そしてとっても簡単!

ですが、基礎がすべて詰まっているといっても過言ではないくらい基礎を知らないと完成することが難しいです。

簡単だ簡単だと思いながらやり始めると栽培マンになめてかかったヤムチャのごとくやられてしまい、結果こうなります→(º﹃º)

真顔の息子
真顔の息子

ヤムチャの仇を討つつもりで本気でいきますよ!

 

入門編デザインカンプ解説

ジもちー
ジもちー

まずは全体像の把握です!

 

とってもシンプルですね。

最初にやるべきはブロックごとに分けることです。

つまりはこうなります☟

ヘッダー

メイン画像

テキストエリア

フッター

 

読者
読者

なんでブロックごとに分けるの?

そう思った方もいるかもしれません。

このブロックごとに分けるという考えがHTMLのコードを書く上で必須になるからです。

 

なぜなら、ブロックごとに<header>や<div>なんかのタグで囲ってあげないとCSSで位置を整えたり、色などの装飾を加える時にめちゃくちゃになってしまいます

デザインカンプからのコーディングにしろ模写にしろ必ずブロックごとに分けることを身に付けてください。

 

ヘッダー部分

ではヘッダーの作り方を解説していきます。

見てわかるようにヘッダー部分はオレンジ色の背景に左側にロゴ、右側にメニューが3つ並べられています。

まずは、ヘッダーを覆う箱を作ってあげましょう。

<header></header>

この箱の中にさらに

<div class=”header-left”></div>
<div class=”header-right”></div>

左側と右側の箱を作ります。

 

左側の箱(header-left)の中には<h1>LOGO</h1>と入れて

右側の箱(header-right)の中には

<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>About</a></li>
<li><a href=”#”>Contact</a></li>
</ul>

といった形でメニューのリストを入れてあげます。

さらにクリックした際にリンクに飛べるように<a>タグも入れてあげましょう。
※href=”#”は本来「#」の部分にリンクを入れます

 

次はヘッダーのCSSを解説します。

ヘッダーのCSSでやることは

  • height指定(高さ)
  • background-color指定(背景色)
  • color指定(文字色)
  • font-size指定(文字サイズ)
  • flexboxで位置指定
  • margin指定(位置微調整)
  • <li>,<a>タグのデコレーションを消す

結構多いように感じますが、ちょっと複雑なのはflexboxの使い方だけです。

まずは、headerのCSSから

header {
  height:80px;
  background-color: #EFA358;
  color:white;
  display: flex; 
  align-items: center;
  justify-content: space-around;
}

上3つは皆さん分かると思いますので省略します。

display: flex;
headerの子要素であるheader-leftとheader-rightを横並びにする。

align-items: center;
headerの子要素であるheader-leftとheader-rightを垂直方向(縦方向)の真ん中に揃える。

justify-content: space-around;
headerの子要素であるheader-leftとheader-rightを水平方向(横方向)均等に間隔をあけて配置。

 

言葉だけでは伝わりずらい部分もあるのでflexboxに関しては下のリンクを参考にしてください。

 

続いてはheader-left,header-rightのCSSです。

.header-left {
   font-size:28px;
}
.header-right  ul {
  list-style: none;←・を消す
  display: flex; 
  font-size: 20px;
}
.header-right  a {
  text-decoration: none;←下線を消す
  color:white
  margin-right: 20px;
}
ポイントは2つ。
  1. display:flex;をheader-rightではなくheader-right ulに適応させていること。
    ※横並びにさせたい<li>の親は<ul>の為
  2. aタグに再度color:white;を指定していること。
    ※aタグは個別に色を指定しないと変化しない
これでヘッダーは終わりです。

main画像

お次はmain画像です。

文字が載っていない画像のみの為至ってシンプルです。

<main>
<img  src=”fv.png” >
</main>
HTMLはこれだけでいいです。
続いてCSSも
main {
width: 100%;
}
画像を横幅いっぱいに広げるためにwidthを100%にするだけです。

テキストエリア

次はこのページで一番の難所です。

テキストエリアをさらにブロックごとに分けてあげましょう。

<div class=”text-area”>
 <h2>Feature</h2>

 <div class=”image”>
  <img  src=”sample.png”>
 </div> 
<div class=”text”>
  <h3>What is “Coding Basics”?</h3>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,<br>
  sed do eiusmod tempor incididunt ut labore et dolore<br>
  magna aliqua. Ut enim ad minim veniam, quis nostrud <br>
  exercitation ullamco laboris nisi ut aliquip ex ea.</p>
  <p></p>
  <p>commodo consequat. Duis aute irure dolor in<br>
  reprehenderit in voluptate velit esse cillum dolore eu.</p>

  <a href=”#”>Read More</a>
 </div>
</div>
HTMLはブロックごとにdivで囲っています。
<p>の文字と文字の間の隙間はカラの<p></p>を入れることで開けています。
続いてはCSS

 

.text-area {
    width: 1000px;
    margin: 0 auto 97px auto; 
    color: #555555; 
}
.text-area h2 {
    text-align: center;
    font-size: 32px;
    margin: 40px 0;
}

.wrapper {
    display: flex;
}

.image {
    height: 330px;
    width: 480px;
    margin-right: 62px;
}
.text {    
    text-align: left;
}

.text h3 {
    font-size: 32px;
}

.text p {
    margin: 30px 0;
    font-size: 16px;
    line-height: 24px;
}

.text a {    
    padding: 15px 55px;
    border-radius: 10px;
    color: white;
    background-color:#EFA358;
    box-shadow: #000000;
    text-decoration: none;
}

一つ一つ丁寧にデザインカンプから数字を拾って入力していきます。
ここでのポイントは3つ
  • ここでもfloatを使わずにflexboxを使用して画像とテキストを横並びに
  • 文字はtext-alignを使って中央揃えや左揃えに
  • 文字の上下の間隔はline-heightを使って空ける

 

フッター

最後にフッターです。

 

フッターもいたってシンプルですね。

HTML

<footer>
        <h3>LOGO</h3>
        <p>© 2020 LOGO All rights reserved.</p>
</footer>

 

CSS

footer {
    text-align: center;
    color: white;
    height: 100px;
    background-color:#EFA358;
}
footer h3 {
    font-size: 24px;
    padding:  20px 0;
}
footer p {
    font-size: 12px;
}
先ほどと同じようにtext-alignを使って文字を中央に揃えています。

さいごに

今回の解説でのやり方はほんの一例に過ぎません。

やり方は他にもあります。

ですが、横並びの仕方はfloatではなく早めにflexboxのやり方に慣れておくことをお勧めします。

いずれ、flexboxをたくさん使うことになると思うので。

大喜び息子
大喜び息子

それでは、みなさん良いプログラミング学習を。

 

コメント

タイトルとURLをコピーしました