レスポンシブ対応でPCとスマホで違う画像を使う
先日、こそこそと作ってたAndroid向けの電卓アプリ「LateCalc」をリリースしました。ボクは企画設計、デザイン辺りを担当してます。 LateCalc（電卓） - Google Play の Android アプリ なんで、電卓！？とか色々有りますが、まだ実装したい機能とかが全然実装出来てないので、その辺の紹介はある程度機能が実装された頃に書きたいと思ってます。はい。 さて、今回は久々にCSS関連なエントリーです。 ここ数年、レスポンシブ対応な案件が増えていると思われますが、実際にコーディングしていると色々有りますよね... そんな中でも、画像周りは何かと厄介だったりすると思うので、今回は、PCで見た時とスマホとか（640px以下）で見た時に、違う画像を使いたい場合に使えそうなTipsです。 レスポンシブなんだからPCとスマホで違う画像を使うとかしないで、おとなしく縮小しただけの画像
レスポンシブのテーブルをcssで作ってみた（2列のみ）STINGER5対応
主婦があれこれ日常のことや趣味のサイト作成のことなどを節操なく書き綴っているブログの運営です。また、一歳半になる娘のお世話も重要な仕事であります。 PCでの表示 PCではおなじみの表示です。 スマホでの表示 スマホではこのように1列になり、幅の狭い画面でも見やすくしました。 HTML部分 <div class="res-table"> <table> <tr> <th>左側1</th> <td>右側-1</td> </tr> <tr> <th>左側2</th> <td>右側-2</td> </tr> <tr> <th>左側3</th> <td>右側-3</td> </tr> </table> </div> css部分 /*-------------------------------------- スマホでの表示 --------------------------------------
【HTML＋CSS】ウインドウ幅に合わせて画像サイズを変化させる方法 [ホームページ作成] All About
レスポンシブWebデザインとは、画面サイズなどの閲覧環境に応じてWebページのレイアウトや装飾が自動調整される作り方のことです。記事「レスポンシブWebデザインの簡単な作り方」でも解説しました。特に、画像サイズを画面幅に自動で合わせる方法は、Webサイトのスマートフォン対応目的でも需要が高いでしょう。 例えば、下図のWebページをご覧下さい。ページ上部に見える大きなバナー画像の表示サイズは、ブラウザのウインドウサイズをある程度小さくすると、描画領域の横幅に合わせて自動的に縮小されるデザインになっています。 今回はこのような、画面サイズ（ブラウザのウインドウの横幅サイズ）に合わせて、縦横比率を維持したまま画像の表示サイズを変化させる方法をご紹介いたします。レスポンシブWebデザインを採用したページではもちろん、そうでない場合でも、画面サイズに合わせて画像サイズを自動で拡大縮小させたい様々な場
![【HTML＋CSS】ウインドウ幅に合わせて画像サイズを変化させる方法 [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/1d9230bd03ef83fbdd879610f125c72468e6b161/height=288;version=1;width=512/https%3A%2F%2Fimgcp.aacdn.jp%2Fimg-a%2F1200%2F900%2Faa%2Fgm%2Farticle%2F4%2F0%2F0%2F6%2F3%2F0%2F1640285675%2Ftopimg_original.jpeg)
【コピペ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
iPhone/iPad/iPad mini用メディアクエリ一覧 | ENTEREAL/エンタリアル
Blog Posts List ブログ記事一覧 検索 CakePHP3を始めた方に CakePHP 3.X 2016年01月16日(土) 14時23分 2つの住所から距離を計算する API 2015年12月18日(金) 10時23分 「:target」セレクタについて CSS 2015年12月12日(土) 12時23分 外部サイトからの画像への直リンクを防ぐ Apache 2015年12月04日(金) 12時23分 CSS3だけで作るブラウザタブ CSS 2015年11月17日(火) 21時23分 CSS3だけで作るパンくずに関する件 CSS 2015年11月12日(木) 12時23分 Bootstrap4のブレイクポイント計算機 Bootstrap 2015年11月11日(水) 19時23分 Bootstrap4のブレイクポイントに関する件 Bootstrap 2015年11月11日(水
あたりまえのレスポンシブWebデザイン（基本理解集） - メヘンニミン
Webやりたいぜー向けのお話です． 重要性とか Webはもう，大画面デスクトップPCで悠々と見るためだけのものではない・・・ という“世はスマホ・タブレット時代”の話はよく聞きます．仕事の休憩に／電車の中で／歩きながら／家のベットで行えるネットサーフィンの海は，とっくに机上からはみ出した大洋規模と化していたのです． スマホでのウェブサイト閲覧頻度はPCの約2倍ーリビジェン調査 ｜ 「マイナビウーマン」 2014年最新スマートフォン市場動向 〜 世界出荷ベースでスマホは13億台、PCの3倍を超える [in the looop] さらにいえば，巨大化を進めるiPhoneに，サイズがバラバラなAndroid端末．OSも画面幅も異なる様々な端末があちらこちらで動作する現況を見てみますと，どんな環境にも素敵なデザインで応戦する“世はレスポンシブデザイン時代”という導入もわかってもらえると思います．
CSS Flexboxで実装されたマンガのコマ割り風にデザインされたレスポンシブ対応のレイアウト
CSS Flexboxで実装されたマンガのコマ割り風にデザインされたカード型レイアウトを紹介します。しかもレスポンシブ対応で、スクリプトは使用されていません。 マンガだとコマの位置に意味があるので、変化してしまうのはダメですが、カード型レイアウトにコマ割り風のデザインを適用と考えるといろいろと使えそうです。 コマ割り風レイアウトの実装 実装はシンプルです。 HTML 各カードは「<div class="panel"></div>」で実装されており、その中に画像やテキストや吹き出しを自由に配置できます。 <article class="comic"> <div class="panel"> <p class="text top-left">Suddenly...</p> <p class="text bottom-right">...something amazing happened</p
簡単設置スマホ対応レスポンシブ メールフォームの無料ダウンロード
簡単設置スマホ対応レスポンシブ メールフォームの無料ダウンロード 公開日 2014年3月28日 最終更新日 2024年3月18日 著者 Motohiro Tani とても簡単に設置できるメールフォームを無料でダウンロードできます。 制作する上での基本思想は、 入力する人がストレスを感じることなく快適に入力～送信までできること。 なるべく簡単に設置でき、正常にメール送信がされること。(標準状態で) 既存のページに組み込みやすいこと。 デザインの変更などがしやすいこと。 となっております。上のものほど優先度が高いものになります。 上記1と2を特に重視している関係上でメール本文欄のカスタマイズは難しいかもしれませんが、そのあたりは設置者のスキルやカスタマイズ依頼などでカバーしてください。(宣伝) 現在の最新バージョンは2022年12月22日公開の8.1です。 参考ページ：プログラムをアップデート
[CSS]フォントサイズの指定方法の基礎知識からレスポンシブに適した指定方法までやさしく解説
CSSでのフォントサイズの指定方法をその単位とそれぞれの相違から、レスポンシブに適したフォントサイズの指定方法までをやさしく解説します。 CSS Font Sizing 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 CSSでのフォントサイズの指定方法 各指定方法の特徴 レスポンシブに適したフォントサイズの指定方法 CSSでのフォントサイズの指定方法 CSSであなたがフォントのサイズを指定するには、いくつかの方法があります。大きく分けると、絶対値（absolute）と相対値（relative）の二つです。 絶対値（absolute） 絶対値はそのサイズが固定されており、その指定を受けたフォントはそのサイズで表示されます。これは他の要素に影響を受けません。 相対値（relative） 相対値はサイズ自体の値を持っていません。サイズは親要
![[CSS]フォントサイズの指定方法の基礎知識からレスポンシブに適した指定方法までやさしく解説](https://cdn-ak-scissors.b.st-hatena.com/image/square/a1756c6abf56af6fcc3bd951dc8836bd403779c8/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015060501.png)
レスポンシブCSSで使うブレイクポイントの決め方 [ホームページ作成] All About
レスポンシブCSSで使うブレイクポイントの決め方レスポンシブWebデザインでCSSを書く際のブレイクポイントを、2018年版アクセス解析結果の画面サイズシェアから考える方法を解説。スマホは375px、タブレットは768pxの横幅が最も多いとはいえ、375と768をブレイクポイントにすれば良いわけではありません。さらに、モバイル端末とPCとの境界は1024～1280pxのどこに設定すれば良いのかなど、ブレイクポイントの決め方をご紹介。 ブレイクポイントの基本と決め方 (スマホ・PC) レスポンシブWebデザインでCSSを書く際のブレイクポイントについて、その基礎知識とブレイクポイントとして採用する横幅サイズの決め方をまとめてご紹介いたします。 今回は、2018年版の日本国内での画面サイズシェアを元にして、モバイル環境向けブレイクポイント(スマートフォンとタブレットとの境界)の考え方と、PC環
![レスポンシブCSSで使うブレイクポイントの決め方 [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/9b62dfbd9156b8509fe09652f1a69928b9daddb6/height=288;version=1;width=512/https%3A%2F%2Fimgcp.aacdn.jp%2Fimg-a%2F1200%2F900%2Faa%2Fgm%2Farticle%2F4%2F5%2F4%2F4%2F9%2F3%2Ftopimg_original.jpg)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
コウノヒデヒロ ウェブ