【無料】【コーディング練習④　採用情報〜フッター編】

2019年11月9日 07:59

今だけ！お早めに！！

コンプリートパック02

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

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

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

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

くりのすけです。

コーディング練習④です！

だいぶ、スキルも付いてきたのではないでしょうか。

①〜③までをちゃんと、やっていればきっと付いているはずです！

▼前回までの内容

ヘッダーから始まり、NEWSの部分までやってきました。

なるべく、自走してもらいたいということもあり、そこまで細かく解説はしてきてませんが、ここまでやって来た方は、自走力も身につき、現場に出てもやっていけると思います！

本当に素晴らしいです！

では、トップページの最後は採用情報〜フッターのブロックのコーディングをしていきたいと思います。

では、始めましょう！

■ 採用情報のコーディング

この部分のコーディングをしていきましょう。

ここまで、やってきた方はなんとなく、コーディングの仕方が分かってきたのではないでしょうか。

まずは、自分の力で実装してみてくださいね。

1. HTMLのコーディング

<section class="recruit">
     <div class="recruit-img"><img src="images/a7e23a2d289cacd78ef80debdf54bb9e_m.jpg" alt="握手"></div>
     <h2><a href="">採用情報</a></h2>
     <div class="bg2"></div>
 </section>

こちらを記述してください。

そこまで、難しくはないですね。

強いて言えば

<div class="bg2"></div>

この記述は、2回目のコーディング練習でやりましたね。

ここでは、このような記述をしてますが、2回目のコーディング練習のときのように、これとは違うやり方でもやってみてください！

ヒント、擬似要素。

2. CSSのコーディング

.recruit {
 　　position: relative;
}

.recruit-img img {
 　　width: 80%;
 　　height:400px;
 　　margin-right:20%;
 　　object-fit: cover;
}

.recruit-img::after {
 　　content: "";
 　　position: absolute;
 　　width: 80%;
　　 height: 100%;
　　 top:0;
 　　left: 0;
 　　background-color: rgba(0,0,0,0.4);
}

.recruit h2 a　{
   position: absolute;
   top: 45%;
   right: 52%;
   width: 250px;
   height: 60px;
   background-color: rgba(255,255,255,0.6);
   line-height: 60px;
   text-align: center;
}

.bg2 {
   position: absolute;
   background: #e8e7e7;
   height: 400px;
   width: 45%;
   top: -20%;
   right: 0;
   z-index: -1;
}

まずは、こちらの記述をお願いします。

解説

ここのブロックは、メインビジュアルの部分でやったような、ノングリッドの実装が必要になります。

positionを使って実装していくことが大事になります！

もう、positionを使うことにも、慣れてきたのではないでしょうか。

まだ不安な方は、②、③のコーディング練習で復習してくださいね。

.recruit-img::after {
 　　content: "";
 　　position: absolute;
 　　width: 80%;
　　 height: 100%;
　　 top:0;
 　　left: 0;
 　　background-color: rgba(0,0,0,0.4);
}

ここでは、何をしているのかと言いますと。

ちょっと、分かりにくいのですが、写真に黒の半透明のレイヤーを重ねて暗くしています。
そうすることで、採用情報のボタンの視認性を上げています。

background-color: rgba(0,0,0,0.4);で黒の半透明作っています。

▼background-color: rgbaについて

透過の濃さを調節してみて、自分の好みにしてみてくださいね。

.recruit h2 a　{
   position: absolute;
   top: 45%;
   right: 52%;
   width: 250px;
   height: 60px;
   background-color: rgba(255,255,255,0.6);
   line-height: 60px;
   text-align: center;
}

ここでは、ボタンを作っています。

ここでも、positionを使って、配置していきます。

幅と高さを指定し、line-height: 60px;とtext-align: center;で文字を上下左右中央に持ってきます。

ボタンの色ですが、普通に色を指定しても良いのですが、練習も兼ねて先程使った、background-color: rgba(255,255,255,0.6);でボタンを作っていきます。

一応、ボタンが完成しました。

コーディング練習①の時に、最初のCSSでベースとなるスタイルを記述しました。

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

opacity: 0.6;で、ボタンホバーした時に、透過されるようにしています。

transition: .3s;で時間調整をしています。
ホバーした時に、あまりパキッと動くより、ヌルッと動いた方が、サイトを見る側もゆったりした気持ちになると思っているので、なるべくボタンホバーの時は、ゆっくりさせた方が良いかなと個人的には思います。

▼transitionについて

ボタンやボタンホバーに関しては、色んな作り方があるので試しに作ってみると面白いかもです。

▼様々なボタン、ボタンホバーの作り方

採用情報の部分のコーディングは大体こんな感じだと思います。

いよいよ最後ですね。
フッター部分のコーディングをしていきます。

■ フッターのコーディング

この部分のコーディングをしていきましょう。

フッターの実装は、そんなに難しくはないと思いますが、有名なデザイナーさん達が口を揃えて、フッターは難しいと言うほどの部分です。（デザインに関して）

Footerのデザインが一番むずい！！
— 平尾誠@arutega.jp (@Makopontass) October 30, 2019

