[B! Responsive] akira_maruのブックマーク

akira_maru id:akira_maru

Responsiveに関するakira_maruのブックマーク (265)

Create a responsive grid layout with no media queries, using CSS Grid - Andy Bell
Create a responsive grid layout with no media queries, using CSS Grid Embracing the flexible nature of the web gives us powerful, resilient front-ends, where instead of using specific sizes, we give elements sensible boundaries and let them auto-fill where possible. I embrace this mentality as much as possible and roll utilities out like this one for grid layouts: See the Pen Piccalilli CSS Utilit
akira_maru 2019/06/05
grid

responsive
リンク
Media Queries（メディアクエリ）とJavaScriptの連携について - Qiita
レスポンシブのサイトの制作を行っていると、PCとTABとSPのそれぞれのレイアウトでそれぞれ別々のJSの動作をさせたいということがあると思います。それを実現するためにはJavaScript側から今どのレイアウトになっているのかという事を知る必要があります。そこで今回はJavaScriptでのメディアクエリの判定方法についてご紹介します。まずはやってしまいがちなNGパターン、続いてOKパターンをいくつかご紹介します。 NGパターン jQueryのwidthメソッドを使用して判定 OKパターン window.innerWidthプロパティを使用して判定 window.matchMediaメソッドを使用して判定 PC/SP時に表示/非表示にするコンテンツの表示/非表示の状態を読み取って判定 contentの値を使用して判定 font-familyの値を使用して判定 NGパターンまずはやって
akira_maru 2018/06/04
mediaqueries

responsive

javascript
リンク
Flexible type with :root - Matt Smith
One element of responsive web design that can be tricky to solve for is typography. Ideally you want to have type that’s as fluid as possible across different viewports. A conventional way of doing this might be to start with a base font size and then change it when you hit a specific breakpoint: p { font-size: 1em; } @media screen and (max-width: 45em) { p { font-size: 1.25em; } } Here the font s
akira_maru 2018/01/10
Flexible

calc

typography

responsive
リンク
レスポンシブ対応！縦に半分割しているWebサイトの作り方
2017年1月16日 CSS, Webデザイン, スマートフォン画面を大胆に縦に割ったレイアウトのWebサイトが流行中。複数のセクションで分割しているサイトもありますが、中でも多く取り入れられているのが真っ二つに分けている半分割のレイアウト。インパクトがあって注目を集められる上、スクロールをせずに複数の情報を表示できます。今回はそんな縦半分割のレイアウトを使ったWebサイトの作り方と、実例をいくつか紹介します。 ↑私が10年以上利用している会計ソフト！縦に半分割しているWebサイトを作ってみよう！ Dropboxのガイドラインページでは、ユーザーガイドと管理者ガイドが同レベルの重要度としており、ふたつのコンテンツを横並びにして表示しています。このように複数のコンテンツを同じ重要度で見せたい時に縦分割のレイアウトが活かせます。幅の狭いデバイスで見るとカラムが縦並びに変更されます。今回
akira_maru 2017/12/27
レイアウト

responsive
リンク
The Blog | Welcome to Adobe Blog
The Blog | Welcome to Adobe Blog アドビのブログでは、Creative Cloud、Document Cloud、Experience Cloudの最新情報や役に立つ情報を紹介しています。
akira_maru 2017/11/13
svg

imagemap

responsive
リンク
Google MapやYoutubeをレスポンシブ対応させる方法 - Qiita
WebサイトにGoogle Mapを埋め込んだり、Youtubeの動画を埋め込んだりすると、スマホで見た時等に表示が崩れる…YoutubeやGoogle Mapのwidthに合わせるために本体が細くなったり、逆に横スクロールバーが出たりなどします。その解決策と詰んだ部分をシェアしたいと思います。 YoutubeやGoogle Mapを埋め込み、レスポンシブ対応させる YoutubeやGoogle Mapを埋め込むコードをdivで囲みます。 CSSで指定するためにクラス名を適当につけてくださいね。 <div class="google-map"> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3280.1066533798594!2d135.4937565508161!3d34.702489790533
akira_maru 2017/07/25
googlemaps

youtube

responsive
リンク
これはすごい！メディアクエリなしでレスポンシブを実装するCSSトリック5選
メディアクエリーのようにビューポートではなく、コンテナの幅に応じてレイアウトを柔軟に調整するテクニックを紹介。calc関数を上手に活用した、マニアックなCSSトリックたちです。はじめに、タイトルとは裏腹にこの記事は、メディアクエリ不要論を唱えたり、メディアクエリを批判したりするものではないことを伝えておきます。メディアクエリはとても使い勝手が良いので、私はいつもいろいろなことに使っています。とはいえ、メディアクエリでレスポンシブWebデザインにおける課題すべてを解決できるわけではありません。要素の配置はビューポートではなくコンテナの寸法に基づいて変更するのが望ましい場合がよくあります。この課題を解決するためにエレメントクエリのコンセプトが誕生しました。とはいえエレメントクエリは実際まだ納得のいくものになっていないので、Mat Marquisはこのコンセプトにおける課題を示し、改良してc
akira_maru 2017/04/07
css

