レスポンシブなウェブデザインをする際に役立ちそうなこと（主にスマホ対応）のまとめ
レスポンシブにデザインしたサイトを作った際に役立ったこと（主にスマホ対応）を備忘録的にまとめてみます。いろんな方が同じような内容をまとめていますし、基本的なことも多いですがお役に立てばうれしいです。 メディアクエリの指定方法 小さいディスプレイから指定する場合と、大きいディスプレイから指定する場合があります。どちらにせよ、PC用、タブレット用、スマホ用と分けることが多いようです。まずは大きいディスプレイから指定する方法です。 /* デフォルト：1024px以上用（PC用）の記述 */ @media screen and (max-width: 1023px) { /* 1023px以下用（タブレット用）の記述 */ } @media screen and (max-width: 767px) { /* 767px以下用（タブレット／スマートフォン用）の記述 */ } @media scre
レスポンシブデザインに便利！今さらCSS3のbox-sizingについて話してみます
CSS3で追加したプロパティ「box-sizing」が結構便利です。皆さんブログで良さを紹介していますが、私なりに具体例を入れつつ解説してみますので、これを読んで「box-sizing」への理解が深まれば嬉しいです。 以前「初めてスマートフォン専用ページを作成する際に知っておきたいポイント｜Webpark」という記事を書いたときに、スマホ用サイトを作るときにbox-sizingが便利という内容を書きましたが、スマホ用だけでなくレスポンシブなサイトにも便利です。 box-sizingとは box-sizingの値には「content-box」「border-box」「inherit」があります。content-boxは初期値で、要素の大きさを、width、padding、borderで計算されます。 今回便利というのborder-boxを使った場合です。border-boxを指定すると、要素
CSSをプロパティごとで折り返さずに書くと意外とよかった
正月からWordPressでサイトを作っているのですが、そこでお世話になったテーマのCSSがプロパティごとで折り返していませんでした。見にくいなと思いつついじっていくうちに、折り返さない方がいいのではないかと思うようになってきました。 プロパティごとで折り返さないというのはこんな感じです。 p { margin: 0; padding: 10px 0 0; color: #222; font-size: 15px; line-height: 130%; } プロパティごとで折り返して書く場合はこんな感じです。 p { margin: 0; padding: 10px 0 0; color: #222; font-size: 15px; line-height: 130%; } この2つを比べると当然折り返す方が見やすいです。 では、なぜ折り返さない方がいいと感じるようになったかというと、パ
CSS3(transition)で円の中心を基準に拡大する丸いボタンが並んだメニュー
最近丸いデザインが流行っているらしいので、丸いボタンが並んだメニューを作ってみました。CSS3のtransitionでスムーズに拡大します。円の中心を基準に拡大するところが今回のポイントです。 そもそもこいうのはメニューと呼ばないのかな。検索エンジンのことを考えると色々キーワードを入れたいけど、入れすぎると何をいっているのか分からなくなる。ほんとタイトルって難しい。。 ということで、今回もサンプルを用意していますのでこちら見ていただければと思います。 ではHTMLから解説していきます。 HTML まずはHTMLから。リンク先のURLは省略しています。 <div id="box"> <div class="boxin"> <a href="#" id="circle1">CSS</a> </div> <div class="boxin"> <a href="#" id="circle2">C
CSS3も少し入れつつ自分流CSSプロパティの書き順を決めてみた
どの段階にあるかはCSS current work & how to participateで確認できます。 また、list-style、backgroundなどのように略せるものは略して書くようにしていますが、略さない場合も下に載せています。略し方については「まとめて書くことができるCSSプロパティの8つのパターン｜Webpark」をご参考に。 若干それましたが、試行錯誤して並べた結果がこちらです。普段よく使うプロパティのみ載せています。 表示に関するプロパティ まずは表示に関する内容です。見える見えないは一番大切なことということでしょうか。 display list-style list-style-type list-style-image list-style-position overflow clip visibility opacity 配置に関するプロパティ 次はどこに配置
jQueryとCSS3を使ったアコーディオンメニューを詳しく説明します｜Webpark
jQueryとCSS3を使ったアコーディオンメニューを作ってみましたので、作り方を紹介します。かなり長くなりますが、お役に立てばうれしいです。 色々事情があってIEでご覧になっている方のためにスクリーンショットも載せておきます。カテゴリー３にマウスを乗せているところです。 それではコードを解説していきます。 HTML まずはHTMLです。無駄に長いですが一応載せます。 <ul id="accordion"> <li><a href="#">カテゴリー１<span class="arrow rotate"></span></a> <ul id="active"> <li><a href="#">サブカテゴリー１</a></li> <li><a href="#">サブカテゴリー２</a></li> <li><a href="#">サブカテゴリー３</a></li> </ul> </li> <l
2012年によく読まれた記事や様々なランキング
皆さん、明けましておめでとうございます。 2013年最初の記事は2012年に人気があった記事などを紹介してみます。この手の記事は年末に書く方が多いようですが、2012年の結果は2013年にならないと分からないということで新年の記事になりました。 今年書いた記事のアクセスランキング ということでまずはこちら。 1. 配色、デザイン、文章、写真、センスがないとあきらめる前に勉強しよう！ はてなブックマークのトップページに2日ほど掲載されたこともありかなりのアクセスがありました。結局はまとめ記事なのですがタイトルに共感された方が多かったようです。 2. スマートフォンサイト作成の参考になるギャラリーサイトのまとめ 個人的に作る機会があったので、勉強しながらこちらの記事も書いてみました。勉強しながらということでかなり時間がかかりました。 3. ページタブアプリ(iframe)の作成とFaceboo
カラーツール「0to255」で色を決めてメニューを作ってみる
このブログで何回か紹介している0to255というオンラインツールですが、かなり便利だと思うので使い方を説明してみます。 色に関する知識が乏しい私ですが、0to255を使うとまとまった感じの配色になるので重宝しています。今回は0to255を使ってメニューを作る際の色選びをしてみます。 0to255の使い方 まず、0to255の使い方についてですが、下の画像のように「PICK A COLOR」をクリックしてカラーコードを入力します。 今回は「#ff7400」を指定してみます。 すると、指定した色より明るい色と暗い色がグラデーションになってたくさん表示されます。近い色がたくさん表示されますので、これらをうまく使うとまとまった感じのメニューが作れます。 メニューの配色を決める ということで、以下のような配色でメニューを作ってみます。 メニュー背景のグラデーションと境界線の1pxラインに使う色を選ん
意外に簡単！CSS3を使ったシンプルな横メニューの作り方
CSS3をいくつか使ったシンプル横メニューの作り方を順番に説明してみます。特に目新しいものではないですが、CSS3をこれから勉強する人や使い方が分からないという人のお役に立てばと思います。 以前に「細部にこだわってみた！CSS3を使った美しい横メニューの作り方」というのを書きましたが、こちらの方が難しいと思います。 例によってCSS3はブラウザによって対応状況が違い、IE8以下だと今回紹介するCSS3プロパティに対応していません。他の主要ブラウザはよほど古いバージョンでない限り問題ないと思います。 ここら辺のCSS3の基礎について勉強したい方は「CSS3について知っておきたいことのまとめ」をご覧ください。 HTMLはこんな感じです。Internet Explorerだけ文字数の関係でIEと略させていただきました。 <ul id="menu"> <li><a href="#">IE</a><
Webデザインの配色について学ぶときに読んでおきたい14の記事
このブログをみてお分かりのように、私は思い切った色使いがなかなかできません。どうせセンスがないしと諦めても仕方ないし、恐らくセンスがないのではなく勉強していないだけですし、言い訳はせず勉強することにしました。 ということでWebデザインの配色について学べる記事を集めてみました。 基礎的なものから並べてみましたので、順番に読んでいけば色についての知識は深まると思います。「センスがない」という言い訳をして、実は勉強していなかっただけだということに気付く人もいるかも。 色彩センスのいらない配色講座 基本から分かりやすくまとめられているスライドです。サブタイトルの「色は理論的に説明できる」っていうのがなんかかっこいい。 絶対に覚えておきたいwebデザインの配色・カラー3つの基本と基礎 | 秋田県webデザイナー【weblog】 基本的な内容を親切に分かりやすく説明してくれていますので、これから勉強
CSS3を使って美しく装飾されたテーブルの作り方
CSS3をたくさん使ってきれいなテーブルを作ってみましたので紹介します。特にセレクタの勉強になると思いますので、ぜひ参考にしてみてください。 まずはHTMLから。無駄に長いので3位から9位は省略しています。 <table> <tbody> <tr> <th>順位</th> <th>国</th> <th>2010年推計人口</th> </tr> <tr> <td>1</td> <td>中華人民共和国</td> <td>1,341,335,152</td> </tr> <tr> <td>2</td> <td>インド</td> <td>1,224,514,327</td> </tr> <tr> <td>10</td> <td>日本</td> <td>126,535,920</td> </tr> </tbody> </table> 続いてCSSです。とりあえず全部載せて、後で個別に説明します。 t
Media Queriesを使ったレスポンシブなサイトのまとめ
Media Queriesを使ったレスポンシブなサイトを個人的な好みで集めてみました。今回は変化のパターンが多くて、最終的にスマートフォンでもうまく見られそうなサイトを中心に集めています。 Media Queriesを使っているサイトは、Webフォントなど他にも新しい技術がたくさん使われており見ているだけで楽しいですね。 CSS-Tricks Smashing Magazine Where's My Sofa? | I ordered it. I paid for it. I'm still waiting for it. Breaking news, latest news, and current events - breakingnews.com London & Partners - The Official Promotional Organisation for London
CSS3 IE対策まとめ
CSS3を使うにあたっていつも問題になるのが Internet Explorer（IE）です。CSS3への対応が遅い上に、旧バージョンを使い続けているユーザーも結構いますので、CSS3を使うことに躊躇する人も多いのではないでしょうか？ ということでCSS3を使うにあたって知っておきたいIE対策を紹介します。 1. CSS3の対応状況を確認する まず、IEのバージョンごとでCSS3にどこまで対応しているか知っておく必要があります。個人的によく使っているのはこのサイトです。 CSS3 & HTML5 Browser Support CSS3で追加されたプロパティ、セレクタについてブラウザごとの対応状況が分かりやすく表示されています。 2. CSS3セレクタに対応する セレクタはSelectivizr.jsだけあれば簡単に対応できます。「CSSセレクタって何？」「CSS3セレクタってどういうもの
CSS3の勉強になるかも！？画像を使わないボタンの作成手順
CSS3を使うと画像のようなボタンも簡単に作れます。よくあるタイプのボタンですが、できあがりのコードだけだと勉強にならないので、作り方を順番に紹介していきます。 今回、ChomeとFirefoxで動作確認しています。IEだとグラデーションが使えないので、同じボタンがたくさんあるように見えます。スマホサイト用なんかだと十分実用的だと思います。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブサイト作成の勉強になった日本語スライドのまとめ
まとめて書くことができるCSSプロパティの8つのパターン