俺流レスポンシブコーディングの覚書。「人には人のレスポンシブ」があるのでこれが正解だってわけではないのですが、レスポンシブコーディングで悩んでいる人にとって参考になる記事になってくれたら嬉しいです。 ブレイクポイントは特定のデバイスの画面サイズを基準にしない 以前アンケートを取った時にデバイスのサイズを意識して決める人が半数以上を占めていた。 アンケート結果を抜きにしても「2021 年のブレイクポイント決定版はこれだ！」的な記事がバズっているのを定期的に目撃し、主流のデバイスのサイズを比較するアプローチがほとんどであるが、僕はデバイスの端末のサイズを基準にブレイクポイントを決めることには否定的である。 主流のデバイスのサイズなんてものは時間が経てば変化する。 昨年 iPhone 12 が発表された時に従来の画面サイズとは違うバリエーションになることが分かるやいなやタイムラインが慌てふためい

今日紹介する［Swiper］は、レスポンシブ対応サイトなどで真価を発揮するJavaScriptベースの「コンテンツ・スライダー」です。 初見の感想は「反応速度が早く軽量でサクサク動く」という印象。 レスポンシブにも対応済み。マウスのドラッグ操作やタッチコントロールのスワイプにも反応して操作性が良く、文句ナシのクオリティでした。 機能が豊富で、ざっと紹介すると以下のとおり。 レスポンシブ対応 フルスクリーン化OK ページネーション設置 縦方向のスライド カルーセル・モード 各スライドの位置を固定しない「フリーモード」対応 複数行のスライドに対応 縦方向・横方向の「入れ子」に対応 マウスのドラッグ操作に対応 スクロールバー表示 ナビゲーションボタン表示 無限ループ対応 フェードイン・フェードアウトによるスライドの切り替え 3D キューブ・エフェクト 3D カバーフロー・エフェクト キーボード・

去年ぐらいはレスポンシブ対応のナビゲーションというとハンバーガーメニューばかりでしたが、最近ではスクリーンサイズに合わせるだけでなく、コンテンツや階層構造に合わせたナビゲーションが増えてきました。 Webページやスマホページのレスポンシブ対応サイトで最近よく見かけるナビゲーションのアイデアや実装方法を紹介します。