フッターってデザインや情報設計が難しいんですが、いわばエンディング的なポジションなので終わりがダメだとユア・ストーリーみたくなりかねないので気を付けるべきところ。

「フッターデザイン.com」ならいろんなフッターのデザインをインプットできるのでブクマしてる。https://t.co/AuzvPBbuh0 https://t.co/PYtRlFCTQy
— TAK (@tak_dcxi) November 1, 2019

また、フッターはかなり重要な部分です。

あなどらない方が身のためです。笑

まずは、自分でやってみましょうね。
きっと出来るはずです。

1. HTMLのコーディング

<footer class="footer">
   <div class="content-wrapper">
   <div class="address">
     <h2>XX株式会社</h2>
     <p>〒000−0000 <br>
       東京都×××××××××× <br>
       TEL 01-2345-6789 <br>
       FAX 01-2345-6789
     </p>
   </div>
   <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>
   </div>
   <div class="copyright">
   <p>©️ XXCo., Ltd. All Rights Reserved.</p>
 </div>
 </footer>

こちらの記述をお願いします。

2. CSSのコーディング

footer .content-wrapper {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 50px 0;
}

.address p {
   line-height: 1.8;
}

footer ul {
   display: flex;
}

footer ul li {
   margin-right: 50px;
}


.copyright p {
   text-align: center;
   font-size: 0.75rem;
   margin: 0;
   line-height: 100px;
   color: #333;
   background-color: #e8e7e7;
}

こちらの記述をお願いします。

flexboxを使って、横並びにしていきます。

ヘッダーでやったような感じで実装していきます。

難しいことはないと思います。

強いて言えば、コピーライトの書き方ですかね。

▼コピーライトの正しい書き方について

フッターに関しては、このくらいでしょうか。

もし、余力が残ってましたら、色々なパターンのフッターを作ってみてください。

▼フッターデザイン

色んなフッターデザインがありますので、作ってみましょう！

とにかく、手を動かすのが上達の近道になります！

また、フッターにはトップへ戻るボタンが必要だと思いますので、それも出来たら作ってみてください。

JavascriptやjQueryでの実装は、ここでは必要ないので大丈夫ですが、やるぞ！と言う方は実装してみてください！

フッターはこんな感じでしょうか。

はい、トップページはこれで以上となります。

お疲れ様でした！

ここまで、全てやってこれた方は、相当なスキルが付いているのではないでしょうか。

これから現場に出てやっていく中、とても重要なスキルを言います。

それは、情報収集スキルです。
いわゆる、ググるってやつですね。

実務でも、ほぼググってますので。

何か、分からないことがあったら、ググって解決していくしかありませんので。

ただ、どうしても分からない場合は、現場に出ているのであれば、周りの先輩に聞いてください。
ずっと、分からないでいるより、その方がお互いにとっても良いですからね。

周りに誰も聞く人がいない時は、ツイッターでつぶやけば心の優しい人がヒントをくれるかもしれません。たぶん、くれます。
良い時代ですね。

で、肝心のググり方については...ググってください！笑

普通に「ググり方」と検索すれば、たくさん出てくるかと思います！

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

完了した方は、

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

スマホからの方は、

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

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

■ さらにスキルアップしたい方は

第1弾noteの続編の下層ページ編になります。

コーポレートサイトは大体下層ページも作りますので、こちらのnoteで練習しておくといざ作るときに困らないで良いかと思います。
汎用的なデザインですので、自分なりにアレンジして使いまわすことが出来、今後のサイト制作の時短にもなります！

セットですと、お得です！

斜めのデザインがスタイリッシュで、躍動感のあるサイトが作れるようになります！
やや難しいですが、やり遂げればスキルアップ間違いないと思います。

デザインカンプからのコーディングは、コーダーとして働くのであれば出来た方が良いので、その練習が出来ます。
PSDデータなので、実践的です。
カンプからのコーディングに慣れれば、案件の受注にも有利で稼げるクリエイターになれます！
デザインの勉強にもなりますので、一石二鳥です！

パック購入でさらにお得！！

コーディングの基礎、実務レベルのカンプからのコーディング、コピペで効率的にWEB制作が出来るHTMLデザインパーツ集、案件豊富で高単価のWordPress構築方法、WEBデザイン（デザインカンプの作り方）など現場レベルのWEB制作スキルとTwitter運用やマーケティングに関することまで学べる決定版が覚悟の3900円！！
この内容で書籍を1冊買うのと同じくらいの値段は本当に有り得ないです😲 今後もコンテンツ追加予定（営業方法など）です！！
現在メインでスクールや他の教材などで学ばれている方は、別の角度から学ぶのも良い方法なので、サブでこちらの教材を活用するのもおススメです^^
たくさんの初学者様に届きますように🙏
スキルを身に付け、少しでも明るい未来を手に入れましょう💪

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

【無料】【コーディング練習④ 採用情報〜フッター編】

今だけ！お早めに！！

■ フッターのコーディング

■ さらにスキルアップしたい方は

【無料】【コーディング練習④　採用情報〜フッター編】