2023/05/03
CSSのposition属性stickyが効かない理由
position属性stickyは簡単に動かなかった
結論としてstickyが動作しなかった場合の考察から説明しています。
要素の追従を実現するために利用されるposition属性のstickyは、多くの場合便利な機能として活用されていますが、その反面、動かないという問題もあります。具体的には、以下の点が挙げられます。
まず、参考にした解説ページでは、stickyが3行で動くと記載されていたものの実際には全く動かないことがあります。このような状況では、その解決策を見つけるためには、実際に自身で試行錯誤してみる必要があります。
2023/03/09
なぜSassが実務で使用できないCSSなのかを徹底検証
Sassって本当に利用すべきなのか
あなたはSass(サス)をご存じでしょうか。または利用したことはありますか。
知らなかったかたも、採用を検討される方にも、ぜひ有用な記事になる視点でSassについて当社独自の見解などを交えてご説明させていただきます。
HTMLコーディング業務などをされている方であれば名前ぐらいは聞いたことも多いかもしれませんが、SassとはWebサイトの装飾マークアップに使用されるCSS(カスケードスタイルシート)の拡張された記述方法といえます。
2022/09/10
Google広告コンバージョンタグ設定の基本学習
Google広告コンバージョンタグ設定と計測の前に
今回はGoogle広告のコンバージョンタグの設定と基本的な計測確認について学習してみます。
まずはそのまえに、Google広告の概要から学んでおきます。
Google広告はもともとはAdWords(アドワーズ)という名称で提供されていたWeb広告サービスですが2018年に改名されたようです。
たしかにAdWords(アドワーズ)と広告配信で収益化するアドセンスと混同しやすく、同列サービス同士でサービスネームのコンフリクトが若干生じていた感があるかもしれません。
2022/09/08
UTF-8からShift_JISへWebサイトの文字コード変更方法
UTF-8からShift_JISへWebサイトの文字コード変更方法 Web制作 UTF-8からShift_JISの文字化け祭り発生 通常、Webサイトの文字コードは普段何を指定されていますか。 当社でも普段は、 Web標 […]
2022/07/07
透過できないPNGファイルの編集方法と解決策
ダウンロードしたPNG画像がおかしい
Webデザインのご依頼を頂く場合は、パスデータ(伸縮しても画像劣化しない)から小さい透過なしのロゴ画像まで、実にさまざまです。
先日、リニューアルデザインをご依頼いただいた対象サイトのロゴマークを既存のサイトからダウンロードしました。
PNG画像形式でしたが、元データをもらう連絡をした場合、返答まで数日かかる場合があり着手が送れる可能性もあるため、暫定で既存サイトのロゴをそのまま使用させていただくことが多いためです。
2022/04/10
Googleフォームの使い方とカスタマイズ学習
Googleフォームについての概要
Google フォーム(Forms)はブラウザで作成できる無料で使用可能メールフォームサービスです。
フォームから送信された情報は、Excelで取り扱いやすいスプレッドシートに自動で蓄積することも可能で、統計情報の収集にも使いやすいフォームサービスです。
レジャーやイベント、サークルや会議参加者の事前アンケートやメールアドレスの集約、簡単な診断テストなどの集計にも用途は多様です。
2022/03/11
わかりやすい-JSONを簡単に学習する
JSONをわかりやすく学ぶ
Webサイトの制作やWebアプリケーション開発に関わったことがある人なら一度は聞いたことがあるかもしれません。
- JSON(読み:ジェイソン)
ホラー映画愛好家の方だと別のキャラクターが想起されるかもしれませんが、某アイスホッケーマスクマンとは全然関係ありません。
この記事でJSONを学習することで、ジェイソンと聞いてすぐ連想されるのがシンプルで軽量なWebデータ形式に関することになればうれしい限りです。
2022/03/05
JavaScriptエラーの原因と対処方法一覧
JavaScriptで発生するエラーメッセージと対処方法
JavaScriptの実行時に、エラーが表示されて上手く動作しないことがあります。
原因は単純記述ミスから、やや難解なメッセージまでいろいろあります。海外サイトなどでないとエラーメッセージの警告内容が言及されていないエラーも
発生する度に毎回調べるのが手間なので、JavaScriptのエラーメッセージの内容と原因、対処方法などを随時更新されるページ形式で一覧にまとめてみました。
2022/01/17
PageSpeed Insightsページ速度改善と合格点
ページスピード最適化の考え方と改善
Google検索順位の評価基準のひとつに、Webページの軽量度があります。
PageSpeed Insights APIでURLを入力するだけで、現在のWebページをスマートフォンとパソコンでどれだけ最適化されているかをチェックしてくれるツールです。
すでにあるホームページ等を試してみたら物凄くパフォーマンスの問題を指摘された経験がある方も多いかもしれません。
2022/01/12
ロゴのローディングアニメ制作と作り方を学習
ホームページのローディングアニメ制作と作り方学習
Webサイトにアクセスすると、時折なめらかにかっこよくロゴマークが浮かび上がるサイトを見かけることが多かったので、今回はトップページアクセス時に表示されるローディングアニメーション制作を行ってみました。
できるだけ時間がかからず、軽量で、なおかつ滑らかにかっこよく表示されるローディングアニメを作成してみます。 今回はローディングイメージがループするタイプではなく、ローディング時にロゴマークのパーツがアニメーション描写されて形づくり、トップページが表示されるタイプのローアニです。 (ローディングアニメーションの文言が長いので、以後“ローアニ”と略称が登場しますが、ご了承ください。)