自主制作の架空の小さなベーカリーのサイトをHTML/CSSでコーデイングしています。ななファクトリーNa2factory|ななファクトリートップページに戻るAboutNewPostDesignHTML/CSSWordPressContactNa2factory|ななファクトリーtwitterへななファクトリーtwitterのフォローボタンNa2factory|ななファクトリーInstagramへななファクトリーInstagramのフォローボタンサイト内検索へななファクトリーサイト内検索へのボタンサイト内検索を閉じるななファクトリーサイト内検索フォームを閉じるNa2factory|ななファクトリートップページに戻るAboutNewPostDesignHTML/CSSWordPressContactNa2factory|ななファクトリーtwitterへななファクトリーtwitterのフォローボタンNa2factory|ななファクトリーInstagramへななファクトリーInstagramのフォローボタンサイト内検索へななファクトリーサイト内検索へのボタンサイト内検索を閉じるななファクトリーサイト内検索フォームを閉じるフリーランスWebデザイナー・ななふのデザイン、コーディングの勉強記録やTIPSなどHOMEDemoベーカリーコルネ自主制作の記録!デザイン→コーディング→WordPress化までやってみる。2022.02.10スポンサーリンクこんにちは!自主制作サイトのコーディング編1になります。今回はTOPページのコーディングが進んだので、レスポンシブ対応までを記事に残しておきますー!IndexTOPページのデザインヒーロー画像についてトップページほぼ完成(動画でご紹介)制作メモ:ヒーロー画像にキャッチコピーを重ねる部分の実現ほんのり中央白(茶)からぼかした円はどう作る?ロゴはSVGで作成したが・・・レスポンシブ対応(円やロゴはSPとPCで配置が違うことの実現)ヒーロー画像のアニメーション部分ピックアップメニューのスライダーまだまだ先は長いけどスポンサーリンクスポンサーリンクスポンサーリンクTOPページのデザインSP(スマホ)とPC用に作ってます。それぞれ、赤枠の部分のデザインをコーディングしました!ヒーロー画像についてTOPページは他のページよりも凝った演出を入れてみたいと思ってましてヘッダーのすぐ下にあるヒーロー画像について、アニメーション採用してます。ヒーロー画像は1メインの食パンの写真2お店の中でパンが並ぶ写真3お店の外観写真の3枚構成です。実際の案件のデザインカンプではXD等でどう表現する物なんだろ???口頭で「ここはアニメーションこんな感じで入れる予定です~」とかお客様にお伝えするんでしょうかね・・・??(誰かこっそり教えて!(^^;)私のデザインカンプではPC版のみ3枚の表示部分を作ってます。PC版では1、2は写真にのせる円背景のキャッチコピーを左右に振って3の外観にはロゴを中央のやや上に入れるようにしてます。スマホ版では3枚とも同じく、キャッチコピー・ロゴを縦横中央に表示します。1メインの食パン2店内に並ぶパン3お店の外観スポンサーリンクトップページほぼ完成(動画でご紹介)まだ本当の完成ではありませんが、一区切りという事でPCとSPの動画作ってみました!是非ご覧ください!!(※後でインスタにも投稿したいと思って正方形で作成してます)https://na2-factory.com/wordpress/wp-content/uploads/2022/02/colne-PC-all2.mp4制作メモ:ヒーロー画像にキャッチコピーを重ねる部分の実現CSSでどう実現するか?という内容になります。円を描く(ほんのり白からぼかした円!)キャッチコピーのテキストを円の上にposition:absoluteで重ねるという感じで作成してます。ここで、「ほんのり白からぼかした円」をどう作るのかと3の上に重ねるロゴ(SVG)をどうするのかで苦労しちゃいました。制作メモを書いておきます。本当は写真背景ですが、ベタ塗りでご勘弁を〜!円の色をbackgroundで塗るときに、まず中央から円周まで透過するグラデーションで塗っています。.8));が、これだけだとイマイチぼかせていない感じだったので更にフィルターでぼかしを入れています。blur(10px)これでデザインと同じ感じにやっとできた💦2の色違いの方も同じ手順で作成してます。今回のベーカリーコルネのロゴはイラレで自作した物で、SVG形式を使用してます。このファイルは記事用にjpegで書き出した物です。ヘッダーやフッターには、imgタグでそのまま配置すればOKでした。↓SPのヘッダー部分のロゴ。↓ヘッダーのロゴ配置のhtml。レイアウトシフトを防ぐためにwidthとheightを指定してます。色を白に変えたいサイズを動的に変えたいという良く考えるとやっかいな代物でした!色違い・サイズ違いのロゴを追加で作るのもアリかと思いますが今回はサイズを動的に変えてみたいのであえてそれはしてません。↓ヒーロー画像に重ねる方のロゴ。ヘッダーに設置するロゴと色とサイズが異なる。色を白に変えたいサイズを動的に変えたいが簡単にできる、と勝手に考えていたのですが実際やってみるとあんまりお手軽じゃなかった汗😭そして、まだ納得のいくコードにできていないんです。イラレで作ったSVGを外部ファイルで読み込み。色変更・レスポンシブ対応可能にするまでの手順イラストレーターで自作したロゴをSVGに書き出すところから、HTMLに読み込む際のファイルの最適化、HTMLで呼び出す手順、ブラウザでの確認方法までを丸ごと一つにした記事です。na2-factory.com2022.03.03レスポンシブ対応(円やロゴはSPとPCで配置が違うことの実現)ヒーロー画像の上に円やロゴを配置するために、CSSのdisplay:gridを使用してます。SPでは縦横中央に配置できる記述(上述の円のぼかしのCodepenで書いてます。-1000;}PCでは画像12で縦方向は中央で変わらず、左右に振ることについてグリッドを作って実現してます。CodePen.色々なやり方があると思いますが、私はこのように作りました(^^)/思った通りにできると嬉しいですね~!!この部分のレスポンシブ対応だけの動画も載せておきます!https://na2-factory.com/wordpress/wp-content/uploads/2022/02/colne-top-resp.mp4ヒーロー画像のアニメーション部分3枚の画像を自動で切り替えている部分はjQuery不要のSwiperを使用してます。WEMOjQuery不要の高機能スライダープラグインとして有名な「Swiper」、便利ですよね。実はこのSwiper、表示中のスライドとその前後のスライドに特有のクラスが付いていまして、それを活用してちょろっとCSSを加えるだけで、ズームインしなwemo.tech今後のWeb業界の方向性!?として、jQueryには余り依存しない方がいいと思われるのでスライダーに関してはこのSwiperを使いこなせるようになりたいです!ヒーロー画像部分はほぼ参考コードで終了してしまっているので今後の為にもう一箇所、ピックアップメニューの部分にもSwiperを使っております。ピックアップメニューのスライダーSwiperを使って自力でスライダーを入れたいと思ったのですが、苦労しました💧SPとPCで見せ方が違う(両端の画像の見切れ具合が違う)画像のアスペクト比が違う。(なんでこんなデザインにしたんだ!!自分に怒)色々外部のサイトを研究させて頂きまして、なんとか実現できました。今回この部分を詳細に書くと長くなるので、また別記事にしたいと思います。先は長いけど今回の自主制作サイトのコーディングはまだまだ先がありますがトップページがヤマかな!と思ってたので、後はそんなに苦労しないでできるはず・・・!(;’∀’)ただ、トップページにまだ入っていない要素として「ページトップリンク」があるのですが💦この部分もできればjQuery使わずに、いい感じに作れたらいいな~と思ってます(^^;今のTOPページでは、ナビゲーションメニューの開閉部分でjQueryに頼っているので今後JavaScriptに置き換えていきたいと思ってます😄さて、次回記事はコーデイング編2か、今度こそ?informationで使用しているアイキャッチ達の制作について、書くかも~??また是非、ご覧になってくださいませ!!ありがとうございました。群馬県在住の40代女子です。2020年8月からWebデザインの勉強を独学でスタートし、2021年11月に開業しました。守備範囲はバナー・チラシ制作からWordPressでのサイト制作まで。自主制作物、テクニック等を紹介しています。2023.02.22HTML/CSSDemoベーカリーコルネ自主制作の記録!デザイン→コーディング→WordPress化までやってみる。2022.03.04HTML/CSSスポンサーリンク自主制作の記録!デザイン→コーディング→WordPress化までやってみる。イラレで作ったSVGを外部ファイルで読み込み。色変更・レスポンシブ対応可能にするまでの手順コメントコメントを書き込むコメントをどうぞメールアドレスが公開されることはありません。名前メールサイト上に表示された文字を入力してください。スポンサーリンクお気軽にご相談くださいお仕事のご依頼はこちらからサイト制作のご依頼募集中です。こちらからお気軽にお問い合わせください。群馬県在住の40代女子です。2020年8月からWebデザインの勉強を独学でスタートし、2021年11月に開業しました。守備範囲はバナー・チラシ制作からWordPressでのサイト制作まで。自主制作物、テクニック等を紹介しています。文字を90度回転、親要素の両端に配置!レスポンシブ対応2021.06.152022.03.04イラレでもバナートレース30回達成!手順や手ごたえ等をまとめます2021.04.212023.03.11自主制作の記録!デザイン→コーディング→WordPress化までやってみる。SwiperスポンサーリンクスポンサーリンクIndexIndexTOPページのデザインヒーロー画像についてトップページほぼ完成(動画でご紹介)制作メモ:ヒーロー画像にキャッチコピーを重ねる部分の実現ほんのり中央白(茶)からぼかした円はどう作る?ロゴはSVGで作成したが・・・レスポンシブ対応(円やロゴはSPとPCで配置が違うことの実現)ヒーロー画像のアニメーション部分ピックアップメニューのスライダーまだまだ先は長いけどスポンサーリンクWordPressオリジナルテーマ作りました!Demoサイト公開中です自主制作の記録!デザイン→コーディング→WordPress化までやってみる。【WordPress】完成したよ!是非見てね自主制作の記録!デザイン→コーディング→WordPress化までやってみる。自主制作の記録!デザイン→コーディング→WordPress化までやってみる。【コーディング編1】ひとまずトップページのレスポンシブ対応まで自主制作の記録!デザイン→コーディング→WordPress化までやってみる。【デザイン編1】シンプルなベーカリーサイトお気軽にご相談くださいWordPressで更新しやすいサイトを作りますアフターフォローもお任せくださいちょっとしたカスタマイズも是非ご相談ください!人気の記事イラレでもバナートレース30回達成!手順や手ごたえ等をまとめます2021.04.212023.03.11photoshop初心者がバナートレース30本達成!躓きまくりの過程とこれからのこと2020.11.062022.08.17自主制作の記録!デザイン→コーディング→WordPress化までやってみる。イラレで作ったSVGを外部ファイルで読み込み。TOPEnvelopeCONTACT。