【レスポンシブデザイン向け】はてなブログアーカイブページの記事数を変更するカスタマイズを作りました - 小さな星がほらひとつ
※PCとスマホを判定し、スマホで表示した場合のみカスタマイズを適用するように修正しました！ この度はてなブログのアーカイブページに表示する記事数を変更するためのカスタマイズを作成しました。作成経緯から設定方法までご紹介していきたいと思います！ レスポンシブデザインを使う理由 レスポンシブデザインの欠点 先人たちの解決策 アーカイブ表示のデメリット アーカイブページをアーカイブするカスタマイズを作った このカスタマイズでできること 設定方法 トップページをアーカイブ一覧に設定する フッタにスクリプトを貼り付ける このカスタマイズの悪いところ レスポンシブデザインを使う理由 はてなブロガーのみなさん、ブログのデザインは「レスポンシブ型」でしょうか、それとも「スマホ独立型」でしょうか。 私は「レスポンシブ型」を使っています。最大の理由は、 カスタマイズ・デザイン用のCSSやスクリプトの設定が一度
こんにちは（・∀・） 昨年【2018年度決定版】レスポンシブデザインのブレークポイントはこれで決まり！という内容の記事を投稿しました。 基本的な考えは変わってません。細かな指定で表示したい場合は前回ご紹介した通りの設定が良いと思っています。 しかし、管理することを考えると前回ご紹介したブレークポイントの数では手間が掛かってしまうのも事実。 なので今回、ちょっと多かったブレークポイントを少し減らしてみることにしました。 前回投稿した記事では作ったブレークポイントの数は10個。 10個と言っても考え方としてはメジャーブレークポイントはモバイルとPCの境目の835pxの1つです。 しかし、10個あるのに変わりはなく、また管理の手間を考えるとやはりブレークポイントは少ない方が良い。 ということで今回、ブレークポイントは415pxと960pxに決定しました。 0px 〜 414px @media (
この記事はSpeckyboy Design Magazineからの翻訳転載です。配信元または著者の許可を得て配信しています。 Keys to Designing a Great Mobile Website Experience さまざまな画面サイズのデバイスがあることから、今ではレスポンシブデザインが当たり前になっています。ユーザーがデバイスに関係なくコンテンツを利用できるように、さまざまな環境でテストをしながらWebサイトをデザインする必要があります。 ほかのあらゆるWebデザイン同様、モバイルなどの小さな画面向けのデザインに対する考え方はさまざまです。しかし考え方の違いに関係なく、Webデザインに関わる者であれば知っておくべきレスポンシブデザインの基本があります。 次にWebサイトをデザインするときは、以下の点を踏まえてモバイル用にもカスタマイズしましょう。 リーダビリティとユーザビ
前回は「ハンバーガーメニュー」について紹介させていただきました。 今回はハンバーガーメニューだけではない、レスポンシブデザインでも使えて、変換ツール系でも利用できる、jQueryメニューをいくつかご紹介します。 【関連ページ】レスポンシブデザインのスマホサイトを使いやすいUIに jQueryでサイトに合ったナビゲーションメニューを作ろう レスポンシブデザインで使える簡単メニュー「Naver」 レスポンシブデザインのサイトで今もよく見る形の、画面幅が小さい場合にグローバルメニューを、ハンバーガーボタンのメニューの中に隠すjQueryです。 【関連ページ】レスポンシブデザインのスマホサイトを使いやすいUIに サンプルコードはこんな感じになります。 <nav> <a href="#">Home</a> <a href="#">News</a&
アクセスしてきたユーザーの画面サイズによってページの表示レイアウトを切り替える「レスポンシブデザイン」。一見非常に良さそうに見えるこちらの手法ですが、最近では、新規にウェブサイトを構築する場合、避けた方が良い＝PCとスマホのページは分けて作った方が良いと考えられています。今回は、スマホとPCサイトを分けて作った方が良い3つの理由についてご説明します。 １）コストが増える 1つのファイルでPCとスマホのサイトをうまく表示させるのは、非常に複雑な作業です。CSSで調整を行っていくことになりますが、これは別々のサイトを作るよりも手間のかかる方法で、制作コストが高くなってしまいます。 また、採用したい表示方法があっても、端末によっては表示できないため、機能の制約も大きくなります。さらに、完成した後も表示の不具合が多いのが現状です。実際テストしてみると、「これは割にあわない」となる場合が多くあります
レスポンシブデザインのサイトが増えていますね。みはら.comは単純にWordPressのプラグイン（WPtouch）を使ってスマートフォン対応しているだけなので、完全に乗り遅れていますね。でも、先日紹介した「みはらマップ」では、中途半端にレスポンシブデザインを採用しています。 みはらマップ みはらマップでは特に困らなかったんですが、レスポンシブデザインを採用したときのひとつの課題に、「Google AdSenseがはみ出す」ってのがあると思います。コンテンツがキレイに収まっているのに、AdSense広告だけが収まりきらずにはみ出しているサイトってけっこう見かけると思います。そういうサイトって、下にスクロールしようとしたときに、右にずれてイライラしますよね。 せっかくスマートフォン対応のためにレスポンシブデザインを採用したのであれば、このAdSenseもきっちりと収めたいっていうのがスジじゃ
大手ソフトウェアダウンロード販売会社、Web制作会社などで、マークアップエンジニア、プログラマ、サービス企画、ディレクターを経験。2013年、株式会社ピクセルグリッドに入社。HTML、CSS、JavaScriptなどをオールラウンドに担当。とりわけ、プログラマブルなCSSの設計、実装を得意とする。 趣味で作成したゲーム「CSS PANIC」は、JavaScriptを一切使わず、HTMLとCSSのみで実装。海外サイトで紹介されるなど話題となった。
レスポンシブデザインが多くなってきている昨今にぴったりなカルーセルスライダーを紹介させて頂きます。 「Owl Carousel」というプラグインですが、 こちらのプラグインなにがぴったりなのかというと、 レスポンシブ対応なのはもちろんで、 タッチにも対応しており、 なんといっても一番いいのが、 オプションで、PC、ダブレット、スマホに合わせて、 アイテムの表示する数を変更出来るという点です。 他のプラグインでは、それようのオプションはなく、 自分でスクリプト書かなければいけませんでした。 幅の調整もできるので、自由度もあります。 デモがありますので、そちらをご覧下さい。 DEMO 設定の仕方 まずは、head内に以下のファイルを読み込みます。 <link rel="stylesheet" href="css/owl.carousel.css"> <link rel="styl
最近のWEBデザインの主流の一つレスポンシブデザイン。端末の解像度に応じて、その端末に最適化したデザインを提供してくれるものですが、慣れていないとなかなか一から構築となると難しいものです。今日紹介するのはシンプルなベースフレームで明快にレスポンシブデザインが実装できるフレームワーク「BASE」です。 こちらは「Super Simple Responsive Framework」とある通り、至ってシンプルなもので、テキストリンク、リスト、テーブルなどなど、基本要素のみで構築されています。 詳しくは以下 基本だけで構築されていますので、ソースも構造も非常にシンプルでベースのフレームワークとしてはかなり使い勝手のいいものになっております。ちなみにこちらのフレームワークはIE7以上、Chrome、Firefox、Operaに対応しています。 レスポンシブデザインを自分でコーディングしたい。学びたい
Ecozema @SviluppoBrianza: Il futuro e il compost di Armido MaranaAssoSCAI - Associazione per lo Sviluppo della Competitività Ambientale d'Impresa
はてなブログ初心者が楽しむカスタマイズ～デザインテーマの選び方・変更方法とレスポンシブデザインについて - さくさくの日常
こんにちは、さくさくです。 ご自分のはてなブログのデザイン、気に入ってますか？ 上級者の方は自分好みにどんどんカスタマイズすることができますが、ブログを始めたばかりの初心者だと、どこか一つ設定変更するのもドキドキですね。 この記事では、はてなブログを始めたばかりの人でも着せ替え感覚で楽しめるデザインテーマの変更やテーマの選び方についてご説明します。 デザインテーマとは デザインテーマの変更方法 デザインテーマの選び方 1カラム？2カラム？ 個性的かシンプルか レスポンシブデザイン対応か レスポンシブデザイン非対応テーマの表示 レスポンシブデザイン対応テーマの表示 レスポンシブデザイン対応のテーマを選んだら 使いやすいか？カスタマイズしやすいか？ テストブログがあると便利 私がテーマMinimalismを選んだ理由 まとめ デザインテーマとは はてなブログに関する記事を見ていると、時々テーマ
こんにちは、鴨田です。 最近はRetina対応のMac Book Proが出たり、特にスマートフォンに限らず、解像度の高いディスプレイが多くなってきました。そうなると、画像でいろいろな素材を作るということに関して限界が出てきます。 なので、最近はCSSだけでナビゲーションバーのデザインやコーディングを行うことが多いとは思いますが、知ってる人も知らない人もちょっとしたナビゲーションバーを作ってみましょう。 作るのは、横幅は特に設定しないレスポンシブデザインにも対応できるリキッドな6つの項目を持ったナビゲーションバーとします。ただし、スマートフォンを意識して、外側に320pxのラッパーを配置しておきます。 注意事項として、FirefoxとWebkit系ブラウザ(Google Chrome、Safariなど)でしかベンダープレフィックスをつけていないので、それ以外のブラウザで見ると、崩れます。
実務でよく使うhtml,css,jsの小技をつらつらと紹介します。 ※2/11のスクーの授業中で使った資料です。 https://schoo.jp/class/1776 【オシャレCSS編】 1. transformを使って要素を変形させるワザ 2. transitionを使い、CSSだけで簡単なアニメーションを行うワザ 3. keyframesを使ってCSSだけで複雑なアニメーションを行うワザ 4. 矢印アイコンをcssだけで表現するワザ 5. アイコンをアニメーションさせるワザ 6. CSSプロパティ”filter”で画像を加工するワザ 【地味だけど使えるワザ編】 7. 今どきの、要素を上下中央寄せにするワザ 8.「flexbox」で要素を自由自在に整列させるワザ 9. Windowsでwebfontをちょっとマシに見せるワザ 10. ア
The Responsinator レスポンシブデザインの動作確認が楽にできるツール「The Responsinator」。 サイトのアドレスを入れると一気に人気の端末の画面サイズでそのサイトを表示してくれるというものです。 単にiframeを並べたものかもしれませんが、一括でチェックできるのはなかなかナイス！ サイトURLを入れてGOボタンを押すだけ シンプルですが便利ですね 関連エントリ 秀逸なレスポンシブWEBデザイン50のサンプル フリーでレスポンシブなWordPressテーマ２８ レスポンシブなjQueryスライダー実装プラグイン８個
レスポンシブデザインでwebサイトを制作することが多くなってきていますが、 その中でスマホの場合を考えられてないケースが多々あります。 本来であればレスポンシブの構造上、スマホファーストで考えるべきところなのですが、 PC先行でデザインし、後でスマホをどうにかするってパターンになってしまっています。。。 そういった場合、 レスポンシブデザインはもちろん同じ一つのソースなので、 同じ画像ではダメなことがあります。 しっかりスマホファーストで考えていても、 PCは横長でスマホは縦長なので、 サイズを違うものにしたい場合もあると思います。 そんな時、PCとスマホで画像を切り替える必要があります。 元々htmlに両方書いておいて、 cssでdisplayをnoneやblockにするというあまり良くない方法もありますが、 今回はjQueryを使用した方法をご紹介します。 jQueryを使ってレスポン
１文字もHTMLタグを書くことなく、カッコいいウェブページが作れちゃう。もちろんレスポンシブデザインで、モバイル対応。
Visual Composer - Piloto OS：OS X 10.7 以降 掲載時の価格：840円 こんな方にお勧め： 手軽に一枚もののウェブページを作成したい方。 タグ打ちやコーディングをすることなく、見栄えのよいページを作成したい方。 ウェブページ制作の初心者以上の方。 ウェブページを短時間で量産したい方。 チェックポイント：本当に手軽にウェブページを作成することができます。さすがにウェブの知識が全くのゼロでは難しいでしょうが、MSワードで文書作成ができる方であれば、問題ないでしょう。少なくともHTMLタグを記入する必要はありません。 VC Pilotoは、作成画面で見えるままにウェブページを作ることができる(WYSIWYG)型のウェブ作成ツールです。基本的にはブロック型のテンプレートを選んで、積み上げて(ウェブページなので、正確にはぶら下げて)、テキストや画像を挿入して仕上げま
はてなブログ ３STEPでレスポンシブデザインに！やり方を解説♪ - イロイロひとりごと。
はてなブログでレスポンシブデザイン（PCとスマホ表示を同じデザイン）にするには、ちょっと設定がいります。 やることは意外と簡単なので、ぜひやってみましょう！ はてなブログの無料プランではスマホ表示をイジるのは限界があります。 スマホ版にはGoogleAdSenseの広告も貼れません。 ※2016.3 レスポンシブデザインでも無料プランだとはてなの広告が表示されるようになってしまったので、アドセンス広告は貼れません…。 ⇒スマートフォンで「レスポンシブデザイン」を有効にしているときの広告の表示について - はてなブログ開発ブログ レスポンシブデザインにすることで、PCでもスマホ、タブレットでも同じ設定で同じデザインが使えます。表示する画面サイズによって自動で、スマホの場合メニューバーが記事下に表示されます。 そして同じデザインにすることで、PCでの読者もスマホから見たときに同じブログって認識
Tumblrが素晴らしいのは、超ハイクオリティーなデザインテンプレート（テーマ）を無料で使用することができる点です。以下で紹介するデザインテーマはどれも無料でインストールすることができます。また、どれもレスポンシブ対応です。
レスポンシブデザインに対応した縦メニューを作ってみました。できるだけ詳しく解説してみますので、これを参考にサイトに合わせて自由にカスタマイズしてもらえたらうれしいです。 まずは実際に見てください。ブラウザを伸縮させながら見ていただければと思います。レスポンシブウェブデザインの確認にはブックマークレットのViewport Resizerも便利です。 では解説していきます。 HTML <div id="navigation"> <div id="toggle"><a href="#">menu</a></div> <div id="menu"> <h3>Tittle1</h3> <ul> <li><a href="#">menu1</a></li> <li><a href="#">menu2</a></li> <li><a href="#">menu3</a></li> <li><a href
1秒で出来るアドセンスレスポンシブデザインの形を指定する方法
アドセンスのレスポンシブデザインは何も指定しないと、横長とか縦長とか四角とか、勝手に表示されますよね。せめて簡単に四角バナーか横長バナーか縦長バナーだけでも簡単に設定できればと思う人にサイズを1秒で簡単に設定できる方法をご紹介 アドセンスのレスポンシブデザインの形を指定する方法 レスポンシブデザイン使いたいけど、使ってみると、ラージモバイルばビッグバナーの細い横長バナーになったり、スクエア型になったり、ラージスカイスクレイパーの縦長バナーになったりと自由すぎて嫌だ～！！って人多いと思います。 せめて、レクタングルタイプの四角、横長のビッグバナー、縦長の解すクレイバーの3つのどれかを簡単に選択して、後はその中からサイズをレスポンシブデザインで勝手に表示してほしいって思いますよね。 とっても簡単ですので以下の方法でやってください。 コードを発行すると下のような感じになると思います。 <ins
レスポンシブデザイン用の画像を一括生成してくれるサイト「Responsive Image Breakpoints Generator」 | ライフハッカー・ジャパン
ヘッドライトの黄ばみがサッとキレイに! メッキ・ホイール・シートにも使えるマルチ過ぎなお手軽クリーナー「ウルトライト」
https://hacks.mozilla.org/2013/03/capturing-improving-performance-of-the-adaptive-web/ 先日紹介した、WebRTC: サーバのない世界でwebをつくり直す [Realtime Conf. 2013Real] の中でFeross Aboukhadijehが”Super Crazy Hack”と絶賛していたのがCapturing。Capturingは、Mobify.jsの主要機能で、リソースの読み込み前にDOMをコントロールできるクライアントAPIです。 基本的な仕組みとしては、 <plaintext>タグをファイルの頭において、ブラウザがリソースをダウンロードしないようにする。<plaintext>タグをクローズしないので、その後に続くHTMLはplain textとして解析される。 リソースのダウンロード
テーブルをレスポンシブデザインに対応するためのCSSを使ったレイアウトパターン - YCOMのホームページの制作・運営に役立つブログ
ホームページのことを中心にためになるかもしれないことをいろいろと書いています。 ホームページ制作のことからSEOや広告、マーケティングの話まで思いついたことを語っています。 大阪のホームページ制作YCOMトップ ホームページ運営ブログ レスポンシブデザインをしていると悩まされるんがテーブルのデザインです。 PCの画面と違って表示領域が狭いので、工夫しないとうまくテーブルを表示できません。 CSSを使ってテーブルをレスポンシブデザインするためのパターンを３つ紹介します。 見出しとコンテンツを交互に縦表示 テーブルの縦横を切り替える テーブルそのものをスクロール レスポンシブでレイアウトを変更する 一般的にテーブルはTableタグを使っているでしょう。 その構成要素は、Tableはdisplay:tableが初期値で、tdやthタグはtable-cellが初期値になっています。 これらを操作す
はてなブログの記事編集画面で、スマートフォンでの表示をプレビューできるようにしました【レスポンシブデザインに関する追記あり】 - はてなブログ開発ブログ
はてなブログでは、PC版の記事編集画面でも、スマートフォンでどのように表示されるかをプレビューできるようにしました。これまでプレビューできた「PC」の表示に加えて「スマートフォン」を選択できます。 はてなブログ全体でもスマートフォンからの閲覧が伸びており、PCで記事を書く際にもスマートフォンでの読みやすさを考慮できるようプレビューを追加しました。どうぞご利用ください。 PCの記事編集画面でスマートフォンの表示をプレビューするには PC版の記事編集画面で「プレビュー」タブを選択すると、さらに「PC」「スマートフォン」のタブが表示され、プレビューを切り替えることができます。 PCの記事編集画面でスマートフォンの表示をプレビュー スマートフォン表示のプレビューにおける注意点 スマートフォン表示のプレビューにおいては以下の注意点があります。 スマートフォンにはさまざまな画面解像度が存在しますが、プ
グリッド＆レスポンシブデザインの組合わせ、ユニークなWordPressテーマ素材30個まとめ - PhotoshopVIP
Webサイトやブログなどで、コンテンツを分かりやすく、見やすく表示する方法のひとつとして、垂直/水平方向に分割するガイドラインを使ったグリッドシステムがあります。 このグリッドに、Webデザイントレンドでもあるレスポンシブデザインを加えることで、より動きのある、ダイナミックなサイトを制作することができます。 海外デザインブログWPdressingで、グリッドシステムを利用したWordPressプレミアムテーマを３０個まとめたエントリー「30+ Grid-Based WordPress Themes with Responsive Layout」が公開されていたので、今回はご紹介します。 パソコンだけでなく、iPhoneやiPadなどさまざまなデバイスに応じて、レイアウトを変化させながら、グリッドレイアウトを保つユニークなWordPressテーマ素材が多くまとめられています。 詳細は以下から
＜はてなブログ＞レスポンシブデザイン対応のテーマ22選 2016.8更新 - イロイロひとりごと
ブログをレスポンシブデザインに対応させておくと、PCでもスマホやタブレットでもスクリーンの大きさに合わせて表示してくれます。 はてなブログでレスポンシブデザイン対応のテーマを調べましたのでご紹介しますね！ レスポンシブ対応と紹介されていても、表示が切れてしまっているものは除き、おすすめのものを選んであります♪ ぜひ挑戦してみてねー(*´▽｀*) 公式テーマ Evergreen Journal-Pink B!KUMA Reach Terminal ユーザーが作成したデザインテーマ Innocent Brooklyn Blank CONTENTS Naked Spirea Minimal Green Material Chirari Written Simple Gray レスポンシブルー Rouge murmur-skyblue Pathbook ZEN for Hatena Blog 芭蕉
レスポンシブデザインでクリッカブルマップ（イメージマップ）対応にするjQueryプラグイン - ホームページ制作やリニューアル印刷物デザインなら大阪のWPC
レスポンシブデザインでクリッカブルマップ（イメージマップ）対応にするjQueryプラグイン レスポンシブにすると画像の大きさが変わってしまって、クリッカブルマップ（イメージマップ）の座標がズレるってことになりますよね。 少し古いプラグインですが、そんな時に使えるレスポンシブに対応するクリッカブルマップjQueryプラグインをご紹介します。 Responsive Image Maps jQuery Plugin まず、stowball/jQuery-rwdImageMaps ・ GitHubにアクセスして、該当ファイルをダウンロードしてきます。 下図の丸印「ZIP」をクリックすると「jQuery-rwdImageMaps-master.zip」というフォルダがダウンロード出来ると思います。 で、フォルダを開いた中に「jquery.rwdImageMaps.min.js」ファイルがありますので
レスポンシブデザインでリピートしないタイプの背景画像があると悩んでいました。 デバイスによって、横幅が違うため、自ずと要素の横幅が変わる中でどのように背景画像を指定すればいいのだろうか・・・と。 「その要素は横幅が固定です。」となればいいのですが、そういうわけにもいかないと思います。 これは背景画像だけでなく、iframeや動画の埋め込みなんかもこのようなことが起きるかと思います。 この問題を解決する方法を少し前に発見したので記載したいと思います。 ちなみに今までの対処法としては、ブレークポイントに合わせて都度高さの設定を行っていました。 そのブレイクポイントの解像度のデバイスならいいんですが、それ以外だと崩れて見えてしまっていました。 新しい方法の説明する前に、DEMOをご覧ください。 わかりづらいかもしれませんが、今までの方法と新しい方法を２つを載せています。 ブラウザを縮めてみ
IBM、Web上でSwiftを実行できるテスト環境「IBM Swift Sandbox」をv0.4へアップデート。iPhoneなどでも最適に利用できるようレスポンシブデザインを採用。
BMは最新のバージョンのSwift言語をWebサーバー上で実行できるテスト用環境「IBM Swift Sandbox」を昨年末に公開しましたが、現地時間1月20日にこのSwift Sandboxをv0.4へアップデートし様々なデバイスに対応するため、レスポンシブデザインを採用しています。 Today, we are very proud to introduce version 0.4 of the Sandbox, and while I can’t call it “life-changing”, science has yet to prove that it isn’t. […] So as part of our total redesign, we have made the Sandbox completely responsive, giving users a great
[レベル: 中級] モバイルサイトの構成において、「別々のURL」から「レスポンシブ ウェブ デザイン」への移行を計画しているなら、モバイル ファースト インデックスが導入される前に完了させたほうがいいと、Google の John Mueller（ジョン・ミューラー）氏は推奨しました。 MFI 後は正規 URL の移行になってしまう モバイル ファースト インデックス（以下、MFI）導入前に移行を完了するようにミューラー氏が勧める理由は、インデックス対象になる正規 URL の入れ替えが発生するかしないかの観点からです。 別々の URL で構成するモバイルサイトの URL が現状では次のようになっていると仮定しましょう。 PC 向けサイト => https://example.com モバイル向けサイト => https://m.example.com 現在は、PC 向けページがインデック
この前、レスポンシブデザインを制作していたら突然というか気づかないうちに右側に結構な幅の空白が空いていました。あれ？おかしいなおかしいなと思ったので、そのときの解決策を試行錯誤も踏まえ載せてみます。 背景 今回のレスポンシブデザインはウィンドウサイズを縮めていったらそのまま全体的にしゅるしゅると縮小していくものだったのでwidthは基本的には%で設定しています。 気がついた時には空白はそこにいた。 とりあえず、一通り作り終え、スマートフォンで確認したときです。 あれ？斜めに動く。。。 まじすか。え、でもPCだと大j…空白あるわ。 うおーーい！（テストアップ3時間前）←ここから最終調整やなんやするのに。。。 viewportの設定 恥ずかしながらviewport設定するのを忘れてました。なんやなんや、原因これか。 <meta name="viewport" content="width=de
https://www.youtube.com/watch?v=UA0XnOxHqNg 1 comment | 0 points | by WazanovaNews ■ comment by Jshiike | 約2時間前 “Junior Designers vs Senior Designers”というエントリーで、経験の少ないデザイーナーとデキるデザイナーの違いが、わかりやすいイラストで簡潔に表現されています。（実際にイラストを見ないとわかりづらいかもしれないので、サイトで確認ください。） この中で、FacebookのDesign DirectorのJulie Zuoが紹介しているポイントは、 1) プロセス: やみくもに迷走しながら進むのではなく、論理だったメソッドを順次検証することによりゴールに到達する。 2) 目標: 「よく見せる」、つまり、型の決まった箱の中でパーツを整理して
オフラインファースト、レスポンシブデザインの新視点、新たなブラウザ対応アプローチなど海外WEBテク20本を一挙公開
オフラインファースト、レスポンシブデザインの新視点、新たなブラウザ対応アプローチなど海外WEBテク20本を一挙公開 斉藤 祐也（株式会社リッチメディア） 斉藤祐也の海外WEBテク定点観測＜Issue.8: 2013/11/01-2013/11/30＞ 今月の定点観測は、モバイル開発で考慮したいオフラインファースト構想について、レスポンシブウェブデザインに対する別視点、コンポーネントレベルでのプログレッシブ・エンハンスメントのアプローチなど合計20件の記事や動画などを紹介します。 注目ニュースピックアップ Offline First! モバイル・ファーストをさらに一歩進め、”不安定なインターネット接続”や”バッテリー”というモバイルならではの問題を解決に導くためのオフライン・ファーストというアプローチが注目を浴び始めている。 そのタイミングで議論のスタートポイントとなるべく作られたのがこのサ
スマートフォンで「レスポンシブデザイン」を有効にしているときの広告の表示について - はてなブログ開発ブログ
平素は、はてなブログをご利用いただきありがとうございます。 はてなブログでは、ブログのデザインをカスタマイズするオプションとして「レスポンシブデザイン」に対応しており、スマートフォンから閲覧したときにもPCと同じデザインテーマで表示させることができます*1。 参考：スマートフォンで閲覧したときにも「PCのデザインを使用」するオプションを追加しました これまでレスポンシブデザインを有効にした場合に、スマートフォンからの閲覧時でも、PCでの閲覧時と同じ位置に広告*2を表示していましたが、本日よりデフォルトのスマートフォン表示*3と同じ位置に表示するようにしました。 なお、PCからの閲覧、およびレスポンシブデザインを使用していないブログについては、これまでと変更ありません。 ※有料プラン「はてなブログPro」に加入し、詳細設定ページで「広告を表示しない」オプションを有効にすると、PCおよびスマー
「Google Chrome 57」安定版リリース、レスポンシブデザインに適した「CSS Grid Layout」をサポート
By ｍｅｒａ ウェブブラウザ「Google Chrome」の最新安定版となる「57.0.2987.98」がWindows・Mac・Linux向けにリリースされました。このバージョンではCSSで要素ごとに区切った格子を制御できる「CSS Grid Layout (display: grid;)」をサポートするほか、JavaScriptを補完することで動的コンテンツをスペックの低いマシンでも高速に動作させることができる「WebAssembly」が初めてデフォルトで有効化されています。 Chrome Releases: Stable Channel Update for Desktop https://chromereleases.googleblog.com/2017/03/stable-channel-update-for-desktop.html Chromium Blog https:
レスポンシブデザインがすべてではない：マーケターが適応するべきデザインと開発のトレンド（中編） | Moz - SEOとインバウンドマーケティングの実践情報
トヨタをはじめとする競合は、サイトを訪れるほとんどのユーザーが車種の選択肢を見たがっているか、販売店を探しているのだと認識している。 ホンダもトヨタも、レーシングのサイトを用意しているし、産業用エンジンも販売している。しかしトヨタは、Toyota.comを訪れるほとんどのユーザーが消費者向けブランドを求めており、レーシングファンはグーグルで「Toyota racing（トヨタ レーシング）」と検索するだろうとわかっている。なお、Toyota.comのフッターには、さまざまな関連サイトへのリンクも置いてある。 僕の言う「モバイル限定デザイン」を避けるべきだとする原則の例外があるとすれば、それはデザイン事務所かもしれない。Big Spaceshipのサイトを見てほしい。 ここはデザインエージェンシーであり、僕よりはるかにウェブデザインに詳しい。これは素晴らしいサイトで、売り上げにもつながるだろ
前回の「コーディングの手腕がないデザイナーだけでWebページ制作をしてみた件について」から続いていたLP（ランディングページ）制作も、ひとまずは落ち着いたかのように見えた。 しかし、クライアントもいろいろとWebの最新情報を集めているようで、次なる要望を伝えるメールが届いた。 スマホで見てもPCと同じレイアウトだから、ちょっと使いにくいので、スマホで見たときはレイアウトを変える方法、「レスポンシブ」っていうのですか、アレをやってほしいのです。社長は「岡本さんなら10分くらいで終わらせられる」って言うのですが、さすがにそれは難しいと思うので明日の15時くらいまでにいただけるでしょうか？ また明日！ しかも検討の余地すら与えられない！ 「Adobe Creative Cloud」なら何とかなるのだろうか……。 「レスポンシブWebデザイン」（以下、レスポンシブデザイン）というのは、デバイスの情
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【2019年度決定版】レスポンシブデザインのブレークポイントはこれで決まり！
HTMLやCSSを知らなくても、シンプルなレスポンシブデザインのWebサイトを作成できるMac用Webエディタ「Blocs」がリリース予定。
モバイルのレスポンシブデザインにおける４つの基本ポイント | UX MILK
【まとめ】レスポンシブデザインで使えるメニュー3選＋１｜モバイルラボ
レスポンシブデザインって本当に使える？レスポンシブを避けるべき3つの理由 - セルバマーケティングブログ
［み］レスポンシブデザインのWordPressでAdSenseを切り替える方法
レスポンシブデザインのWordPressユーザ注目。スマホ閲覧時に記事中のAdsense広告をはみ出させない方法 – Handmade Future！
レスポンシブデザインにおけるテキストのコントロール | 前編 テキストの折り返しを制御する
レスポンシブデザインにぴったりなカルーセルスライダー「Owl Carousel」 | スターフィールド株式会社
シンプルなベースフレームで明快にレスポンシブデザインが実装できるフレームワーク「BASE」
実例から見る、CMSとレスポンシブデザインで変わるウェブ制作のワークフロー
CSS3だけで作るレスポンシブデザイン対応ナビゲーションバーの作り方
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
レスポンシブデザインの動作確認が楽にできるツール「The Responsinator」:phpspot開発日誌
レスポンシブデザインでPCとスマホで画像を切替える方法 | スターフィールド株式会社
これが無料？おしゃれなTumblrテーマ26選（レスポンシブデザイン対応）
普通の縦メニューをレスポンシブデザインに対応させてみる｜Webpark
Capturing: レスポンシブデザインにおけるパフォーマンスを向上させる - ワザノバ | wazanova.jp
背景画像等をレスポンシブデザインでも縦横比をぴったり固定する方法 | スターフィールド株式会社
別々のURLからレスポンシブデザインに変更するならGoogleのMFI導入前に
レスポンシブデザインで右側に謎の空白ができたときの解決策 | ocws BLOG
一歩進んだレスポンシブデザインの取組み - ワザノバ | wazanova
【レスポンシブデザイン】テーブル、と見せかけて幅のタイトなスマホではカラムを落とせるパーツなどいかがでしょう。 | バシャログ。
PSDファイルを基にしたリリースレベルのレスポンシブデザインの作り方