HTML/CSS

自主制作の記録！デザイン→コーディング→WordPress化までやってみる。【コーディング編②】HTML完成、デモサイトを公開

駆け出しWebデザイナーの自主制作記録。Adobe XDでデザイン、HTML/CSS/JSでコーディング。WordPressオリジナルテーマ化までを記録していきます。この記事ではAdobe XDでデザインした全ページをHTML/CSS/JSでコーディングした結果のデモサイトを公開してます。表示速度向上の取り組みなども書いてます。

2022.03.11 2023.06.29

HTML/CSS イラレで作ったSVGを外部ファイルで読み込み。色変更・レスポンシブ対応可能にするまでの手順

イラストレーターで自作したロゴをSVGに書き出すところから、HTMLに読み込む際のファイルの最適化、HTMLで呼び出す手順、ブラウザでの確認方法までを丸ごと一つにした記事です。IEには未対応です。

2022.03.03 2023.06.22

自主制作の記録！デザイン→コーディング→WordPress化までやってみる。【コーディング編①】ひとまずトップページのレスポンシブ対応まで

駆け出しWebデザイナーの自主制作記録。Adobe XDでデザイン、HTML/CSS/JSでコーディング。WordPressオリジナルテーマ化までを記録していきます。この記事はAdobe XDでデザインしたトップページをHTML/CSS/JSでコーディングした内容の制作メモです。

2022.02.10 2023.06.29

自主制作の記録！デザイン→コーディング→WordPress化までやってみる。【デザイン編①】シンプルなベーカリーサイト

駆け出しWebデザイナーの自主制作記録。Adobe XDでデザイン、HTML/CSS/JSでコーディング。WordPressオリジナルテーマ化までを記録していきます。この記事はAdobe XDでデザインした内容です。スマホ、PC用のデザイン作成しました。実際にお店のホームページを依頼して頂けたつもりで制作中です。

2022.01.19 2023.06.29

HTML/CSS ほんの一手間で劇的に変わる Chapter5 カスタマイズ完成！

webcreatorboxを運営されているManaさんの本「ほんの一手間で劇的に変わる HTML & CSSとWebデザイン実践講座」のchapter5を学習し、本のデモサイトベースでカスタマイズサイトを制作しました！架空の結婚式場のブライダルフェアのLPを制作してます。記事の中からリンクを貼っていますので、是非ご覧になってください！ Photoshopでデザインカンプを作成し、コーディングを行いました。

2021.07.26 2022.03.04

HTML/CSS 文字を90度回転、親要素の両端に配置！レスポンシブ対応

HTML/CSS初心者による、文字の回転、親要素の両端配置の実現の記録です。

2021.06.15 2023.09.14

HTML/CSS コーポレートサイトの求人ページをカスタマイズ！

webcreatorboxを運営されているManaさんの本「ほんの一手間で劇的に変わる HTML & CSSとWebデザイン実践講座」のchapter4を学習し、本のデモサイトベースでカスタマイズサイトを制作しました！コーポレートサイトという事で、架空の本屋さんの採用サイトを制作しました。記事の中からリンクを貼っていますので是非ご覧になってください！ Photoshopでデザインカンプを作成し、コーディングを行いました。

2021.06.07 2021.07.28

HTML/CSS ブログサイトのカスタマイズに挑戦！

webcreatorboxを運営されているManaさんの本「ほんの一手間で劇的に変わる HTML & CSSとWebデザイン実践講座」のchapter3を学習し、本のデモサイトベースでカスタマイズサイトを制作しました！野菜レシピブログのサイトを制作しました。記事の中でリンクを貼っていますので是非ご覧ください！ Photoshopでデザインカンプを作成し、コーディングを行いました。

2021.05.12 2021.07.28