【スキルUP】コーディング練習note -レスポンシブ対応- シリーズ第2弾
だいぶコーディングにも慣れてきたけど、もう少しレベルアップしたい、レスポンシブって苦手だなと思っていませんか。
そんな方のため、モダンなコーディングスキルが身につくようまとめさせて頂きました。
▼ note購入者の感想
#今日の積み上げ
— みなみ@Webデザイン勉強中 (@Siva1g6ywAW2Z4r) February 9, 2020
✅くりのすけさん(@kurinosuke32 )
note第２弾に沿って勉強。
レスポンシブの勉強目的で購入しましたが、新たな発見というかとにかく情報ボリュームが豊富すぎます😆
購入してよかった！！
勉強開始1ヶ月ちょいだけど、
案件獲得or転職に向けて継続！
累計勉強時間−86.0h
#今日の積み上げ
— かっつん@WEB制作挑戦中 (@kattsun411) February 6, 2020
模写コーディング
くりのすけさん(@kurinosuke32)noteの模写完成😊
僕にはまだ知らない事が多く時間がかかりましたが、
完成出来て良かった！
記事内には初心者に有益な情報が多くあるのでおすすめです🙌#駆け出しエンジニアと繋がりたい pic.twitter.com/zQzmREUijt
くりのすけさん@kurinosuke32 の
— いしちゃん@Web制作×Pythonプログラミング (@ishi_chan5) February 1, 2020
note買ったよー！
第2弾も頑張ろう。
ざっくり見た。
前回よりボリュームあるし
内容も濃い！
コーティング練習が楽しみ😊✨#駆け出しエンジニアと繋がりたい #プログラミング初心者 https://t.co/FHS0tz0QL5
ホントにざっくり見ただけでもスゴいボリュームだったので、頑張りがいがあります。いつも素晴らしいnoteの提供をありがとうございます😊👍✨
— いしちゃん@Web制作×Pythonプログラミング (@ishi_chan5) February 1, 2020
今は読める状況じゃないから、帰ってから読むけど、くりのすけさんの記事は信頼しているから即決！
— 干し芋 (@koheiabe0404) February 3, 2020
3万以上の文字数でこの値段はちょっと安すぎるかな
シリーズ第２弾！！ 【コーディング練習note -レスポンシブ対応-】｜くりのすけ @kurinosuke32 #note https://t.co/QfoWUIy351
購入させていただきました！
— たすく@プログラミングを頑張るハンドボーラー🤾♂️ (@Tasuku134) February 1, 2020
前回のくりのすけさんのnoteも内容が濃く、その第二弾ということで今回も迷わず購入しました！
さらなるスキルアップのために頑張ります😌 https://t.co/RzsIAKKSz8
早速買いました‼︎これでレスポンシブ 克服します！
— キミノユウ【webプログラミング】 (@Knu1203) February 1, 2020
シリーズ第２弾！！ 【コーディング練習note -レスポンシブ対応-】｜くりのすけ @kurinosuke32 #note https://t.co/6Gq0DvODKZ
早速購入しました！また勉強させていただきます✨
— taka (@taka64321568) February 1, 2020
シリーズ第２弾！！ 【コーディング練習note -レスポンシブ対応-】｜くりのすけ @kurinosuke32 #note https://t.co/iVSZefpB8d
ついにきた、レスポンシブ対応！
— よしお@WEBエンジニア志望 (@Yoshio__1994) February 1, 2020
速攻で買いました、これでまたコーディング練習します。
シリーズ第２弾！！ 【コーディング練習note -レスポンシブ対応-】｜くりのすけ @kurinosuke32 #note https://t.co/caTtzVxa84
第1段がとても身になりましたので、今回も購入させてもらいました😄 https://t.co/GMoaSXbHPq
— とした（HTML&CSS楽しい） (@jinjibu_toshita) February 1, 2020
全部は、紹介しきれてませんが。たくさんの購入報告や感想を頂き、とてもうれしいです！
ここからnoteの内容＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
くりのすけです。
お待たせしました！
コーディング練習noteシリーズ第2弾です！！
前回の第1弾目では、よくありそうなコーポレートサイトをTOPページと下層ページということで、全⑥記事でやっていきましたね。
そのうち、①に関しては、無料で公開していますので、まだやっていない方はそちらをやってみて、出来れば全記事やった後にこちらの第2弾をやると良いかなと思っています。
もちろん、こちらからやっても大丈夫だとおもいますが、第１弾をやっていた方がスムーズに取り組めるかと思います。
第1弾をやった人の中から、案件獲得者もちらほら出ているようで、本当に嬉しい限りです！
▼ 【無料公開】コーディング練習note①
▼ お買い得なコーディング練習noteマガジン版
ちゃっかりと宣伝しておきます。笑
こちらをやってから、今回の第2弾をやって頂ければさらにスキルが身につくかなと思います。
前回のnoteでは、レスポンシブ対応はしていなかったですが、今回はレスポンシブにもしっかりと対応していきたいと思います。
これからは、モバイル対応は当たり前になってきますからね。
▼ モバイルファーストとは？
この記事にもあるように、モバイルファーストを行わないと
・スマホ環境でサイトが見にくく、ユーザーが離脱してしまう
・Googleから評価されにくく、順位低下などの影響がある
・企業イメージの低下につながる
こういう事が起こってしまうため、もはやモバイル対応は必須と言っても過言ではないでしょう。
なので、今回はしっかりとこのnoteでレスポンシブコーディングスキルも付けていきましょう！
では、今回はどんなサイトを作っていくかと言いますと。
▼ PC画面
▼ スマホ画面
所々切れてて、見づらくてすみません。。
シンプルではありますが、こんな感じのデザインにしていきたいと思います。
よくありそうな、フィットネス系のサイトですかね。
非平行ヘッダーと言って、平行じゃないヘッダーのデザインで斜めにしてみようかなと思いました。
この斜めにするデザインも最近は、増えてきていますのでやり方を覚えておいて損はないんじゃないかなと感じます。
ただ、個人的にはカチカチの企業向けというよりは、今回みたいなフィットネス系などのWEBサイトによく使われている手法かなと感じました。
実際に斜めのデザインが多い印象です。
躍動感があるので、よく使われている気がしますね。
▼ 斜めのWEBデザイン一覧
こうやって見ると、結構斜めデザインってありますね。
やはり、どれも躍動感がある感じですよね。
斜めデザインの作り方としては様々ありまして、
▼ SVGを使った非平行ヘッダーの作り方
こちらのサイトのようにSVGを使った、非平行ヘッダーの作り方もあります。
作り方は、色々ありますが今回はちゃんと、CSSを使ってやっていきたいと思います。
▼こんな人にオススメ
・コーディング初級者〜中級者
・前回のコーディングnoteをやったが、もう少しスキルアップしたい
・レスポンシブコーディングのやり方を知りたい
・模写コーディングで手が止まってしまう
▼オススメしない人
・コーディング中級者〜上級者（CSS設計について知りたいなど）
・モバイル画面からコーディングをしたい方
※ 今回のnoteではデスクトップ画面からのため
▼このコーディング練習noteをするメリット
・案件獲得、月5〜10万も可能（行動次第）
・モバイル対応できるコーディングスキルが身に付く
・モダンな斜めデザインの実装の仕方がわかる
・前回よりも模写コーディングに挫折しにくくなる
・今回も前回同様に、ポートフォリオとして掲載していただいてOKです
※ただし、練習用としてください。
※そのまま載せるのではなく、自分なりにカスタマイズしてください。
※ 前回noteでもそうですが、1から10まで詳しく教えて！という人は、ご遠慮ください。なるべく自走力というものを付けて頂きたいためです。
また、コーディングに関しては個人差がありますので、誹謗中傷などもご遠慮ください。
では、始めていきましょう！
この記事が気に入ったらサポートをしてみませんか？