Webサイト制作

これが新常識! レスポンシブな画像切り替え方法まとめ

レスポンシブサイトでブラウザ環境に応じて画像を切り替えるには、サイトによって様々な方法で対処されていました。

これまでの方法が抱えていたデメリットと現在(これから)の標準となる実装方法、レガシーなブラウザへの対応方法など、レスポンシブな画像切り替えに必要な知識をまとめました。

続きを読む

[最新版] CSSでできる画像レスポンシブの対応方法と実装範囲

レスポンシブ対応における問題の1つに画像最適化の問題がありますが、HTMLやCSSのバージョンアップに伴い新たな策定も生まれ、レスポンシブデザインに便利な機能が整備されてきています。

基本的な画像レスポンシブ表示、古くなりつつあるCSS画像切り替え、高解像度ディスプレイに対応するためのメディアクエリなどの話を中心に、現在のCSSにおけるレスポンシブ対応について改めてまとめました。

続きを読む

pictureタグを使ったレスポンシブイメージの実装方法

画像のレスポンシブ対応には、これまでずっとベストな解決策と言えるものはありませんでした。

しかし、ようやくレスポンシブサイトにおける画像最適化の問題に決着がつきそうです。

それが、picture要素によるレスポンシブイメージの実装です。

複雑なスクリプトを使うことなく、HTMLだけで画像を切り替えられる picture 要素の書き方と実践的な使い方を紹介します。

続きを読む

srcsetとsizes属性でサイズ(解像度)ごとに画像を出し分ける方法

レスポンシブデザインを採用しているWebサイトでは、デバイスごとに適正なサイズ(解像度)の画像を読み込ませる、という課題があります。

特に、高解像度のスマートフォンが登場したことで、画像がぼやけてキレイに表示されないと言う新たな問題も出てくるようになりました。

表示サイズの調整に加え、高解像度ディスプレイへの対応という2つの点から画像を最適化するのが常識になってきています。

以前なら、こういった問題に対応するには JavaScript を用いた面倒な実装が必要でしたが、現在はHTMLだけで解決することができます。

それが srcset や sizes 属性の利用です。
この記事では srcset とsizes 属性の書き方・使い方について詳しく解説していきます。

少し慣れが必要かもしれませんが、非常に便利な機能です。

続きを読む

誰でもわかる SSL (HTTPS) 通信の仕組み [図解]

HTTPSサイトは安全なサイトということは、多くの人が知っていると思います。

しかし、実際はどのように HTTPSサイト が安全に通信されているのかについては、意外と知らない人も多いのではないでしょうか?

そこで今回は、SSL (HTTPS) 通信の仕組みについて紹介します。
技術的な内容などの専門的で難しいことは抜きにして、できるだけわかりやすく、図を入れながら解説していきます。

自分のサイトにSSLを導入する(している)ならば、基本的なことだけでも理解しておきたいものですね。

続きを読む

SSLサーバー証明書の種類・違い・選び方。無料SSLも登場!

SSLサーバー証明書を取得しようと各サービスを見てみると、
『どれを選んだら良いのだろう・・・』
と迷ってしまいませんか?

それもそのはず、色々な種類や価格の証明書があるし、聞き慣れない単語がいくつも出てくるので、選ぶのも一苦労ですね。

そこで今回は、SSLサーバー証明書の種類とそれぞれの違い、どうやって選んだらよいのか、などについて解説します。

最近利用サイトが増えている 無料のSSLサーバー証明書 についても紹介します。
無料ってんだから、気になっちゃいますよね。

これからSSLサーバー証明書を取得する際の参考にしてください。

続きを読む

今すぐサイトをHTTPS (SSL) 化すべき理由 ~ HTTPSの接続率は50%を超えた!

最近急速にHTTPSサイトが増え始めています。
一部の企業だけが導入すれば良い時代ではなくなりました。

HTTPSに変えることで何が良いの?
安全性以外にSSL化する理由はある?
なぜ、小さなWebサイトでもHTTPSサイトにしなければならないの?

HTTPS (SSL) について、今だからこそ、改めて理解しておくべきことをまとめました。

続きを読む

サイトをAMPに対応する方法と実装できること

対応するWebサイトも徐々に増えてきているAMPですが、対応するにはAMP用のページを別途作成する必要があります。

通常のWebページでは中々実現できないほどの高速表示を可能にするAMPページの作り方について、作成の流れ、AMPの制限事項、よく使いそうな実装機能などについて、それぞれご紹介します。

今後AMPを導入するかもしれない方も、今すぐAMPに対応したい方も、
『AMPに対応するにはこんなことをするのか』
というイメージをまず掴んでおきましょう。
続きを読む

GoogleイチオシのAMPとは? AMPの特徴とメリット・デメリット

Googleが今、激推ししているAMPをご存知ですか?
スマホ時代に適したWeb体験を実現するこの技術が、徐々に広がってきています。

2015年に始まったAMPプロジェクトとは何なのか?
それはおいしいの?

当メディア『ネット集客の歩き方』も対応している AMP について解説したいと思います。

続きを読む

ユーザビリティとは? 成果を出すためのユーザビリティの定義と重要性

ユーザビリティという言葉を聞いたことがあるでしょうか?
よく「使いやすさ」や「使い勝手」と言われています。
ただ、これだけでは非常に曖昧であり、どう捉えて良いのか、わかりにくいと思いませんか?

そこで今回は、ユーザビリティの定義や考え方、Webサイトの成果にどう関係があるのか、その重要性についてご紹介したいと思います。

続きを読む

12
ページ上部へ戻る