レスポンシブウェブデザインでサイト作成をする際に、場合によっては使うことになるかも知れないJavascriptで画面サイズ指定に応じたjavascriptを読み込む条件分岐です。 <script type="text/javascript"> jQuery(document).ready(function($) { //PC環境の場合 if (window.matchMedia( '(min-width: 769px)' ).matches) {　//切り替える画面サイズ $.ajax({ url: 'js/pc.js', dataType: 'script', cache: false }); //モバイル環境の場合 } else { $.ajax({ url: 'js/sp.js', dataType: 'script', cache: false }); }; }); </scrip

2. 印刷会社で DTP オペレーターとして 2 年間勤めたあと退職し、 Web デザイナーのアルバイトとして複数の制作会社を転々としたり 海外に行ったりしたあと横浜の制作会社に務める。 制作会社でデザイン、コーディング、ディレクション、 コンサル等を幅広く経験する。2012 年 4 月よりフリーランスとして独立。 「レスポンシブWebデザイン入門」執筆 小川 裕之 barchin  hiro.ogw 13年10月8日火曜日

半年ほど前にここで、「jQueryでブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験」と題して、画面幅めいっぱいでのコンテンツスライダーを紹介しましたが、当時紹介したスクリプト構成だとレスポンシブには対応していませんでした。 同じ、画面幅めいっぱいでのコンテンツスライダー構成でレスポンシブ対応させたパターンを必要に駆られて作成してみたので、ここでも紹介してみたいと思います。 【2014/01/15】 スライダー部分にフリック動作を追加しました。スクリプト内の設定でフリック動作のON／OFFを設定が可能です。 このスライダーはなかなか言葉では説明しずらいのでまず動作サンプルから。 「jQueryでレスポンシブ対応のブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験」サンプルを別枠で表示 スライダー中心にメイン表示エリアを設置して、その

1. 文系デザイナーでも大丈夫！ レスポンシブWebサイトを          で作ってみよう November 3,2012 WordCamp Osaka 額賀 順子 12年11月3日土曜日 3. 自己紹介 額賀 順子 | ヌカガジュンコ フリーランスのWebディレクター／デザイナー。 つまり１人で大概の事はやっちゃう人。 Webデザインを中心に、企画・色彩設計、スマートフォンサイト作成など幅広く 制作を手がけています。 綺麗めのデザインが得意です。聞き取りを大切にします。何を望んでいて、どん な効果が欲しいのか。プランニングを重要視します。 制作を続けながら、厚生労働省緊急人材育成事業基金訓練のWebデザイン/カ ラーコーディネーター養成講師をつとめ、Adobeアプリケーションのインストラ クター、セミナー講師も兼務。 Webの仕事は人と人を繋ぐ仕事と考え、制作だけではなく講演や教育事

デザイナーの野田です。 前回書かせていただいた「必読！5分でわかるレスポンシブWebデザインまとめ」が、大変好評だったため、今回も続編を書かせていただきます。 今回は、応用編のつもりでしたが、前回だけでは足りていない事が多かったので、もう少し基本となる部分を固めていきたいと思います。 本当に基本的な事ですが、大切な事ですので、少しでも皆様のお役にたてればと思います。 レスポンシブWebデザインで必ず考えなければならない事 「レスポンシブWebデザイン」で制作する際には、必ず考えなければならない事がいくつかあります。 これは、考えていなければ制作する際に必ずつまずく事でもございます。 ■対応デバイスの確認 まずは、対応デバイスの確認をしましょう。 現在、様々な解像度を持つデバイスがございます。大体のサイズとして下記のものが挙げられます。 ※PCの解像度に関しては、今回は省略させていただきます

はじめは今までと同じように、カンプを作ってからコーディング、というやり方でした。 しかし、そのやり方だとトラブルが多いんです、なぜか。 ブレイクポイントとかで揉めたりすることが多いです。 早い話が、いままでの制作のやり方は、レスポンシブWebデザインでは無理だということです。 allWebクリエイター塾の菊池 聡さんは、「レスポンシブWebデザインでは、いままでの仕事のやり方は通用しない。いずれはブラウザでデザインする時代がくる」と、某セミナーで言っていました。 実際、最近は、ブラウザでデザインする、いわゆる「インブラウザ・デザイン」で制作することが多くなってきています。最近は、ほぼ7割くらいです。 最近、久しぶりにFireworksでカンプを作りましたが、「以外とPhotoshopやFireworksでカンプを作るのが面倒だな」と感じました（ちょっといらついていたような気がするのは気のせ

有名企業・団体のレスポンシブWebデザイン事例－... / レスポンシブWebデザインで作られたサイト15選... / PCサイトとスマートフォンサイトをどのように扱う...他...全8件

1. レスポンシブ ウェブデザイン基礎 Responsive Web Design Basic ・ レスポンシブ・ウ ブデザイ ェ ン基礎 Responsive Web Design Basic こもりまさあき 2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki 2. レスポンシブ ウェブデザイン基礎 Responsive Web Design Basic ・ 自己紹介 こもりまさあき http://blog.gaspanik.com  http://protean.im 1990年代前半に都内のDTP系デザイン会社にてアルバイトをはじめる。大学卒業後 そのまま正社員となり、入出力業務、デザイン業務、ネットワーク関連業務に並行し て従事。2001年、会社を退職しそのままフリーランスの道へ。案件ごとに業務内容 や立ち位置が異なるため、職域的な肩書きは

先日このブログをリニューアルさせて頂いた旨をご報告させて頂きましたが、今回のリニューアルの主目的だったレスポンシブデザイン化について、とにかく効率優先で作業させて頂いた時のリソース関連や情報を一度僕自身の忘備録として抜粋してまとめさせて頂こうと思います！以前別のブログを作った時もそうですが、基本僕はとにかく効率重視派です。細部に渡る美しいデザインや、ガリガリのプログラミング。標準に法ったコーディングとかはその道のスペシャリストが仲間内に居るので、今回も僕は効率化に焦点を当てています！ ご紹介させて頂くのは主にFacebookやTwitter周りで共有させて頂いてきたリソースばかりですが、実際に使ってみると見えてくる注意点や、戸惑った部分、周りのデザイナーにも知っておいて欲しい部分等が見え隠れしてきたので、まずはその辺りを中心に、作業ステップ毎に簡単にご説明させて頂こうと思います。 僕と同じ

昨年2011年10月に仕事で運営に携わっている大学ウェブサイトでレスポンシブWebデザイン (しかもフル可変グリッドレイアウト) を導入して、はや半年。約6ヶ月間、レスポンシブWebデザイン（RWD）で制作したウェブサイトを運営してみて思ったことをまとめてみました。これからレスポンシブWebデザインを導入したいと考えている方の参考になれば幸いです。 プロジェクトの概要 大学のウェブサイトをリニューアルするにあたり、さまざまな状況や制限などを考慮、また、今後3〜5年を見据えて、レスポンシブWebデザインを取り入れた制作を行いました。大学公式ブログでもリニューアルについて紹介しているので、ぜひそちらもご覧ください。そこで書いたように、以下のような思いもあり、このリニューアルを行いました： 今回、新しい試みを行った背景には、このウェブサイトが「大学のウェブサイト」であることが大きな要因の一つとし

FitText - A plugin for i... / slabText / FitVids.JS - A lightweig...他...全7件

Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp