俺流レスポンシブコーディング
俺流レスポンシブコーディングの覚書。「人には人のレスポンシブ」があるのでこれが正解だってわけではないのですが、レスポンシブコーディングで悩んでいる人にとって参考になる記事になってくれたら嬉しいです。 ブレイクポイントは特定のデバイスの画面サイズを基準にしない 以前アンケートを取った時にデバイスのサイズを意識して決める人が半数以上を占めていた。 アンケート結果を抜きにしても「2021 年のブレイクポイント決定版はこれだ！」的な記事がバズっているのを定期的に目撃し、主流のデバイスのサイズを比較するアプローチがほとんどであるが、僕はデバイスの端末のサイズを基準にブレイクポイントを決めることには否定的である。 主流のデバイスのサイズなんてものは時間が経てば変化する。 昨年 iPhone 12 が発表された時に従来の画面サイズとは違うバリエーションになることが分かるやいなやタイムラインが慌てふためい
スマホの横スクロールUIをCSSで実装する方法
スマホページで最近増えているのがフリックできる横スクロールです。リストで表示するより小スペースで一覧を表示できる便利なUIです。 楽天市場やYahooショッピングのページでも使われていて、自分でも同じような横スクロールを実装したいと考え作ってみました。 基本的なHTMLとCSSだけで作成できるので、コピペで簡単に実装することができます。 それでは具体的な方法を順を追って説明していきます。サクッとデモだけ確認したい方は目次より移動してください。 参考にした横スクロールUI僕が参考にしたのは楽天市場のスマホページに載っている横スクロールです。 商品ページの下の方に「この商品を買った人はこれも」、「ショップの人気商品ランキング」といった横スクロールがあります。 今回はこれらの横スクロールデザインを参考に作っています。 実装する横スクロールのポイントレスポンシブに対応スマホとPCで表示方法を変えた
コピペで5分！右から出てくるおしゃれなハンバーガーメニューの作り方【レスポンシブ対応】
こんにちは、daimaです。 本日は私も業務でよく使っている おしゃれでコンパクトな ハンバーガーメニューのサンプルコードを コピペしてすぐに使える形でご紹介したいと思います。 最終更新2021/01/30 : ・ナビ部分の開閉の仕組みを調整(画像など張り付けた時にずれて移動してしまっていたのを修正) ・ナビの中身のheightがナビのheightを超えた場合にスクロールが効くように修正 レスポンシブ対応のハンバーガーメニューをコピペで簡単に設置したい ハンバーガーボタンはスクロールしてもずっとついてきて欲しい ナビが開いているときにナビ以外の部分をクリックしたらナビを閉じてほしい ナビが出現するときは画面端からスムーズに出現してほしい 細かいデザインや動きは自分で調整したい 最新の主要ブラウザ(Chrome、EDGE(IE)、Firefox、safari)に対応していてほしい このような
レスポンシブイメージはpicture要素で！ | Webデザイン・Webデザイナースクール
今回はHTML5.1で新しく加わる要素の一つであるpicture要素について解説していきたいと思います。HTML5.1は2016年9月の勧告を目指して動いている仕様ですが、picture要素はすでに多くのメジャーWebブラウザが対応してきていますので、実装結果もテストしやすくなっています。Webブラウザの対応状況は「Can I Use ...」で確認ください。 picture要素とは レスポンシブWebデザインで画像を扱う際に、デスクトップ向け、タブレット向け、モバイル向けと、それぞれの画面解像度に最適化された画像を扱うのに苦労をした経験があると思います。デスクトップ用に用意した横幅2,000pxの画像をモバイルサイトでもそのまま使っていては読み込みに時間がかかってしまい、大変ですね。そこで、CSSやJavaScriptを駆使して、画像サイズやデバイスの向き(縦向き/横向き)に合わせて画像
レスポンシブ対応したモーダルウィンドウのプラグインのまとめ
こんにちは、工藤です。 今回は以前まとめたものが古かったので、jQueryを使ったモーダルウィンドウのプラグインを改めてまとめました。 レスポンシブ対応しているもののみに絞っています。 Boxer（Lightbox） DEMO GitHub（Boxer） GitHub（Lightbox） 以前までは『Boxer』というプラグイン単体だったのですが『Formstone』というテーマの1つになり、それに伴い『Lightbox』という名前に変更になったようです。ややこしいです。 ただ比較しても挙動は（見た限りだと）そんなに違わないので好きな方を使ってよいかと思います。 『Boxer』の方が設置は簡単です。 このプラグインのいいところはレスポンシブに対応している、かつスマートフォンで見た場合には最適化して表示してくれるところです。 こんな感じにきれいに表示してくれるので重宝しています。 動画やイン
知らないと損！CSSのvh/vwの使いこなしでレスポンシブなサイト制作が捗る
CSSの値に指定できる単位といえば、pxや%などがおなじみ。でもレスポンシブなサイト制作では、vhやvwといったViewport単位がとても便利です。基本と使いどころを解説します。 CSSにViewport単位（Viewport Uints）が導入されてから数年になります。ブラウザーのサイズが変更されるたびに値が変わるという意味で、真にレスポンシブな単位と言えます。Viewport単位について聞いたことはあるものの、詳しいことはまったく分からないという人は、この記事で理解を深めてください。 単位とその意味 CSSにはViewportを基準とした単位が4つあります。vh、vw、vmin、vmaxです。 Viewport Height（vh）：viewportの高さに基づく。1vhはviewportの高さの1%に相当する Viewport Width（vw）：viewportの幅に基づく。1v
レスポンシブ対応されたLightbox系プラグイン・ライブラリ 10 - NxWorld
レスポンシブ対応されたLightbox系のプラグインやライブラリのまとめで、ほとんどがjQueryプラグインになりますが、中には単体で動くものもあります。 また、対応コンテツやエフェクトが多数あるもの、オプションがひと通り揃っているもの、動きや見栄えは少し簡易的になりますがIE7・8といったブラウザまで対応しているものなどタイプも様々です。 紹介時に対応ブラウザやデバイスに関しても記載している内容は、基本的に各配布先で記載されているものになります。 ただ、特にIEの場合は対応しているが他のブラウザに比べ動きが簡易的になってしまっていたり動きが怪しいものなどもあるので、対応しているという記載があっても使用前に自身で動きの確認をおすすめします。 Swipebox プラグイン名にもあるようにスワイプで画像を切り替えることができ、ギャラリーやビデオにも対応しているjQueryプラグインです。 オプ
【jQuery】slickのカルーセルスライダー実装方法とサンプル集｜Gimmick log
TOPjQuery 【jQuery】slickのカルーセルスライダー実装方法とサンプル集 【jQuery】slickのカルーセルスライダー実装方法とサンプル集 公開日：2015.12.02 更新日：2023.03.19 jQuery, カルーセルスライダー 様々なレイアウトのスライダー、スライドショーを実装出来る slick の使い方をまとめました。 これまでも slider-proやcarouFredSelをご紹介しましたが、slickは両者のいいとこ取りという感じです。詳細は以下の機能概要をご覧ください。 slick.js配布元 サンプルページ slickの機能概要 レスポンシブ対応 横幅のブレイクポイントごとにスライドの表示数、スクロール数を変更可 （centerModeではスクロール数は1つで固定） タッチデバイス対応 IE8以上で動作（スライド数のドットの色は変化しない） 縦カル
開坑1200年、国の重要文化的景観である兵庫県生野銀山が面白い【前編】。 | ホームページ制作 大阪【インフォメーションメディアデザイン株式会社】
【Adobe XD】ホバーアニメーションの応用編～パララックス風の動きを再現してみよう～ 前回の記事では、Adobe XDの「ホバーステート機能」を使った画像のホバーアニメーションの作り方をご紹介しました。今回の記事では、･･･ View More
★レスポンシブデザインで使うメディアクエリの設定方法とブレークポイント最適値について
スマホファーストでおまけ的にPC対応という案件が以前よりも増えていますが、やっぱり多いのはPC優先でスマホ表示も確保するというもの。で、このような複数デバイス間の表示を最適化する手法としては以下のものがあります。 モバイル用とデスクトップ(PC)用を別々に用意してアクセスする端末で切り替えるブラウザのウィンドウサイズによって表示内容を変える1はユーザーエージェント(何を使ってアクセスしているか)で判別する形式で、Wordpressではwp_is_mobile()という関数を用いてif文で条件分岐させれば簡単に実現可能です。 2はレスポンシブウェブデザインと言われ、メディアクエリを用いて制御する手法。これについては、Googleがモバイル フレンドリーなサイトを構築するガイドラインを出しています。 参考1: はじめる - ウェブマスター向けモバイルガイド ↑ 知らない人は必須なので目を通して
jQueryスライダー Slider Pro の使い方｜Gimmick log
公開日：2015.11.20 更新日：2020.05.20 jQuery, カルーセルスライダー Slider Proは多様なオプションで痒いところに手が届くスライダーです。 ざっと概要をまとめると。。 レスポンシブ対応タッチデバイス対応Retina用画像の出し分け対応IE8以上で動作キャプションのアニメーション表示対応縦カルーセル、横カルーセル対応画面サイズによってレイアウト変更可能MITライセンス などなど。一番ありがたいのは、CSSなどを調整しなくても、オプションの付け替えでほぼ対応できるという点です。 まずはデモページをご覧ください。 Slider Pro 配布元 デモページ 必要なファイルを読み込む Slider Pro 配布元からファイルをダウンロードし、読み込みます。 今回使うのは、ダウンロードファイルの中に入ってる以下のファイルです。 slider-pro-master ├
今までで一番高機能かもしれないjQueryプラグインのスライドショー「camera」 | ECサイト｜システム開発会社｜スターフィールド
タイトル通り、今まで見てきた中で、一番高機能なスライドショーかもしれません。 機能が豊富で、その設定もそこまで難しくないということで、 使いやすいプラグインです。 レスポンシブにも対応しており、 動画を組み込んだり、フルスクリーンにもできたりします。 簡単に特徴をあげると、 ・スライドアニメーションのエフェクトが豊富 ・スキン(カラー)が豊富にある ・サムネイル、ナビゲーション、ページング等の設定がいろんなパターンに対応 ・レスポンシブ対応 ・スライドのローダーが付いている ・キャプションが付けられる といったところでしょうか。 ローダーが付いているのは、今までにほとんど見たことなかったので、 けっこういいですね。 ただ、html5なので、ieはそこまで対応していないかもしれません。 （いけてie8くらいまでかな） デモを作成したので、ぜひ見てみてください。 DEMO
[JS]レスポンシブにも対応した使いやすいカルーセルを探す時はこのスクリプトがオススメ！ -slick | コリス
画像やコンテンツを配置したパネルを次々に水平・垂直にスライドして表示するカルーセルのスクリプトを紹介します。 自由度の高いカルーセルってなかなか無いのですが、「ラスト カルーセル」とサブタイトルがついてるくらい探し回って最後にたどり着くのはこれという出来です。 slick slick -GitHub slickの特徴 slickのデモ slickの使い方 slickの特徴 「the last carousel」とあるだけあって、カルーセルとしての機能は全て備えています。 レスポンシブ対応 CSS3はサポートブラウザ時に動作 オートプレイ対応 ナビゲーションはドット・アローの選択が可能 矢印キーでのキーボード操作に対応 ドラッグ・スワイプ操作に対応 無限ループ対応 slickのデモ デモでは、さまざまなカルーセルの動きを試せます。
レスポンシブでスマホもOKで軽量なLightBox系jQueryプラグイン - JETBABY
おはようございます。JETBABY管理人です。 今回はさらっと更新しちゃいます。 LightBox系のjQueryプラグインは色々ありますが、PCでもスマホでもきれいに動くのはあまり多くないですね。 今回紹介する「IMAGE LIGHTBOX」はレスポンシブ対応で最初かスマホを意識作られているプラグインになります。 iOSでもAndroidでも動きますし、日本ではあまりなじみないというか関係ないと思いますがWindowsPhoneでも動作します。 もちろんPCでも普通に動きます。 しかもminで4kbと軽量。 画像に特化しているので、iframeで別HTML呼び出したりなどの機能はないのが残念。 ですが、ギャラリー系や画像を見せたいコンテンツではありだと思います。 使い方はこちらのサイトから。 Demoはこちらからご覧ください。 スマホでもご覧ください。
[JS]変更時のアニメーションが気持ちいい、レスポンシブ対応のかっこいいグリッドを生成するスクリプト -Grid—A—Licious
Masonryはかっこいいけどパネル移動のアニメーションがちょっとな、という人にぴったりな、レスポンシブ対応でレイアウト変更時のアニメーションもスムーズでかっこいいグリッドを生成するjQueryのプラグインを紹介します。 Grid—A—Licious Grid—A—Licious -GitHub Grid—A—Liciousのデモ Grid—A—Liciousの使い方 Grid—A—Liciousの実装例 Grid—A—Liciousのデモ まずは、Grid—A—Liciousのベーシックな動作が確認できるデモからご紹介。 アレンジは、下記のGrid—A—Liciousの実装例で。 ページいっぱいに高さの異なるパネルが同じ間隔で配置されています。 デモページ：スマフォサイズ Grid—A—Liciousの使い方 Grid—A—Liciousは2008年にリリースされた当時は単にグリッド状に
レスポンシブデザインをコーディングする時の、自分なりのちょっとしたTips
前にこの記事で、レスポンシブデザインをコーディングの仕方の基本的なことを説明をしましたが、今回は自分が製作してる時に気をつけていることや、よく使う方法を書いておこうと思います。 案件や作業フローによって全然違う方法がよい場合もあるかもしれませんので、参考程度にどうぞ。 要素のマークアップ順序 会社や作業フローによるかと思いますが、今のところ、PC用とスマートフォン用のデザイン2枚が出来上がってくる事が自分は多いです。 そのデザインを見ながらHTMLを作っていきますが、この時スマートフォンのデザインを見ながらマークアップしたほうが良いと思いました。 文章の意味付け的にデザインで順序変えるのはどうなのよというのはありますが・・・。 positionを使って再現するデザインの場合はPCは簡単に位置を入れ替えることができますが、スマートフォンのデザインは320px～リキッドデザインにすることが多い
すぐに使いたい！レスポンシブWebデザイン対応の無料HTMLテンプレート10選 | TechAcademyマガジン
すぐに使いたい！レスポンシブWebデザイン対応のHTMLテンプレート30選 レスポンシブWebデザイン対応の【無料】HTMLテンプレートを紹介する記事です。スマートフォンやタブレットなどの多デバイスに対応できる、フリーテンプレートを集めてみました。海外サイトも多いですが、日本語表示が可能か確認済みです。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査 スマートフォンやタブレットの普及に伴って、Webサイトを多デバイスに対応することが増えてき
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
要素の横幅と高さの比率を保つ | 集の一期一会
無料でしかも高品質！1ページで構成されたサイトを作るためのHTML5/CSS3のテンプレートのまとめ | コリス
Loading...
