CSSの進化がすごすぎる！新しいレスポンシブデザインの実装方法を解説 | コリス

2021/05/27 554 users コリス ビューポート CSS コンポーネント アニメーション

現在のレスポンシブデザインは、ビューポートにもとづいてレイアウトを最適化しています。しかし、新しいレスポンシブデザインでは、アニメーションが不要なユーザーには動きを少なくしたり（無くしたり）、親コンテナの幅にもとづいてコンポーネントを最適化したり、スコープ付きスタイルやフォームファクターなど、ユ... 続きを読む

レスポンシブデザインのブレイクポイントの正解はこれだった[2019最新版] - webのあれこれ

2019/07/30 610 users 正解 web PDF 方向 ブレイクポイント

PDFはこちらからどうぞ[500KB] 2019年Pixel 3aやGalaxy S10など一通り新機種が発表されたので、2019年改めてブレイクポイントについて考えてみました（3年ぶり！）。 3年経ってほとんどのサイトがレスポンシブデザインになって、ブレイクポイントを少なく効率よく設定していく方向になっているのだと思います 前回、ブレ... 続きを読む

レスポンシブデザインにすぐ使える！すごいアイデア30個 | コリス

2016/03/04 662 users DESIGN スクロール フォント トリミング スワイプ

サイトをレスポンシブ対応にするには、デバイスごとのスクリーンサイズ、フォントや画像のサイズだけでなく、クリックとタップ、スクロールとスワイプなどの機能性、そして見た目もサイズだけでなく、配置やトリミングなど、さまざまな取り組みがあります。 レスポンシブデザインにすぐに使える制作テクニックのすごいアイデアを紹介します。 Responsive web design: What the Internet... 続きを読む

今どきのウェブサイトをつくろう！差がつくHTML/CSSコードスニペット27個まとめ - PhotoshopVIP

2016/02/16 709 users ウェブデザイン PhotoshopVIP 今どき レイアウト

新しいテクニックを活用した、最先端のウェブデザインから学ぶ、今後のウェブ制作に活用したい素敵なHTML/CSSコードスニペットをまとめています。 コピー&ペーストで利用できるお手軽なCSSアニメーションやホバーリンクなどに加え、インパクトのあるレイアウトを実現できる本格的なアイテムやプラグインが揃います。スマートフォン端末ユーザーがさらに増えると予想される2016年、レスポンシブデザインやSVG形... 続きを読む

いま一度知っておきたい！レスポンシブなサイトを制作するときに意識したい基本項目7つ

2014/03/12 668 users 一度 タブレットユーザー のび太 多いライター WEB制作者

どうも〜こんにちはぁ！　最近レスポンシブなサイトを作ることが多いライターの、のび太です。 モバイル、タブレットユーザーが最近どんどん増えてきているので、Web制作者にとってレスポンシブなサイトが作れるってことが必須になるんじゃないかなぁ〜って感じますね。 レスポンシブデザインを制作するときに意識しなきゃいけないことはいろいろありますが、今回は「これはぜったいに知っておきたいよね！」って感じた基本的... 続きを読む

なにこれ超便利！レスポンシブデザインのサイトが各デバイスでどう見えるかが一目瞭然！Adsenseの確認にもなるよ！ | なまら春友流

2014/02/10 655 users adsense GoogleAdSense なまら春友流

当サイトはレスポンシブデザインを採用している。 それに合わせて最近GoogleAdsenseのコードをレスポンシブ対応のものに変更した。 その際に面倒なのが、広告が自分のサイトでどう表示されているのかの確認。 キャッシュが残ってたり表示させるガジェットを持っていなかったりという問題があってなかなか簡単に確認できなかったけれど、そんな悩みを一発で解決してくれる便利サイトがあったのでご紹介。 http... 続きを読む

CSS で指定幅を超えた文字列を切り取り「…」を付加する方法 | monopocket blog

