HTML/CSS

HTML/CSS

メタディスクリプションがスニペットに反映されない?

スニペットはブラウザ検索からのユーザーに対して最初に伝える情報。そのため、コンパクトな文章にまとめ、検索結果に反映させたいところ。しかし、ディスクリプションがスニペットとして表示されないことがある。今回はスニペットが想定と異なるときの対応策について。
Git

【AWS Amplify】独自ドメインで静的Webサイト公開【Route53】

AWS AmplifyとRoute 53を活用すれば、静的サイトを簡単に公開し、独自ドメインで運用できます。手動アップロード不要の効率的なデプロイ環境が整い、スムーズにサイト運用が可能に。静的Webサイトを独自ドメインで公開する方法は色々ありますが、運用のしやすさはAWS AmplifyとRoute 53が圧倒的です。
HTML/CSS

【XServer Static】「公開設定ファイルの取得に失敗しました」【XServerドメイン】

Xserver Staticを使って静的Webサイトを無料で公開し、XServerドメインで取得した独自ドメインで公開できるようにしたい。しかし「公開設定ファイルの取得に失敗しました」というエラーに。設定手順を見直し、原因を探ってみた。
HTML/CSS

ExcelデータをJavaScriptでHTMLに反映【JSON】

クライアントから支給されたExcelデータをHTMLに反映しないといけないという場面に遭遇。そのデータは100行以上に渡るボリュームで、工夫なくHTMLに反映していけば一生終わらない。そこでJSONを使ってJavaScriptでHTMLを生成させることに。今回はそのときの備忘録と後日作ったデモ制作について紹介。
Git

ベンダープレフィックスの記述で差分発生。原因と解決方法は?

Gitで差分確認してみたらCSSベンダープレフィックスの記述で大量の差異が発生してる。SCSSファイルをまだ編集していないのに、コンパイルを行うとCSSベンダープレフィックスの記述が変わる。今回はベンダープレフィックスの記述で差分発生したときの原因とその解決方法についてまとめていきたいと思います。
HTML/CSS

今さら聞けない!ベンダープレフィックスとは【CSS】

CSSのベンダープレフィックスって実は知らないという方も多いのでは?今回は、CSSコーディングでよく目にする「-webkit-」や「-moz-」といったベンダープレフィックスの存在意義や使い方について、初心者の方にも分かりやすく解説していきます。
HTML/CSS

floatはもう使わないのか?【CSS】

flexboxやgridの登場で使用頻度が低くなった「float」に救われた話から、現代のfloatがどんな役割を担っているのかという話までまとめてみました。「floatはオワコン」「floatは使うべきではない」という声が少なからずある中、どんな場面で使えるのか、使ったほうがいいのかについても説明しています。
HTML/CSS

静的ページにオリジナルデザインの自動返信機能付き問い合わせフォームを実装

今まで「静的サイトに問い合わせフォームを実装することはできない」と思い込んでいたのですが、調べてみると、割と簡単に実装できる方法があるという。そこで今回、htmlにGoogleフォームを組み込んでオリジナルデザインにしつつ、GASでメール自動送信機能をつけた問い合わせフォームを実装し、その備忘録を残してみました。
HTML/CSS

webp(ウェッピー)で表示速度は劇的にあがるのか?

「webpで表示速度は劇的にあがるのか?」という問いに対しては、はっきりイエス!!とは言えないものの、カラフルな画像(64色以上の画像)に関してはwebpを採用することで表示速度の大幅な改善が見込めます。