★レスポンシブデザインで使うメディアクエリの設定方法とブレークポイント最適値について
スマホファーストでおまけ的にPC対応という案件が以前よりも増えていますが、やっぱり多いのはPC優先でスマホ表示も確保するというもの。で、このような複数デバイス間の表示を最適化する手法としては以下のものがあります。 モバイル用とデスクトップ(PC)用を別々に用意してアクセスする端末で切り替えるブラウザのウィンドウサイズによって表示内容を変える1はユーザーエージェント(何を使ってアクセスしているか)で判別する形式で、Wordpressではwp_is_mobile()という関数を用いてif文で条件分岐させれば簡単に実現可能です。 2はレスポンシブウェブデザインと言われ、メディアクエリを用いて制御する手法。これについては、Googleがモバイル フレンドリーなサイトを構築するガイドラインを出しています。 参考1: はじめる - ウェブマスター向けモバイルガイド ↑ 知らない人は必須なので目を通して
1行追加でOK！CSSだけで画像をトリミングできる「object-fit」プロパティー
2018年4月5日 CSS 画像の一覧を表示する時などは、画像のサイズが統一されていると並べて表示させてもすっきりキレイに整って見えますが、必ずしもサイズが同じとは限りません。かといってPhotoshopを使ってすべての画像をリサイズできない…ということもあるでしょう。そんな時はCSSでトリミングすると楽です！今回は「object-fit」というプロパティーを使って、画像の縦横比を保ちつつトリミングする方法を紹介します。 ↑私が10年以上利用している会計ソフト！ 画像を中央の位置でトリミングする まずはこの縦長の画像、横長の画像を並べ、縦横250pxの正方形の形で表示させてみましょう。 img { width: 250px; height: 250px; } CSSでこのように画像に対してサイズを指定すると… こんな感じでグチャッとつぶれて表示されちゃいます…。 そこで画像に対して obj
AMP （Accelerated Mobile Pages） バリデータの Web 版が公開される
AMP HTML の文法が妥当かを検証するバリデータに Web 版が新たに追加されました。AMP の URL を入力、またはソースコードを貼り付けることで、その AMP が文法的に妥当かを簡単にチェックすることができます。 AMP （Accelerated Mobile Pages） の文法が妥当かを検証 （バリデーション） する機能としては、#development=1 を付与した上で開発者ツールによる検証を行う機能が当初から AMP フレームワークの標準機能として提供されていましたが （参考記事）、もっと簡単にバリデーションを行うため、Chorme 拡張が今月に入ってリリースされています。 A Chrome extension to help validate your AMP pages ： Accelerated Mobile Pages Project 今回は、この AMP バリ
【まとめ】レスポンシブデザインで使えるメニュー3選＋１｜モバイルラボ
前回は「ハンバーガーメニュー」について紹介させていただきました。 今回はハンバーガーメニューだけではない、レスポンシブデザインでも使えて、変換ツール系でも利用できる、jQueryメニューをいくつかご紹介します。 【関連ページ】レスポンシブデザインのスマホサイトを使いやすいUIに jQueryでサイトに合ったナビゲーションメニューを作ろう レスポンシブデザインで使える簡単メニュー「Naver」 レスポンシブデザインのサイトで今もよく見る形の、画面幅が小さい場合にグローバルメニューを、ハンバーガーボタンのメニューの中に隠すjQueryです。 【関連ページ】レスポンシブデザインのスマホサイトを使いやすいUIに サンプルコードはこんな感じになります。 <nav> <a href="#">Home</a> <a href="#">News</a&
Facebookなどでサイトが共有された時、リッチ表示するOGPの設定
Facebookでシェアされたり、いいねを押すとニュースフィードにWebサイトやブログ記事が表示されます。サイトによっては画像が大きく表示されたり、概要がいい感じで思わずクリックして読んでみたくなるときってないでしょうか？ これは、ブログなどのサイトにOGP（Open Graph protocol）と呼ばれるMetadataが設定されていて、Facebookがそれを認識し表示してくれているからです。 当サイトでのOGPの実装は、WordPressのプラグインの「Open Graph Pro」を使用していましたが、プラグインが更新されていなく、古くなっていたので自分で実装しなおしました。その際にOGPについて調べたことをまとめます。 OGPとは何か？ OGP（Open Graph protocol）は、冒頭で少し述べたようにFacebookやmixiなどのSNSでシェアされたときに、そのペー
経歴や会社の沿革ページに！簡単なCSSで実装するタイムライン
2014年3月28日 CSS, Webサイト制作 ちょうど今作っているサイトで、経歴をタイムラインで表現するページがあったのでコードを紹介。コード自体はとってもシンプルなので、カスタマイズ次第でどんなデザインのサイトにもあわせられると思います。文章にするとゴチャゴチャしがちな経歴・沿革をスッキリと表示しましょう！ ↑私が10年以上利用している会計ソフト！ サンプル Chrome, Firefox, Safari, IE9・10で動作確認。 See the Pen Timeline by Mana (@manabox) on CodePen. モバイルファーストってことで、640px未満の幅のデバイスには年月・見出し・詳細文章を順に表示します。 モバイル版はこんな感じ。サンプルページの画面の幅を調整して比較してください。 HTML timeline というクラスのついたリストの中の li タ
2つの特定カテゴリに年別アーカイブを表示させたい
いつもお世話になっております。 進歩がなくて大変恐縮なのですが、以下、ご存知の方がいらっしゃいましたら、ご回答をいただけないでしょうか？何卒よろしくお願い申し上げます。 ——————– 2つの特定カテゴリの一覧ページ（category-52.php）と（category-53.php）に、そのカテゴリでの年別アーカイブのリスト（2009年│2008年│2007年│…）を表示したいと思っています。 もちろん、その「2007年」をクリックすると、そのカテゴリ内での2007年の投稿が一覧表示されるようにしたいのです。 「2007年」をクリックした先のURLは、当フォーラムでの過去の質問「特定のカテゴリーだけの月別アーカイブを表示させるには？」にあったようなデフォルトのURL（例： http://www.example.com/?cat=53&m=2007 ）になっても構いません。 ちなみに現在、
jquery小技まとめ３２
作成：2013/07/1 更新：2014/11/01 Web制作 > 先日ECサイトを制作したときに、動きのあるサイトにしないといけなかったので、色々調べて組み込んでみたんですが、jQueryでもう何でも出来ちゃいますね。近い将来ローカルで画像なんかを編集しなくても、ブラウザだけで色々できるようになるんじゃないでしょうか。今回は定番からちょっとマイナー（Google Analytics関係とか）なものまでjQueryの小技、プラグインを集めさせていただきました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ スクロール １．ページ内リンク／フッターまわり／トップに戻る ２．パララックス スライド ３．カルーセル ４．レスポンシブなスライダー ５．ヌルヌルサクサクなスライドメニュー ６．サムネイル付きクロスフェードスライドショー 補助 ７．Google Ana
CSSだけで簡単に吹き出しを作成する方法4つ！
こんにちは、橋本です。 今日はCSSだけでお手軽に吹き出しを作る方法をご紹介したいと思います。 今回ご紹介するサンプルは4つ 一般的な三角の吹き出し 一般的な三角の吹き出し（ボーダー付き） ぽわわーんとした吹き出し 丸い（曲線の）吹き出し 4つのサンプルの実行結果は、ここで確認できます。 IE9以上とIE以外のブラウザであればちゃんと表示されるかと思います。 IE8以下はborder-radiusが使用出来ないため、サンプル3とサンプル4がちゃんと表示されません。 それでは1つ1つ見て行きましょう。 1.一般的な三角の吹き出し まずはソースから。 <!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <style type="text/css"> * { box-sizing: border-box; } .wrapp
アイデア満載！レスポンシブ対応のナビゲーションを実装するチュートリアルのまとめ
デスクトップ、タブレット、スマートフォン、それぞれに適した表示にするナビゲーションを実装するチュートリアルを紹介します。 CSSで、JavaScript併用、jQueryのプラグインで簡単実装など、いろいろあります。
Facebook・Twitterなどソーシャルボタン設置方法まとめ │ Design Spice
twitter、facebook、google+1、evernote、tumblr、はてブ、mixiなど、各ソーシャルメディアやブックマークに共有するボタン設置方法をまとめてみました。 このブログはwordpressで構築しているのでプラグインを使用すれば簡単なのですが、他サイトなどにも使うことを想定した設置方法です。 備忘録エントリー。 twitter ツイートボタン facebook いいねボタン google+1ボタン evernote サイトメモリーボタン tumblr 共有ボタン はてなブックマーク mixiチェックボタン twitter ツイートボタン 1.コード取得 下記リンク先でツイートボタンのソースコードが取得できます。 Twitter / ツイートボタン ボタン ボタンの種類を選びます。 ツイート内テキスト ツイートに含まれるテキストを選択します。 ボタンが表示されるペ
シンタックスハイライトされたソースコードを手軽に実装できるWebサービス・syntaxhighlight.in - かちびと. net
'+b+"");top.consoleRef.document.close()}$(".snippet-container").each(function(b){$(this).find("a.snippet-text").click(function(){var d=$(this).parents(".snippet-wrap").find(".snippet-formatted");var c=$(this).parents(".snippet-wrap").find(".snippet-textonly");d.toggle();c.toggle();if(c.is(":visible")){$(this).html("html")}else{$(this).html("text")}return false});$(this).find("a.snippet-window").cl
iOS5でのUITextFieldやUITextViewでのキーボード処理の注意点と対策 - k2ダイアリー
iOS5でのUIKeyboardWillShowNotificationの挙動が変わっていて （まだ詳しく調べてないので、現状だけかもしれないですけど） 作り方によっては問題が発生してしまうという事があったので書いてみました。 UITextFieldやUITextViewでキーボードの表示・非表示時にViewの設置場所によっては キーボードに隠れてしまうケースがあります。 以下のように設置してTextFieldを選択するとキーボードが表示した際に隠れてしまいます。 こういった現象を回避するためにNSNotificationCenterのUIKeyboardWillShowNotificationで 通知処理を行いキーボードのサイズ分TextFieldやTextViewの位置を調整したりします。 例えば以下の場合は通知処理を受け取ってTextFieldの位置をキーボードで隠れてしまう分 上に
ソースコードを行番号付きで、きれいに表示する「SyntaxHighlighter」の導入と使い方
ソースコードをきれいに色分けしてくれる「SyntaxHighlighter」の導入と使い方です。 JavaScriptをサーバにアップロードする必要はありません。 JavaScriptが置いてあるリンク先を示すことで、簡単に導入できます。 実際に、このBloggerの「gogoToRoTAN」ブログに導入しました。 表示したソースコードの一部を強調させることも可能です。 「SyntaxHighlighter」は、エディタの色分けのように、きれいに表示してくれるスクリプトです。 対応コードは、以下のように、ほとんどのソースに対応しています。 ActionScript3 Bash shell ColdFusion C# C C++ CSS Delphi Pascal Diff Erlang Groovy JavaScript Jscript Java JavaFX Perl PHP Plain
CSSのfont-family：ヒラギノとＭＳ Ｐゴシックとメイリオの悩ましい関係 : webデザイナーのナナメガキ
CSSでのfont-familyの指定がとても悩ましい。文字コードによって表示が変わったりするし、イレギュラーケースまで想定すると煩雑なコードになってしまう。ちょっと整理しながら考えてみる。 まず、font-familyを何も指定しないと、だいたいのブラウザではデフォルトで設定されているフォントで表示されるのだが、文字コードがUTF-8だとWindowsのIE6で英数文字が「Times New Roman」になってしまう。※文字コードがShift_JISやEUC-JPの場合はデフォルトのフォントで表示される。 それでは例えば総称ファミリー名（generic-family）である「sans-serif」のみ指定してみると、WindowsのIE6では文字コードがShift_JIS・EUC-JPの場合は「Lucida Sans Unicode」で、UFT-8の場合は「Arial」で表示されてしま
Yoast Breadcrumbs - パンクズリスト
Yoast Breadcrumbsは、ページにパンクズリスト表示するプラグインで、 Breadcrumb Navigation XTと同様の機能です。 今まで、Breadcrumb Navigation XTを使ってきましたが、 ソースが簡素化しているので、Yoast Breadcrumbsに移行しました。 Yoast BreadcrumbsにXSS 脆弱性があることが分かりました。 詳細と解決策はこちらの方に詳しく記載されていますので、 使用前に一読してください。 使用にあたっては、自己責任でお願いいたします。 Yoast Breadcrumbsの設定画面の画像 Yoast Breadcrumbsのダウンロード WordPress.orgのプラグインサイトのYoast Breadcrumbsからダウンロードしてください。 Yoast Breadcrumbsの日本語版 Yoast Brea
ASCII.jp：もう配色には困らない！「Adobe Kuler」
「オリジナルのWebデザインをしたいけど、いまいち配色センスがなくて困る」「いつも好きな（得意な）色の組み合わせばかりでデザインしてしまう」「でも色彩理論を勉強するのは面倒だ」。 そんな人にぜひおすすめしたいのが、アドビ システムズが提供しているオンラインサービス「Adobe Kuler」（クーラー）だ。Kulerは、さまざまな色の組み合わせ（配色パターン、Kulerでは「テーマ」と呼ぶ）をWebブラウザー上で作成し、保存・公開もできる、ちょっと変わったサービス。いわば“みんなの力”で作られたカラーチャート集ともいえるもので、すでに7000種類以上（2009年1月現在）ものテーマが公開されている。利用料は無料だが、保存などの機能を使うにはAdobe IDが必要だ（以降の説明はログインしているものとして進める）。
foobar onthehead | Illustratorの数値
ティップスとかカスタマイズとかIllustratorでオブジェクトを移動させると、X軸とY軸が小数値になってしまうことがあります。 キッチリ数値にさせたい性分ですと、なにかと気持ち悪いです。 手っ取り早い解決方法としては、「表示」→「ピクセルプレビュー」にすることによって、マウスでグリグリ動かしても整数値になります。 ボクの場合、Illustratorのアンチエイリアス処理 との兼ねあいもありまして、方向キー入力時の移動距離を0.5pt にしているのですが、「ピクセルプレビュー」状態だと、1pt 単位でしか方向キーでの移動ができなくなってしまうので、普通の「プレビュー」の状態で作業しています。 そこで、「プレビュー」状態での、数値が少数になる現象を（ボクの判ってる範囲で）まとめてみました。 マウスでの移動/作成 表示倍率が 50% の場合、2pt単位で移動/作成が可能。結構使えます。 6
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IBM Developer
いーぴーせれくと - 単位変換/デジタル時計フォント/Illustrator/定規/EXILIM