こんにちは、MIO webデザインです。 先日「イメージマップは実際の画像サイズじゃないと使えないのですか？」と訊かれました。スマホなどで閲覧すると画面幅が小さくなるので、当然画像サイズは変わってしまいます。 しかし、area要素のサイズは変わらず、ブラウザを拡大縮小するとイメージマップが崩れてしまう、という事態になってしまいます。 そこで今回はイメージマップを各デバイスでも正常に表示されるよう、レスポンシブ対応させてみたいと思います。 イメージマップの作り方のおさらい まずはイメージマップを準備しないといけませんね。 イメージマップは『HTML Imagemap Generator』さんを使えば簡単に作成できます。 作成手順は過去記事『HTML Imagemap Generatorを使って簡単にイメージマップを作成する方法』を参考にしてください！ 今回はこのようなイメージマップを用意しま

if(!navigator.userAgent.match(/(iPhone|iPad|iPod|Android)/)){ //ここに書いた処理はスマホ閲覧時は無効となる }

マツカワ Webサイト制作／コンテンツ企画／Web広告／SEO／マーケティングを経験してきた雑食系Webクリエイター・プロデューサー プロフィール / Twitter / Facebook レスポンシブサイトでブラウザ環境に応じて画像を切り替えるには、サイトによって様々な方法で対処されていました。 これまでの方法が抱えていたデメリットと現在（これから）の標準となる実装方法、レガシーなブラウザへの対応方法など、レスポンシブな画像切り替えに必要な知識をまとめました。 これまでのレスポンシブイメージの問題点 レスポンシブサイトの画像切り替えは、CSSで表示・非表示を切り替えたり、JavaScriptでブラウザ環境を判別して画像を出し分けると言った手法が一般的でした。 たしかに、これらの方法でも意図したように画像を表示することはできるのですが、理想的な解決策ではありません。 具体的には次のような問

2022年4月27日 CSS, HTML, Webサイト制作 料金表やサービスプランの比較、タイムテーブルなどなど、使う場面が多い割には制限も多く、初心者には少しとっつきにくいと思われがちな表。今回はあると便利な表の見出し固定やレスポンシブ対応の方法を紹介します。 ↑私が10年以上利用している会計ソフト！ 見出しの行を固定する 表の中の行が増えてくると、スクロールした時に表の見出しが画面から見えなくなり、なんの値だったのかがわかりづらくなります。そんな時のために、行数の多い表では一番上にくる見出しの行を固定しておくといいですね。 まずはベーシックな表を作成します。table タグに border-collapse: collapse; を指定することで、セル間のスペースがなくなってフラットな見た目になりますよ。 HTML <table> <tr class="heading"> <th>車

本文や見出しなどのフォントサイズをスマホ時やデスクトップ時で変える時、通常はMedia Queriesでスクリーンサイズごとに文字サイズを指定していると思います。 ここで紹介するフォントサイズの指定方法はちょっと新しいアプローチで、最初にベースとなるフォントサイズを設定し、スクリーンサイズが大きくなるにつれ、Viewport Unit（ビューポートの単位）で加算してサイズを大きくします。 Viewport Unit Based Typography 以下、各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 Viewport Unit（ビューポートの単位）とは？ フォントのサイズ指定のためのビューポートの使い方 他の文字の要素をビューポートで指定 縦のリズムとモジュラースケールをビューポートで指定 フォントサイズの指定の精度をアップする さらに精

サイトをレスポンシブ対応にするには、デバイスごとのスクリーンサイズ、フォントや画像のサイズだけでなく、クリックとタップ、スクロールとスワイプなどの機能性、そして見た目もサイズだけでなく、配置やトリミングなど、さまざまな取り組みがあります。 レスポンシブデザインにすぐに使える制作テクニックのすごいアイデアを紹介します。 Responsive web design: What the Internet looks like in 2016 以下、各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 01. 空白スペースを効果的に使う 02. ロゴの配置を一貫させる 03. 縦置きと横置きを考慮したデザイン 04. 縦長スクロールページの素晴らしいアイデア 05. 指のタップに合わせた形と大きさ 06. レイアウトにレスポンシブ用の微調整 07. 一行

Googleマップからコードを取得してサイトに埋め込もうとしたのですが、以前とコードの内容が変わっていてどこを変更すれば縮尺が変わるのか皆目見当がつかず…。 と困っていましたが、現在は簡単に縮尺変更ができるようになりました。やっとページの更新ができて一安心です。（2018年3月22日 更新） 以前は&z=17など、「&z」を頼りに縮尺を変更していたのですが、Googleマップ上で縮尺変更してからコードを取得しても反映されず困っていました。しかし！偉大な先人がいらっしゃって無事解決できました。 縮尺変更だけではなんなので、レスポンシブ対応の方法も一緒にメモします。 目次 グーグルマップの縮尺を変更したいグーグルマップをレスポンシブ対応にしたい グーグルマップの縮尺を変更したい 今回は群馬県庁を例にして進めたいと思います。 記事の公開当時（2015年12月11日）はソースの中の数字を変更しない

レスポンシブ対応のサイトにGoogle Mapsを設置する方法です。 Google Mapsの埋め込みコードをそのまま設置すると、レスポンシブサイトの画面サイズを変更した際に、地図表示エリアが画面をはみ出したり、他のコンテンツに重なったりと、表示崩れが発生します。 そこで、以下のようにレスポンシブ対応することで崩れを回避することができます。 <div id="map_canvas"> <iframe...（埋め込みコード略）.../iframe> </div> #map_canvas{ position: relative; padding: 0 0 56%; height: 0; overflow: hidden; } #map_canvas iframe{ position: absolute; top: 0; left: 0; width: 100% !important; heig

スマホで表示すると三本線のアイコンになるハンバーガーメニューは、確かに小さい画面の問題を解決する方法の一つですが、ベストな選択ではありません。 ハンバーガーメニューの良い点を利用し、悪い点を改善した、スクリプト無しでレスポンシブ対応のナビゲーションを実装するスタイルシートを紹介します。 Paradeiser Paradeiser -GitHub Paradeiserの特徴 Paradeiserのデモ Paradeiserの使い方 Paradeiserの特徴 実装は簡単で、超軽量 Paradeiserは1.3KBのスタイルシート1つだけで、簡単に実装できます。 CSS Only jQueryやスクリプトは使用しません。 レスポンシブ対応 スマホ、タブレット、デスクトップのそれぞれで快適に操作できます。 オーバーフロー ナビゲーションはコンテンツにオーバーフローで表示されます。 スクロール時の

先日の記事「フォントサイズの指定方法（翻訳版）」で、CSSの比較的新しい単位「ビューポートの単位(Viewport Units)」について触れました。この単位「vw, vh, vmin, vmax」はブラウザのビューポートのサイズに基づくもので、これらの単位で指定した実際の大きさはビューポートの大きさによって変化するため、レスポンシブデザインにあった単位と言えるでしょう。 これらの単位を使うことは「フォントサイズの指定方法」でフォントサイズに使うことを反対しましたが、レイアウトでは非常に役立つ単位です。 Viewport vs. Percentage Units 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 ビューポートの単位(Viewport Units)とは 要素を幅いっぱいに指定 (% > vw) 要素を高さいっぱいに指定 (

2014.08.18 ▼2021年最新版 【コピペOK】制作会社が実際に使っている、レスポンシブ対応のtableレイアウト スマホ対応・レスポンシブが当たり前になってきてるこの時代、コーダーさんにとって table がなかなかやっかいものになってきてますね… 会社概要くらいならまだ良いんですが、情報量が多い table はそのままでは 320px で閲覧した際、なかなか悲惨な事に… 対応方法としては『responsive-table.js』を代表に、様々なやり方がありますが、今回はCSSで出来る事を紹介したいと思います。 目次 2セルの場合の使用した例 横に長い場合 overflow-x と inline-block を使用した例 リスト風にした場合 list-item を使用した例 最後に 2セルの場合の使用した例 2セルでよく作られてる、会社概要やフォームなどで使えるかと思います。 『

bodyやページ上の各要素にレスポンシブ用のclassを付与、HTML, CSS, JavaScriptで利用できるブレイクポイントを一元管理、設定したブレイクポイントに応じて最適なサイズの画像を表示・レイアウトの変更など、レスポンシブ対応のWebページを制作する際に役立つスクリプトを紹介します。 Restive.JS Restive.JS -GitHub 表示しているデバイスを自動検出し、bodyや各要素に任意に定義したブレイクポイントごとのclassを付与します。ブレイクポイントはピクセルと解像度、プラットフォームやデバイスの種類や向きの判別にも対応。

レスポンシブサイトのHTML、CSSの作成方法を、初心者にも分かるように説明。サンプルコード、テクニックなど。

CSSリセットと呼ぶべきか、もしくはフレームワークと呼ぶべきか、非常に迷うのですが、そのどちらにも利用できるスタイルシート「Marx」を紹介します。 単なるCSSリセットに留まらず、レスポンシブ対応の最近のWebサイトの制作を見据えたさまざまなテクニックが盛りこまれており、コードを一行ずつ勉強したいですね。 Marx Marx -GitHub Marxの特徴 Marxのデモ Marxの中身 Marxの特徴 JavaScriptやclass付けを使用しないraw CSS すべてのブラウザに一貫したレンダリングを提供 クリーンなタイポグラフィ ナビゲーションやボタン、フォームなど、カスタマイズ可能 レスポンシブ対応 シンプルでミニマルなデザイン ファイルサイズは、7.7kb CSSリセットとしてはスタイルが少し多く、ページ作成のフレームワークとしては足りない感じです。 Marxのデモ デモペー

お待たせしました！まりぞーですヽ(゜ω゜)ﾉ 今回は CSS 初心者向けです。 table タグがあるじゃないですか。 アレをレスポンシブな感じに実装していこうという内容です。 デモはこちら 使ったものは CSS と HTML とjQuery、そしてコピペです。 よろしくお願いします。 目次 そもそもレスポンシブってなんだっけ Media Queriesの使いかた HTML CSS IE8対応 共通項目 Media Queries まとめ そもそもレスポンシブってなんだっけ responsive 「よく反応する」という意味の形容詞です。 当記事ではブラウザのウィンドウ幅をぐにょんぐにょんいじるとなんか臨機応変に見た目が変わったり変わらなかったりするやつです。 基本的に CSS3 の Media Queries を用いる方法で進めていきます。 Media Queriesの使いかた HTML