画像を拡大全画面表示するのに、まだLightBoxとか言ってんの？ - それマグで！
フルスクリーン・モード使えよ。楽だぞ 昨今のブラウザにはフルスクリーンモードが搭載されていて、それを使うと、コピペレベルで画像を拡大表示が出来る 画像をフルスクリーンにお手軽に作るHTMLの例 <div id='img01' onclick="this.webkitRequestFullScreen();" > <img src='http://cdn-ak.f.st-hatena.com/images/fotolife/t/takuya_1st/20141129/20141129034938.jpg' /> </div> <button onclick="img01.webkitRequestFullScreen();">フルスクリーンで表示</button> #img01:-webkit-full-screen { width: 80%; background-color: rgba(
CSS(スタイルシート)の基本、小技、テクニック総まとめ
CSSの基本や使える小技テクニックなどを幅広くまとめました。以前書いて今もそこそこアクセスがある「CSSの知識をもっと深める30+2の小技テクニック集｜Webpark」という記事があるのですが、2年近く前の記事ですしパワーアップさせて作り直しました。 恐らく過去最長の記事ですので目次を作りました。クリックするとするりと移動します。基本的な内容が多いですが、お役に立つ項目があればうれしいです。 ということで順番に説明していきます。 1. 全般的なこと 1-1. CSSリセット ブラウザごとでデフォルトのスタイルは異なっています。その違いをそのままにしておくと、後でブラウザ間の表示の違いに悩むことになり、どこが原因か分からないとイライラしてしまいます。 そんなことのないように、いったんデフォルトのスタイルをリセットしてしまおうというのがリセットCSSです。 方法は色々ありますが、個人的には一番
CSS3だけで作るレスポンシブデザイン対応ナビゲーションバーの作り方
こんにちは、鴨田です。 最近はRetina対応のMac Book Proが出たり、特にスマートフォンに限らず、解像度の高いディスプレイが多くなってきました。そうなると、画像でいろいろな素材を作るということに関して限界が出てきます。 なので、最近はCSSだけでナビゲーションバーのデザインやコーディングを行うことが多いとは思いますが、知ってる人も知らない人もちょっとしたナビゲーションバーを作ってみましょう。 作るのは、横幅は特に設定しないレスポンシブデザインにも対応できるリキッドな6つの項目を持ったナビゲーションバーとします。ただし、スマートフォンを意識して、外側に320pxのラッパーを配置しておきます。 注意事項として、FirefoxとWebkit系ブラウザ(Google Chrome、Safariなど)でしかベンダープレフィックスをつけていないので、それ以外のブラウザで見ると、崩れます。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
スマートフォン対応、気をつけたいトラブル
http://html5please.us/
