俺流レスポンシブコーディング
俺流レスポンシブコーディングの覚書。「人には人のレスポンシブ」があるのでこれが正解だってわけではないのですが、レスポンシブコーディングで悩んでいる人にとって参考になる記事になってくれたら嬉しいです。 ブレイクポイントは特定のデバイスの画面サイズを基準にしない 以前アンケートを取った時にデバイスのサイズを意識して決める人が半数以上を占めていた。 アンケート結果を抜きにしても「2021 年のブレイクポイント決定版はこれだ！」的な記事がバズっているのを定期的に目撃し、主流のデバイスのサイズを比較するアプローチがほとんどであるが、僕はデバイスの端末のサイズを基準にブレイクポイントを決めることには否定的である。 主流のデバイスのサイズなんてものは時間が経てば変化する。 昨年 iPhone 12 が発表された時に従来の画面サイズとは違うバリエーションになることが分かるやいなやタイムラインが慌てふためい
Googleマップをレンスポンシブに対応する方法
Googleマップを埋め込んだサイトはよく見かけますが、そのまま埋め込んだだけだとレスポンシブに対応できません。ですので今回は「Googleマップをレンスポンシブに対応させる方法」をやっていきたいと思います。 まずはGoogleマップを埋め込む ご存知方も多いと思いますが、まずはGoogleマップをサイトに埋め込みむ方法を確認しましょう。 Googleマップにアクセスします。 https://www.google.co.jp/maps/ 画面左にある検索ボックスで表示したい場所を検索します。今回は新宿駅にしました。 そして同じく左のメニューにある「共有」をクリックします。 するとこんな感じのポップアップが出てきますので、「地図を埋め込む」をクリックします。表示が変わりiframeのタグが出てきますので、コピーします。 iframeのサイズを大・中・小やカスタムサイズから選べますが、今回はサ
【コピペOK】GoogleMapの地図をレスポンシブサイトに埋め込む方法
GoogleMapはほとんどのサイトに設置してあって、スマートフォンからでも簡単に見れて分かりやすい。 埋め込みはiframeを使うのでレスポンシブに適用させるためにはレスポンシブ用のCSSが必要です。 新しいGoogleMapを埋め込んでみよう！ トップページにいって、表示したい住所を打ち込み、右下の「地図を共有/埋め込む」をクリック 「地図を埋め込む」のタブをクリックして、iframeコードをコピーしてサイトの表示したい場所に埋め込むだけ GoogleMapをレスポンシブサイトに対応させてみよう！ まずdivでiframeを囲みます。 HTML <div class="ggmap">iframeのコピーしたコード</div> CSS .ggmap { position: relative; padding-bottom: 56.25%; padding-top: 30px; heigh
imgタグのsrcset・sizes属性とpictureタグの使い方 - レスポンシブイメージで画像表示を最適化 - ICS MEDIA
日本のウェブサイトにおけるスマートフォン・タブレットユーザーのシェアは約40%であり、ウェブデザインはレスポンシブ対応しモバイルを意識した設計が必須です（参照「StatCounter」)。 HTMLの「レスポンシブイメージ」を使えば、HTMLのタグだけで表示端末にあわせた画像を配信できます。 本記事では、サンプルを通してレスポンシブイメージの特徴と使い方について解説します。 この記事で学べること img要素のsrcset属性とsizes属性の使い方 picture要素の使い方 レスポンシブイメージとは一体何か？ レスポンシブイメージとは、レスポンシブなウェブサイトにおける画像の取り扱い方を定めたHTMLの技術。2016年勧告のHTML 5.1に追加された仕様です（現在のHTMLの仕様書）。主な特徴は次の通りです。 CSSやJavaScriptを使わず、HTMLのみでレスポンシブな画像を取り
【jQuery】スライダープラグイン「slick」の使い方を詳しく解説
前回、「超簡単！CDNのjQueryを読み込む方法」というのを書きましたが、Web制作をする上では、様々なjQueryのプラグインも使用する機会が多いと思います。jQuery本体と同様に、プラグインも毎回ダウンロードしてサーバーへアップして、、、というのは面倒です。そこで便利なのが「jsDelivr」というサイトです。プラグイン全て、というわけにはいきませんが、かなりの数のプラグインをホストしていますし、よく使うCDNをコレクションして一括でソースコードをコピーして貼り付けられたり超便利です。ぜひ使ってみましょう。jsDelivr&... 設置するファイル ajax-loader.gif fonts（フォルダ） slick-theme.css slick.css slick.min.js HTML <link href="js/slick-theme.css" rel="styleshee
「slick」の使い方とオプションによるカスタマイズ
かつて世界一使いやすいと言われた、有名な画像スライダープラグイン「bxSlider」を超えるスライダーとして、まことしやかに「最強スライダー説」が囁かれている、かゆい所に手が届く万能スライダー「slick（スリック）」 その使い方とオプションによるカスタマイズ方法に加え、レスポンシブの設定方法や、サムネイルとの連携、さらにslickのバグの対処法をまとめた。 流行りの脱jQuery仕様でオプションがめちゃ多い「Swiper.js」もオススメ！ また、slickを超えて人気急上昇、フロントエンジニアなら知らない人はいない、オプションがメチャクチャ多くて流行りの脱jQuery仕様なスライダー「swiper」の使い方を知りたい方はこちら↓
レスポンシブでハンバーガーメニューになる固定サイドバー
レスポンシブでハンバーガーメニューになる固定サイドバー 近年ではモニターサイズが広くなってきた影響もあり、サイドバーを固定表示させてるサイトが多くみられるようになった気がします。 そこでここでは画面が狭くなるとハンバーガメニューになるレスポンシブに対応した固定サイドバーの作成方法をご紹介します。 投稿日2017年09月21日 更新日2017年09月21日 ロゴもサイドバーに含むレイアウトで、サブメニューがある場合はマウスオーバーすると右に表示するタイプです。 HTML 幅を狭めた時にはロゴ部分とメニューは別にしたかったので、構造的に分けてCSSで調節するようにします。 html <header id="global-head"> <h1 id="brand-logo">Logo</h1> </header> <div id="nav-toggle"> <div> <span></span>
[CSS]レスポンシブ用のマージン指定、最小値と最大値を設定し、その間を変化させる実装テクニック
ページをレスポンシブ対応にする時、デスクトップでは空白スペースを多めにとり、スマホでは少なめにして、スクリーンサイズに適したマージンを与えたい時があります。 マージンの最小値と最大値を設定し、その間の値を変化させる、ビューポートの単位（vw, vh）を使って実装するスタイルシートのテクニックを紹介します。 デモページ 幅1200px, 800px, 480pxでデモページを表示したもので、上部のマージン（margin-top）が変化しているのが分かると思います。 マージンの最大値は15em、最小値は5em、その間の値はスクリーンサイズに応じて変化します。 実際の動きは、下記ページでご確認ください。
![[CSS]レスポンシブ用のマージン指定、最小値と最大値を設定し、その間を変化させる実装テクニック](https://cdn-ak-scissors.b.st-hatena.com/image/square/37ba897bfe36cfd2c74c23337ef086ec138cd07b/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201604%2F2016102006-01.png)
CSSで片方可変、片方固定のカラムレイアウトを実装する方法 - NxWorld
CSSで片方の幅が可変で、もう片方の幅が固定というタイプのカラムレイアウトを実装する方法を全4パターン紹介します。 対象ブラウザやOSなど環境によっては使えないものもありますが、全て同じ見た目（レイアウト）を実装することができます。 HTMLと実装イメージについて 紹介する方法はいずれも下記のようなHTMLを使用したものになり、ご覧のようにメイン・サイド・それらを括る親要素の3つのdiv要素で実装していきます。 <div class="wrapper"> <div class="main"> <!-- 可変 --> </div> <div class="side"> <!-- 固定 --> </div> </div> また、今回はこのイメージのようにdiv class="main"（青い背景色の領域）を可変、div class="side"（赤い背景色の領域）を固定にそれぞれする方法で、固
CSSで見出し固定＋レスポンシブ対応の表を作成
2022年4月27日 CSS, HTML, Webサイト制作 料金表やサービスプランの比較、タイムテーブルなどなど、使う場面が多い割には制限も多く、初心者には少しとっつきにくいと思われがちな表。今回はあると便利な表の見出し固定やレスポンシブ対応の方法を紹介します。 ↑私が10年以上利用している会計ソフト！ 見出しの行を固定する 表の中の行が増えてくると、スクロールした時に表の見出しが画面から見えなくなり、なんの値だったのかがわかりづらくなります。そんな時のために、行数の多い表では一番上にくる見出しの行を固定しておくといいですね。 まずはベーシックな表を作成します。table タグに border-collapse: collapse; を指定することで、セル間のスペースがなくなってフラットな見た目になりますよ。 HTML <table> <tr class="heading"> <th>車
背景画像の縦横比率を維持したまま、コンテンツの幅に合わせて表示させる方法
背景画像を表示させる際に、画像の見え方自体は固定しつつ、元の画像サイズ以上にブラウザを広げた時には、画像の縦横比率を固定したままボックスごと拡大して表示させたい、そんな時に使える方法を紹介します。 CSS .sample { -moz-box-sizing: border-box; box-sizing: border-box; background: url(images/tanuki.jpg) center center no-repeat; background-size: cover; width: 100%; height: 500px; padding-top: 62.5%; } 表示サンプル サンプルhtml 背景画像の縦横比率を維持したままコンテンツの幅に合わせて表示のサンプル 各プロパティの説明 サンプルでは、800×500pxの画像を背景画像としています。 プロパティで
超簡単！jQueryを使ったレスポンシブ対応クリッカブルマップ『jQuery RWD Image Maps』 - 株式会社ネディア │ネットワークの明日を創る│群馬
前回までにメディアクエリを使用して『既存のホームページをレスポンシブスマホ対応する方法』やレスポンシブ対応に最適な『jQueryを使った折りたたみ式のグローバルメニュー』をご紹介しました。 今回は、レスポンシブに対応した jQueryを使ったクリッカブルマップ（イメージマッピング）『jQuery RWD Image Maps』についてご紹介いたします。 クリッカブルマップ（イメージマッピング）メリット、デメリット クリッカブルマップのメリット 複雑なデザイン（紙媒体用のチラシや、建設業の設計図や地図など）に対してリンクを貼る際に工数を短縮できる。 元々のデザインを損なうことがない。 クリッカブルマップのデメリット 画像が大きくなりがちでページが重くなる。 画像内テキストがSEOとして働かない。 レスポンシブ対応を行うと画像サイズが可変となり、リンクエリアがずれる。 デメリットのうち、1つ目
スマホ表示でテーブルがはみ出さないようにCSSで横スクロールさせる
Web サイトをスマートフォンに対応させていても、テーブル（表）が縦に伸びて綺麗に表示されなかったり、横にはみ出してしまって全てが見えない状態であったりしていませんか？パソコンで観る分には問題なくても、画面サイズが小さいスマホだとテーブルが崩れるなど思ったように表示されないことはよくあります。 パソコンで表示させた時のようにテーブルをそのまま綺麗に表示させたいのであれば、画面からはみ出してしまう部分は横スクロールができ観覧ができるようにしてあげましょう。このページでは CSS だけでテーブルだけ横スクロールしてはみ出さないようにするコードをご紹介いたします。 テーブルだけ横スクロールできるようにするCSSまず下記の例のように table タグを x-scroll というクラスで挟んであげてください。 <div class="x-scroll"> <table> <tbody> <tr> <
【レスポンシブ】CSSで作るtableデザイン＆コーディング【コードあり】 | 東京のホームページ制作 / WEB制作会社 BRISK
もはやスマホ表示を考えないwebサイトは新規制作やリニューアルではほぼない今日、どんなに横に長いテーブルでもレスポンシブでどうするか考える必要があります。 PCで組むだけなら何も考えずに済むのですが、スマホの縦長の画面で如何にユーザビリティを落とさず横長になりがちなテーブルを表示させることができるか、いくつかtableコーディングのパターンを用意してみました。 demo Contents 縦に積むテーブルレスポンシブ横並びを縦並びにするテーブルレスポンシブ疑似要素で見出しを用意するテーブルレスポンシブcontent:attr() で見出しを表現するテーブルレスポンシブspanで見出しを表現するテーブルレスポンシブスクロールで表示させるテーブルレスポンシブ 縦に積むテーブルレスポンシブPC SP ごくごく一般的なテーブルパターンですね。 ソース上は上から順番に要素が並んでいるので、それらをb
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTMLの< a href="tel:" >でリンクをタップして電話を発信させる方法
メディアクエリを使わずにcss1行だけでフォントサイズをレスポンシブ対応にする方法【CSS】 | MUUMV