responsive
リンク
Navigation · Formstone
Navigation Demo View Documentation Basic By default, Navigation will only activate itself on screens smaller than 980px. Resize your screen if the menu is not active. <h5 class="nav_handle">Menu</h5> <nav class="navigation" data-navigation-handle=".nav_handle"> <a href="#">One</a> <a href="#">Two</a> <a href="#">Three</a> </nav> $(".navigation").navigation();
akira_maru 2016/06/25
navigation

responsive

mobile
リンク
http://liquidslider.com/
akira_maru 2016/06/25
jquery

responsive

slider

tab
リンク
Basis Documents
Typography Heading h1. heading Small text h2. heading Small text h3. heading Small text h4. heading Small text h5. heading Small text h6. heading Small text Body text Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula. Cum sociis natoque penatibus et magnis dis partur
akira_maru 2016/03/02
responsive

css

framework
リンク
[JS]レスポンシブ用の複数サイズの画像をHTMLの記述で簡単に配置できる超軽量スクリプト -lazySizes
スクリプトは外部ファイルを記述するだけ、レスポンシブ用画像の配置や設定はHTMLベースで記述できるスクリプトを紹介します。超軽量（5.8KB）で、jQueryなど他のスクリプトは不要です。
akira_maru 2016/02/23
responsive

img

javascript
リンク
最近のWebサイトで使われている、レスポンシブ対応のページレイアウトに役立つスクリプトのまとめ
レスポンシブ対応のカード型レイアウト、中央で分割されたレイアウト、動画や画像や幾何学模様を背景に配置したり、画像やコンテナのサイズをデバイスごとに最適化したりなど、ページのレイアウトに役立つスクリプトを紹介します。 stackgrid.adem.js -GitHub デモページ HTMLの実装は非常にシンプルで、divで実装した各コンテナのカラム数・幅・溝をアニメーションで変更します。レスポンシブ対応で、コンテナの増減にも対応。単体スクリプト・MITライセンス
akira_maru 2016/02/15
jquery

javascript

responsive
リンク
FreeHTML5.co
Free & Premium HTML5 Bootstrap Templates We Carefully Crafted Beautiful & Functional Free/Premium Bootstrap Templates
akira_maru 2015/12/08
template

bootstrap

responsive
リンク
レスポンシブで横幅いっぱいに表示できるjqueryカルーセルいろいろ |　バニデザノート
ウェブサイトのTOPページのアイキャッチエリアで横幅いっぱいに大きな写真がスライドするようなあの動きを実現できるjqueryプラグインをいくつか紹介してみます。トップページを見るとCSS3なダイナミックなものになっていますが、平面的なものも作れるみたいです。軽量でフレキシブルなのが売りのようです。横幅いっぱいに画像を引き延ばすこともできますが、左右に前のスライドを残すタイプのものも得意そうです。 Glide.js ドキュメント / ダウンロード
akira_maru 2015/09/23
responsive

jquery

carousel
リンク
Pushy - Off-Canvas Navigation Menu
Pushy is a responsive off-canvas navigation menu using CSS transf orms & transitions. This project was inspired by the off-canvas navigation menu seen on Medium. Pushy has been implemented on many sites, check them out! Feel free to let me know if you use Pushy in one of your websites. Download | Documentation | View Project on GitHub Features Uses CSS transf orms & transitions. Smooth performance o
akira_maru 2015/09/16
navigation

jquery

responsive

sidebar
リンク
GridLayout — Lightweight grid system for advanced web app layouts, with support for older browsers.
Lightweight grid system for advanced horizontal and vertical responsive web app layouts, with support for older browsers. Why use GridLayout? If you need to create complex app layouts, similar to native ones, with support for older browsers. GridLayout is a ~1 KB (minified and gzipped) CSS file and a ~0.5 KB JavaScript file used only for Internet Explorer support. *If you just support modern brows
akira_maru 2015/08/27
gridsystem

responsive
リンク
Bootstrapは無し、HTML5とCSS3のシンプルなコードで実装されたレスポンシブ対応のテンプレートのまとめ
Bootstrapなどのフレームワークは無し、HTML5とCSS3のシンプルなコードをベースに、jQueryなどでいろいろなインタラクションやアイコンフォントなどを使ったレスポンシブ対応のテンプレートをTemplatedから紹介します。
akira_maru 2015/07/07
template

inspiration

webdesign

responsive
リンク
Start - Responsive One Page Template ~ Landing Page Templates ~ Creative Market
It's great if you are designing to build your company website to promote itself or your products! We assure you should choose Start HTML Template - It's your superior choice. This is the Responsive One Page HTML Template which is written based on Bootstrap & LESS. It completely catches your customer's eyes with vogue Retro style. With 9 block content, Start HTML Template helps you to introduce pro
akira_maru 2015/06/26
responsive

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

table

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

javascript
リンク
1 2 3 4 5 6 7 8 9 10 次のページ