【HTML】pictureタグで画像をレスポンシブに切り替える方法を解説 | ZeroPlus Media
この記事では、「pictureタグを使ってレスポンシブに画像を切り替える方法」について解説します。 レスポンシブデザインのWebサイトでは、モバイルサイズ時とPCサイズ時で、別々の画像を表示したいときがあります。pictureタグを使えば、CSSやJavaScriptを使わずに画面幅に応じて画像を切り替えられます。 そのほかにもpictureタグを使うことで、ブラウザごとに拡張子を変更することもできます。webp拡張子に対応しているブラウザならWebP画像を、そうでないブラウザならpng, jpg, svgなどの画像を表示する、というように切り替えることで、ユーザビリティの向上が図れます。また、画像の切り替えにJavaScriptやCSSが不要なため表示スピード向上にもつながります。 いっしょにpictureタグについて学習していきましょう！ プログラミング学習でこのような経験はありません
pictureタグで画像を出し分けてWebP非対応ブラウザ対策をする方法
どうも！かけちまるです！ 昨今、ほとんどのブラウザがサポートされたWebP。 しかし、WebPがサポートされていないIEや古いバージョンを使用しているユーザーもいるでしょう。 そんなユーザーにも画像を表示させるためにpictureタグを使用して、WebPがサポートされていない場合はjpgやpngなどを、サポートされている場合はWebPを表示させるように対応しましょう。 この記事では、 ・WebPのブラウザ対応状況 ・pictureタグを使った出し分けの方法 ・ブレイクポイントで画像を切り替える方法 ・画像をWebPに変換する方法 がわかります。 Webpのブラウザ対応状況 WebPのブラウザ対応状況は次のような感じです。 現在（2022年11月19日）サポートされていないブラウザはIEくらいです。 しかも、IEは世界的かつ日本的にもあまり使われていないのでWebP一本で良い気がします。 し
WordPressにWebPをアップロードできない・サムネイルが表示されないとき
WebPをWordPressにアップロードしようとしたらエラーが起こって失敗した。アップロードできたけどサムネイルが表示されない。 これらはWebPをWordPressで使おうとすると確実に起こる問題です。 この記事ではWordPressにWebPをアップロードできない・サムネイルが表示されないときの対処法を紹介します。プラグインを使わない方法です。 WebPをアップロード可能にする WordPressにWebPをアップロードすると「このファイルタイプはセキュリティ上の理由から、許可されていません」というエラーメッセージが表示されます。 WordPressではセキュリティ上の理由からアップロードできるファイルの種類を制限しているのです。 そのためデフォルトの設定ではWebPをアップロードできません。 WebP画像のアップロードを許可 この問題はWordPressのアップロード可能ファイルを
スマホサイトで画像サイズはいくつにすべきか？ | Webサイト開発
私の結論を先に言ってしまうと、 480px基準の画像で作成し、通信量を抑えつつも画像の綺麗さも担保する が一番ベストな方法だと思います。 では、次から今回の結論に至った、実際の調査内容について触れていきたいと思います。 関連記事： 画像をピッタリ横並び表示させるテクニック 入力フォームを数字キーボードに設定するには？ iPhone向けSafari、HTML拡張属性を使いこなす CSS3 擬似クラス 検証の前提 今回の実機検証について、以下を前提とします。 viewportの設定は <meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;”> とします。 320px、480px、640pxという解像度の異なる画像を作成し、480px、640
PHP::Haruで簡単なPDF帳票を作成する
はじめに 本連載では、PHPでPDFを作成するエクステンションであるHaruについて紹介しています。今回は画像の表示方法、帳票出力時に設定が好ましいプロパティとセキュリティ設定の方法、そして前回紹介した方法も含めて、簡単な帳票出力を通してより実践的な使い方を紹介します。 対象読者 PHPの基本構文を理解している方で、帳票印刷やPDFファイルに興味がある方を対象としています。 必要な環境 この記事では、以下のライブラリを使用しています。 libharu 2.1 haru 1.0.4 また、PHP 5.4を使用し、Linuxで動作の確認を行っております。各項目のインストール方法は、前回を参照してください。 画像を表示する 画像を読み出すメソッドは、以下の3つのメソッドを使ってHaruImageオブジェクトを作成します。従って、それ以外のフォーマットの場合には、一度これらのフォーマットにGDライ
PHPで画像の類似度判定のできるライブラリ
最近、大量の画像を分類する趣味をこなしていて、どうも重複画像があるような気がしていたのだが、僕の脳みそでは膨大な画像の中から類似の画像を探すことが出来ない。 そこで、どうにかして類似画像検索が出来ないものかと思っていた。 ImgSeek そこで検索すると、まず最初に引っかかってくるのはImgSeekであろう。基本的にはLinuxのGUIで動作する画像管理ソフトで、類似画像検索ができるというものだ。Pythonで書かれているが、これのサーバ版というものもあって、それがisk-daemonである。 だが、これがまた安定しない。 数千単位で画像を登録すると、メモリを延々と消費し続ける状態になってしまったり、なにもエラーを吐かずに落ちてしまったりする。 １ファイルの中に複数のDBを作れるので、DBを分割して、１DBあたりの画像数を減らしてみたりもしたが、DB数が50程度を超えた状態で再起動すると、
ActoinScript 3：画像ファイルをダウンロードして表示する
今日の授業は、年末の課題として出題したPicasa Webアルバムにアップロードした画像をFlashから扱う方法について学んでいきます。今回の授業内容は、最終課題に直結しますので、しっかりと理解するようにしましょう。 Picasa WebアルバムをFlashに読みこむ準備 Picasa Webアルバムは、API (Application Program Interface – 開発の際に使用できる命令や関数の集合のこと) を用いてWeb経由で情報を取得したり検索したりといった様々な操作が可能となっています。Picasaで使用できるAPIの詳細な資料は下記のページに掲載されていて、この内容を理解することで、Piacasaに掲載された写真の情報を利用して様々なアプリケーションやWebサービスの開発が可能となります。 Picasa Web Albums Data API しかし、このAPIをその
看板画像に文字を重ねて表示する方法
初心者向けの「わかりやすさ」を重視した解説に定評があるウェブ系テクニカルライター。ウェブの黎明期に趣味で始めた個人サイト製作からその「楽しさ」に魅了され、作成方法に関する様々な情報を発信。企業や団体のウェブサイト製作・解説書籍の執筆なども行っている。 ...続きを読む 最後に、冒頭でご紹介した「画像の上に文字やオブジェクトを重ねる」サンプル3つを実現するHTML＋CSSソースをご紹介いたします。 看板画像に文字を重ねて表示する方法 まずは、以下のような看板画像の内側に文字を重ねる方法をご紹介いたします。 上記のように画像に文字を重ねるには、以下のようにHTMLとCSSを記述します。ここでは、どこにどんなスタイルを適用しているのかを分かりやすくするため、HTMLの各要素の中にstyle属性を使って直接CSSソースを記述しています。 <p style="position: relative;"
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
web計。
http://demo.imgseek.net/
Google Code Archive - Long-term storage for Google Code Project Hosting.
汝の隣人のブログを愛せよ | LOVELOG
このページを見るには、ログインまたは登録してください