HTML/CSS等のコーディングの勉強記録やツールの設定メモです。
HTML/CSS LPのお問い合わせフォームにformrun（フォームラン）のコード型を実装してみました
お問い合わせフォームの専門の業者formrun（フォームラン）のフォームはコード型で実装すればHTML/CSSでデザインカスタマイズが可能です。Webデザイナー・コーダーの方に向けた内容になります。formrun（フォームラン）のヘルプページは充実しているのですが、自作のデモサイトに実装しているフォームを例に、今後迷わず実装できるための手順をまとめました。スパム対策としてGoogle reCAPTCHAを採用しています。
HTML/CSS HTML/CSSのデモサイト、作りました
今後のWeb制作の活動として、個人事業主の方や小規模の事業者様向けにご依頼をいただけるように、目安となるデモサイトをいくつか制作したいと思ってます！まずは第一弾として、HTML/CSS/JavaScriptでのランディングページを公開します。架空のチョコレートショップ、ショコラティエNのページです。見やすく使いやすいデザインと、ほどよいアニメーションで心地よく最後まで、キャンペーンエントリーやオンラインショップにもアクセスしていただけるように制作しました。是非参考として、ご覧になってください。
HTML/CSS SwiperのVersion9はloopモードのスライド数設定に注意
ベーシックな画像が複数枚横にスライドするタイプのスライダーについて、CodePenでデモを作りました。Swiperのバージョン9では、JavaScriptの初期化設定slidesPerViewの設定値の2倍以上のHTMLのswiper-slideの記述が必要。確認したバージョンは9.0.5です。
HTML/CSS 画像をトリミングしてください！にobject-fit: coverとaspect-ratioで対応
例えば一つの画像をタブレットとスマートフォンで違う見せ方にしたいとき、CSSのobject-fit: coverとaspect-ratioの設定によってレスポンシブ対応しながら任意の形にトリミングできます。
HTML/CSS Browsersync＋Gulpでブラウザの自動更新。（2023年1月現在）途中ハマったのでメモ
静的サイトの制作ではhtml/css/jsを変更した後にブラウザの再読み込み、キャッシュクリアなどをいちいち行っておりました。今回導入したBrowsersync+Gulpの環境では、ブラウザの再読み込みなどをしなくても自動更新が可能になります。導入にあたっていろいろな参考記事を参考にしたのですが、最初うまくいかずハマってしまいました。同じ様に困っている方の助けになれば幸いです。2023年1月現在の内容です。
HTML/CSS 2022年のクリスマスカード（サイト）
Codepenの投稿をアレンジ。SVGの雪のイラストをカード前面に降らせる様にしてみました。
HTML/CSS CSSであしらい作り。強調したいテキストの上にドットを付ける
CSSでテキストの上にドットを付ける方法です。radial-gradientを使用。spanタグで一文字づつ括る必要なし。参考記事のCSSをベースにSafariでもドットが表示されるように改良しました。
HTML/CSS LPのお問い合わせフォームに使える！PHP工房さんのフリーメールフォームを実装してみた
LPのお問い合わせフォーム、どうしてますか？プラグインを使う為にわざわざWordPress化するの、なんだかなあ・・と思っていたところ、PHP工房さんのフリーメールフォームが便利に使えそうなことがわかりました。
前に作ったLPのデモサイトに、PHP工房さんのフォームを使用してお問い合わせフォームを実装してみました。
Demoベーカリーコルネ 自主制作の記録！デザイン→コーディング→WordPress化までやってみる。【WordPress】完成したよ！是非見てね
駆け出しWebデザイナーの自主制作記録。Adobe XDでデザイン、HTML/CSS/JSでコーディング。WordPressオリジナルテーマ化までを記録していきます。
この記事ではコーディング後、WordPressオリジナルテーマとして作成したデモサイトを公開してます。
デモの目玉として、プラグインBooking Packageを使った食パンの受け取り予約システムを実装しています。
表示速度向上の取り組みなども書いてます。
HTML/CSS ホームページのアドレスはhttpsから始まってますか？httpからの場合はSSL化しよう！リダイレクトも設定しよう！
私が10年ぐらい前に運営していたWordPressのブログのURLがhttpから始まるアドレスのままでした。当時は使っていたレンタルサーバーで無料のSSL設定がなかったはず、、、最近まですっかり忘れておりましたが、httpsからになるように対応しました。今のレンタルサーバー屋さんはほとんど無料独自SSL対応しているので、これから公開するサイトは是非最初からSSL化してhttpsから始まるURLにしておきましょう！
記事では私が今使用しているエックスサーバーの設定をざっくり紹介しています。