Web担当屋

ページを読み込み中に表示するローディング画面は、現在ページを読み込んでいると思ってもらうためや、会社や店舗のイメージを伝えるためにも、あると良い演出です。 色々なアニメーションのローディングがあります ...

SEOに関する興味深い記事を紹介します。 https://webtan.impress.co.jp/e/2021/03/05/39295 （Web担当者Forum様） この記事では、Googleはリン ...

過去にレスポンシブの「table」を紹介しましたが、今回はスマホによってレイアウトを変えるのではなく、そのままのレイアウトで横スクロールで表示する方法を紹介します。 列の項目が多く、横に長い「tabl ...

SSL設定を行い、サーバー側の反映も完了したにも関わらず、「https」でアクセスしてもアドレス欄の個所のカギマークがエラー表示になり、「この接続は安全ではありません」と表示されてしまう事があります。 ...

この記事は、20201年1月の記事となります。 さて、私が毎年この時期になると思うのが、2月からの確定申告です。 年1回の対応とはいえ、何回も行ってきたので慣れたものですが、2020年（令和2年）分か ...

年内最後の投稿になる今回は、今までで一番アクセスの多い「レスポンシブな「dl dt dd」を作る」の最新版をご紹介します。 以前の内容では「float: left;」を使って横並びにしていましたが、最 ...

画像にオンマウスすると、影が付いたり拡大する効果を「transition」「box-shadow」「transform」を使って作ってみました。 それぞれの効果について解説していきます。 最初にデモペ ...

「Flash」終了まで残り2ヶ月を切りました。 Google chrome、Firefox、Microsoft Edgeなどの各ブラウザも、2020年末にはサポートが終了し、利用不可となります。 特に ...

Web制作において、商用利用無料でクレジット表記も不要の素材はありがたいですよね。 画像素材は紹介されている記事も多いですが、今回はイラスト素材を配布しているサイトをご紹介します。 いずれも商用利用無 ...

SEOに関して、参考になる記事をご紹介させていただきます。 SEOに関連していると思われがちな施策や内容について解説されています。 ただ、”直接”のランキング要因ではないだけで、無視してよいわけではあ ...

最近「Internet Explorer11」のサポートが終了するというニュースが話題になっていますが、詳しく解説されている記事がありますので、ご紹介させていただきます。 ◆記事はこちらから 「Mic ...

はじめに、この記事は2020年8月時点の内容となりますので、利用する時期によっては仕様など変わっている可能性があります。 また、この記事は「Wix」のザックリしたイメージを掴んでもらえればと思っていま ...

web系の仕事で、便利なジェネレーターやツールなどをご紹介します。 サイト名クリックで公式サイトに別ウィンドウで表示します。   coolors 「coolors」は配色ツールです。1つ色を ...

アドビブログで「流し読みしやすいデザインと、成功するサイトの関係」という記事を読みました。 文章を書く際の参考になると思いますので、読んでみてください。 記事はこちらから 少々長いのでザックリまとめま ...

今回は、スクロールで要素が表示された時に、フワッとしたアニメーションで表示する「ScrollReveal.js」を紹介します。 各要素を時間差で表示させることも出来るので、例えば複数の画像を同時に表示 ...

「Font Awesome」をCSSの疑似要素で指定した際に、アイコンが表示されなかったり、文字化けしたりする場合の解決方法です。 結論から言うと「font-weight」を指定します。 例えば、リス ...

「Googleマイビジネス」を使った集客についての記事がありますので紹介させていただきます。 記事はこちら 記事がある程度長いので、簡単にまとめてみました。 ユーザーが店舗を検索する際、口コミサイトよ ...

IEのサポートが終了したことで、堂々と使えるようになるCSSが出てきます。 そんな中で今回は、ユニークな小技になりますが、簡単に反映できるCSSをご紹介します。 お問い合わせフォームなどで利用する、入 ...

画像の端や一部にテキストを被せる（乗せる）デザインです。 ◆まずはデモページをご覧ください。 デモページを見る   テキストを縦中央に配置するために、テキストの子要素に下記の記述をするのがポ ...

CSSで横幅を指定しても「padding」や「border」を入れることで、指定した横幅以上に広がってしまう事があります。 そこで「padding」や「border」を記述した場合とその見え方、解決方 ...