2013/11/04 656 users CSS レイアウト 実装 HTML 要素

この記事では、CSS で指定した幅を超えた HTML 要素を切り取って「…」を付加する方法を紹介する。 なにが嬉しいか 動的に文字列を表示するときや、レスポンシブデザインで動的にレイアウトを調整するときなど、指定した幅以上のコンテンツを切り取る事ができたら、非常にレイアウトが楽になる。 私は、これまで JavaScript などで文字数をカウントしてこのような実装に近い物を作っていたが、半角文字と... 続きを読む

今こそ未来！CSS3のFlexboxを基本から理解して、使い倒そう！ | 株式会社LIG

2013/04/30 877 users Flexbox 初耳 昨今 デモ 株式会社LIG

こんにちは、王です、デザイナーやってます。 「これからの時代はFlexboxだ！」 ということで短い動画を用意しておきましたので、初耳の方、ざっと「Flexboxで何が出来るか？」が分かるかと思います。 動画の中で使ってたデモをこちらにアップしたので、実際に確認してみたい方ご自由に。 PC、タブレット、スマホ…デジタルデバイスサイズの多様化で、昨今ではレスポンシブデザインとやらが流行っています。同... 続きを読む

たった１行で完成？凄まじくレスポンシブデザインなサイトの作り方 | DECONCEPTER

2012/10/18 1703 users レスポンシブ・ウェブデザイン NHKスタジオパーク 話題

簡単に作れる！みんな大好き可変グリッド 先日話題になっていた「なんだこれ！！「NHKスタジオパーク」のレスポンシブ・ウェブデザインが凄まじくレスポンシブ！！」で紹介されていたNHKスタジオパークのレスポンシブデザイン。 こちらのサイト、プラグインを使ってとてもシンプルに作られています。キレイ。このシンプルさを伝えたくてうずうずしてきました。せっかくうずうずしたのでどんな作り方をしているのかサンプル... 続きを読む

[CSS]ウェブデザインの可能性を広げる10のスタイルシート | コリス

2012/07/25 635 users max-width Media コリス ウェブデザイン CSS

ウェブサイトを制作する際、特にCSSの新しいテクニックにはデザインの可能性を広げるのに役立つものがたくさんあります。 すべてのウェブ制作者が知っておくべき10のスタイルシートを紹介します。 @media screen and (max-width: 960px) { } 「@media」は単に印刷用ページのためだけではありません。最近のウェブサイトで多く見かけるレスポンシブデザインや可変レイアウト... 続きを読む

約36時間でレスポンシブデザインを作る！効率最優先で作るため必要だったリソースや情報色々 | バンクーバーのうぇぶ屋

2012/07/03 854 users バンクーバー リソース うぇぶ屋

先日このブログをリニューアルさせて頂いた旨をご報告させて頂きましたが、今回のリニューアルの主目的だったレスポンシブデザイン化について、とにかく効率優先で作業させて頂いた時のリソース関連や情報を一度僕自身の忘備録として抜粋してまとめさせて頂こうと思います！以前別のブログを作った時もそうですが、基本僕はとにかく効率重視派です。細部に渡る美しいデザインや、ガリガリのプログラミング。標準に法ったコーディン... 続きを読む

Twitter Bootstrapが大幅バージョンアップ！して凄まじいことに・・・ | IDEA*IDEA

2012/02/01 1313 users おぉ IDEA メジャーバージョンアップ スゴイ じいこと

愛用しているTwitter Bootstrap、次に「version 2」になりましたよ。今まで「version 1.4」だったのでメジャーバージョンアップ！ですよ。これは見逃せない、というか、感動した！ 個人的に「おぉ！」と感じたところをざっと紹介してみるよ！ ■ レスポンシブデザインに対応！ ↑ すごい！ ■ アイコン付きボタンが作れる！ ↑ すごい！ ■ ボタングループが作れる！ ↑ すごい... 続きを読む