AndroidでローカルHTMLのファイルを開く方法！AndroidでローカルHTMLのファイルを開く方法！AndroidでローカルHTMLのファイルを開く方法について解説します。AndroidでローカルHTMLのファイルを開くことで、スマホ画面ではどのようなレイアウトになっていて、レスポンシブは効いているのか確かめることができます。
【覚書】viewport指定について - 風柳メモ
モバイルデバイス用のviewport設定についてまじめに調べようとしたら、深みにはまりそうだったので、とりあえず整理を兼ねて覚え書きを残しておく。 ついでに、viewportの簡易的な表示テストができるページも作ってみた。 viewportとは？ viewport の指定方法 viewportの主要なパラメータ viewportを指定しないとどうなる？ device-width とは？ initial-scale とは？ viewport が影響する主な要素 CSS JavaScript viewport 設定テスト用ページについて 具体的な viewport 指定の例 "width=device-width, initial-scale=1" で、万全!? レスポンシブ対応がなされていない場合 レスポンシブ対応が不完全な場合 注意点・問題点など initial-scale について ブラ
最近のホームページの横幅は？世界基準に合わせてみよう
WEBデザイナーの皆様こんにちは。 今日はホームページの横幅について書きます。 みなさん、WEBサイトを設計するとき、横幅って何ピクセルぐらいにしていますか？ グリッドシステムを使って、960pxにしてる人は多いと思うのですが、もうグリッドっていう概念が、最近ありませんよね。 グリッドを使えば確かに楽、、、だけど、例えば、サイドバーをつけた２カラムにしたときの違和感は否めない、、、みたいな感じ。 ということで、私ももう、グリッドの観念は捨てるようにしています。 最近１カラムばっかりですしね。 最近のWEBサイトの横幅は？ 実は、最近のWEBサイトの傾向でいくと、横幅は1050px以上が圧倒的です。 それどころか、横幅という概念がないサイトも増えました。 こんな感じです。↓クリック 横幅の概念がない。これからはそういう時代です。 レスポンシブの考え方だとそうなりますよね。ブラウザサイズに自動
[CSS]レスポンシブ対応、サイドバーをアニメーションでスライド表示・非表示させるテクニック
レスポンシブ対応、アイコンをクリック・タップすると、サイドバーをアニメーションでスライド表示・非表示させるCSSのテクニックを紹介します。 スライドは単にそう見えるだけで、transformでサイドバーを変形させています。 滑らかなアニメーション、美しいグラデーション、スライドするにつれて透明度が変化するのも美しいですね。 サイドバーをアニメーションでスライドさせるデモ 実装 サイドバーをアニメーションでスライドさせるデモ 実際の動作は、デモでお楽しみください。 デスクトップサイズでも、スマホサイズでも期待通り。動作します。 ※CSS変数で実装されているため、IEでは動作しません。 実装 実装の仕組み アイコンはフォームのチェックボックスで実装されており、そのオン・オフをトグルにしてサイドバーを表示しています。 トグルの切り替え時のみJavaScriptが使用されており、それ以外はアニメー
![[CSS]レスポンシブ対応、サイドバーをアニメーションでスライド表示・非表示させるテクニック](https://cdn-ak-scissors.b.st-hatena.com/image/square/53964eacab91455a44fbd61cad063b621fb7c445/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201702%2F2017030805.jpg)
[CSS]超軽量で快適！スクリプト無しで実装されたレスポンシブ対応のナビゲーション -Luxbar
デスクトップ、タブレット、スマホに対応した、通常のスタティックなヘッダやスクロールしても常に上部・下部に固定表示されるバーとして配置できるナビゲーションを実装するスタイルシートを紹介します。 スクリプトは一切無し、アニメーションも快適な超軽量のスタイルシートです。
![[CSS]超軽量で快適！スクリプト無しで実装されたレスポンシブ対応のナビゲーション -Luxbar](https://cdn-ak-scissors.b.st-hatena.com/image/square/ac45d35aaf5f1c4fa8e28270b3156a50754ca6ce/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201701%2F2017022201.png)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
