記事一覧
第3回オリジナルバナー制作
3つ目のオリジナルバナー！
今回のお題は、Webスクールのバナーです。
＜要望＞
文章
・通学できる、卒業がないWebスクール
・webデザイナー/フリーランスになりたい人向け
・今なら早割キャンペーン中
・無料説明会はこちら
色味
・オレンジ/黄色系
サイズ
・300×250
オリジナル
＜意識したこと＞
・オレンジ、黄色系の色味ということだったので、全体はオレンジで、ワンポイントで黄
第2回オリジナルバナー制作
2個目のオリジナルバナーです。
今回はオンラインでリアルタイムにフィードバックをいただきました！
自分以外の方のフィードバックも見ることができたので、すごく勉強になりました。
同じテーマでも10人いれば10通りのデザインができるのが面白いな〜
お題：『スポーツジム』
作成したものがこちら。
＜工夫した点＞
・「GRAND OPEN」を1番推したいポイントにしたので、「入会金0円」や「無料体験
第1回オリジナルバナー制作
こんばんは。流行りのコロナ太りを感じ始め、焦り始めています。
最近コーダーのお仕事メインでやりたいなーという考えがあって、デザイン疎かにしてたので、バナーにしろサイトにしろ、デザインの引き出しが無く、困っています。（ただただ自分が悪い。）
せっかくスクールでお題も用意してくれているし、もったいないと思うので、こなしていくことにしました。遅すぎな。
てことで記念すべき第一回！！
まぁフィードバ
コーディング模写01
また更新が滞っていたので、焦りながら記録。
今回はいつかやったコーディング模写。
参考サイトは Progateの一部。
出来上がったのがこちら↓
今回は訳あって、完璧に模写じゃなく、ちょっと変えています。
メインビジュアルと背景以外は1000pxで統一させたので、なんか無駄に余白ついてしまった。
ヘッダーとフッターは揃えない方が良かったかも。
だいたい授業で習ったことでできたので、そこまで
コーディング 授業復習
前回作成したハンバーガーメニューはPCの大きさにした時、目には見えないが、header_navの左に存在している。
HTMLで書く順番を変えるとレイアウトが崩れる場合があるので、
⒈一旦メディアクエリの上でdisplay: none;をしておく。
⒉レスポンシブでdisplay: none;を上書きするために、レスポンシブ対応のCSSにdisplay: block;をかけておく。
コードの場所が
コーディング授業 復習
今回は授業を休んでしまったので、授業動画を確認しながら勉強します！
こういう時、授業を録画していただけるので嬉しいです。
復習じゃなく初見になるので、noteにメモしながら動画を見ます。
・transformプロパティについて
変形させることができる。
①移動 ②回転 ③伸縮 ④傾斜
上記4つの設定ができる。
移動、回転、伸縮は、XYZ方向の指定が可能。
・指定できる関数
translate
Webサイト模写01
今回はProgateの一部を模写をします。
こちら↓（黒枠は気にしない）
↓模写
＜難しかった箇所＞
・六角形の作成
・その背景（ポリゴンパターン）
・六角形の作成
多角形ツール
↓
角数を6にする
↓
歯車のマーク押して
・コーナーを滑らかに
・星形
・くぼみを滑らかに
の3つにチェックを入れる。
辺のくぼみを1％にする。
↓
若干辺がくぼんだ六角形ができる。
この作り方は、原型が星形
コーディング授業復習 レスポンシブ対応
レスポンシブ対応の授業復習です。
レスポンシブ対応させるためには、
①viewportを設定する
②CSSを上書きしていく
CSS（スタイルシート）のメディアクエリをmax-width: 750pxのように指定してあげることで、画面のサイズが750pxまではモバイル向けの表示になり、751px以上でPC版の表示に切り替えてくれる。
・メディアクエリとは
デバイスの解像度やウィンドウの幅（画面
コーディング 授業復習
今回は勉強記録として、授業内容を記録していきます。
自分流で記録するので、間違えている箇所も多々あるかもしれませんがご了承ください。
①コンテンツ同士を垂直方向に揃える
⇨align-items: center;を使う
<header class="header inner"> <p class="header_logo"><img src="image/logo.png" alt="Port
Banner Trace05
さっきの投稿に引き続きトレース5回目です。
見本↓
秋！って感じのカラーです。もう冬ですが。
左上のテキスト内のマークをどう描こうか迷います。
フォントも特に変わったところは無さそう。
トレース↓
背景写真の色合いが見本よりも暗くなってしまいました。
チョイスミスったかも。
左上のマークは、＞でいけるかなと思ったけど上手いことできなかったのでペンツールで描きました。
けど、ペンツールだと上
Banner Trace04
バナートレース4回目です。
今回はよくあるビジネス系のバナーデザインを選びました。
自分でやると簡単そうなもの選んでしまう、、
でもやったので一応noteに記録。
ちなみに今回のも作成したのはかなり前です。
見本がこれ↓
よく見る感じのバナー。
フォントサイズの幅が大きいな。
大きいので70で、小さいのは12ぐらいかな？
トレースしたもの↓
まぁ、特に何もありませんでした。
「詳しくはこち