CSS3のMedia Queriesでスマホ用のサイトを作るも解像度の高いAndroidではまったこと : kagzugiの備忘録
Media Queriesを使えばスタイルシートだけでスマホに対応できます。 （賛否両論あるようですが…） あちらこちらのサイトを参考に @media only screen and (max-width: 480px) {...} @media only screen and (max-width: 320px) {...} などと記述して、iPhoneで動作確認し、これはなかなかおもしろいなと思っていました。 ところが最後に確認した新しめのAndoroidで見ると、画面に収まらず右にはみ出ています。 もちろん手でタップとかピンチインすれば合わせられますが、やはり開いた時から 画面に合わせたい所です。 さんざん悩んで調べて分かったことは、 そのAndroidのピクセル数は、横720ピクセル、縦1280ピクセル。 サイトを見る時は横360ピクセルで動作している。 作ったサイトには<meta
IE8をレスポンシブ、HTML5やCSS3、rgba角丸に対応させる場合の注意点まとめ - 京都のお墨付き！
IEでHTML5やCSS3を使う場合、いくつか補助プログラムを読み込んだり、制作上の注意点があります。これは、きちんとHTML5やCSS3の仕様を身につけていないと「動作しない」などのトラブルに見舞われることがあります。 この記事では、「なぜ、そうする必要があるのか」をキチンと書いて、仕様・仕組みを理解した上で使いこなすことができるようになる事を目標に書きました。 IE8で、HTML5のSectionsタグを使えるようにする「html5shiv.js」 「Sectionsタグ」とは以下のタグです。これはHTML5で定義されていますが、IE8では使えないもの(HTML5で追加した分)があります。これを使えるようにするのが「html5shiv.js」です。 section (HTML5から追加) nav (HTML5から追加) article (HTML5から追加) aside (HTML5か
Compass CSS3PIE を動かす8個のステップ(border-radius編)-HTML5 CSS3 JavaScript – WEBYA.IN
sass/compass で css3pie をつかってみるよ STEP 01 compassの準備 compass create で compass の下準備。 $ mkdir YourDirName $ cd YourDirName $ compass create STEP 02 css3pieの準備 css3pieのインストール $ compass install compass/pie このコマンドで PIE.htcやらが生成される STEP 03 HTMLの準備 とりあえず適当なHTMLをこんな感じで用意。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Compass CSS3PIE Sample</title> <!--[if lt IE 9]><script src="http:/
擬似要素を使った見出しデザイン
このブログの見出しはシンプルなんですが、CSSの「:before」や「:after」など擬似要素を使えば色々と装飾ができますので今回は8つのサンプルを紹介します。 HTMLはすべてHタグだけです。特に意味はありませんが今回のサンプルはh4タグを使っています。 「:before」「:after」やボーダーで表現する三角形の使い方など慣れない方もいるかもれませんので、その都度簡単に解説していきます。「:before」「:after」疑似要素はIE7以下は非対応ですのでご注意ください。 今回のサンプルは別サーバにアップしていますのでご覧ください。 それでは今回8つのサンプルを紹介していきます。 1. 吹き出しのような見出し1 吹き出しの下の部分を:after擬似要素で作っています。三角形はボーダーで作っています。下の画像を見ると何となくイメージできるでしょうか。今回の場合は上の赤い部分のみ色を付
「Compass」、基礎から応用まで！ | 株式会社LIG
こんにちは、デザイナーの王です。 今回の記事ではCompass使いになるための必要最小限の知識から応用まで、体系的にひと通り紹介していきます。 全くの初心者でも問題ありません！ はじめに結論を言うと、CompassでCSSを書くと 早い！ 見やすい！ メンテしやすい！ コード量がぐっと減る！ 一度使い出したら最後、もう元には戻れない！ 一体どこまで便利なのかずらずら書くよりも、百聞は一見にしかず！ 簡単なプロジェクトを通して、各特徴について紹介した短いデモ動画を用意したので、まずはこちらを見てください！ Compassとは？ Compassを語る前に、まずは「Sass」を知っておく必要があります。なぜなら、CompassはSassを元に開発したフレームワークだからです。 Sassとは では「Sass」とは何かと言うと、正式名称は「Syntactically Awesome Style Sh
How To Enable HTML5 In Chrome | Robots.net
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
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セレクタってどういうもの
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
葡京官网_葡京在线官网_欢迎您光临！！
"葡京官网"官方微信 最热的新闻 最火的话题 最多的资讯 最high的互动 最劲的福利 "湘湖社区"官方微信 萧山人的生活分享社区 有吃有玩有八卦 "萧网购"官方微信 萧网购，一个制造爆款的电商平台 "萧山政协"官方微信 萧山政协是由杭州市葡京官网政协办公室主办的门户网站����������,是传播政协知识、交流政协工作、倾听民情呼声、扩大监督渠道的网络信息平台 "青商会"官方微信 "靖江清风"官方微信 这里是葡京官网靖江街道纪工委官方公众号，解读政策，剖析案例，弘扬清风正气。 "萧山人大"官方微信 致力于构建区人大常委会及其机关与镇街人大、广大人大代表、人民群众之间的移动互联桥梁。主要功能包括人大要闻、交流互动、代表活动 "党工会"官方微信 "萧山党湾"官方微信 沙地风情，葡京在线官网党湾。它是中国建筑名镇、杭州市小康乡镇、工业经济重点镇、葡京官网文明镇……这里是葡京官网党湾镇人民政府官
HTML5&CSS3入門 with HTML5 パック 第2回 HTML5文書へのCSS読み込みと、CSS3 : border-radiusの利用 | デベロッパーセンター
本連載では、Webデザイナーに向けて、HTML5／CSS3でWebデザインや制作手法はどう変わるのかを解説していきます。主なHTML5／CSS3の役割や機能を学んでいただくとともに、サンプル作成を通してコーディング手法を習得していただくことを目的としています。なお、サンプル作成のツールとして「HTML5 Pack for Dreamweaver CS5」を使用します（詳しくは、「HTML5 Pack for Dreamweaver CS5 の使い方」をご覧ください）。HTML5 パックをインストールするには、Dreamweaver CS5のアップデータ11.0.3を適用する必要があります。 ※HTML5とCSS3は現在策定中の仕様です。本連載は執筆時点の仕様内容にもとづいており、正式に勧告されるまでに変更されることもあり得ます。 前回HTML5を用いて作成した文書を、CSSを使って装飾して
HTML5&CSS3入門 with HTML5 パック 第6回 Graceful DegradationとPolyfill | デベロッパーセンター
本連載では、Webデザイナーに向けて、HTML5／CSS3でWebデザインや制作手法はどう変わるのかを解説していきます。主なHTML5／CSS3の役割や機能を学んでいただくとともに、サンプル作成を通してコーディング手法を習得していただくことを目的としています。なお、サンプル作成のツールとしてDreamweaver CS5以降を使用しています。CS5をお使いの場合は、拡張機能「HTML5 パック for Dreamweaver CS5」が必要です。CS5にHTML5 パックをインストールするには、Dreamweaver CS5のアップデータ11.0.3を適用する必要があります。CS5.5の場合、これらのHTML5 パックの機能はデフォルトで実装されています。 ※HTML5とCSS3は現在策定中の草案です。本連載は執筆時点の草案の内容にもとづいており、正式に勧告されるまでに変更されることもあり
HTML5&CSS3入門 with HTML5 パック 1回目 HTML5のベースと文章マークアップ | デベロッパーセンター
本連載では、Webデザイナーに向けて、HTML5／CSS3でWebデザインや制作手法はどう変わるのかを解説していきます。主な HTML5／CSS3の役割や機能を学んでいただくとともに、サンプル作成を通してコーディング手法を習得していただくことを目的としています。なお、サンプル作成のツールとして「HTML5 Pack for Dreamweaver CS5」を使用します（詳しくは、「HTML5 Pack for Dreamweaver CS5 の使い方」をご覧ください）。 ※HTML5とCSS3は現在策定中の仕様です。本連載は執筆時点の仕様内容にもとづいており、正式に勧告されるまでに変更されることもあり得ます。 さっそく、Dreamweaver CS5を用いて HTML5を用いてWebページを作ってみましょう。 HTML5文書を作成する Dreamweaver CS5では新規ファイルを作成
Dreamweaverと3つのビュー：HTML5時代の活用方法 | デベロッパーセンター
HTML5／CSS／JavaScript／SVGなど、現在のWeb開発者が扱う技術は多岐にわたります。Dreamweaverには「コードビュー」「デザインビュー」「ライブビュー」の3つのビューがあり、各ビューの特徴に合わせて活用することで、こうした技術を用いた開発をよりスムーズに行うことができるでしょう。本記事では、Dreamweaver CS5.5における3つのビューの活用方法を紹介します。 ※本記事は、2011年8月に開催されたイベント「ADC MEETUP ROUND 02 HTML5 Camp」にて筆者が行った講演をまとめたものです。 コードビュー コードビューはソースコードの編集を行うためのビューです。HTML5が主流となりつつある現在、開発者はコードビューをメインに使うことで、様々なWebページやWebアプリケーションなどの開発が可能となります。特にDreamweaver C
スマホサイト：Webアプリモードで意外と書かれていない落とし穴 - Kaleidoscope
ちょっと今回はまめ知識的な内容です。 最近、「iPhoneでWebアプリを作成」といった記事をよく見かけます。 （jQuery Mobileなどを利用した開発方法は置いといて） HTML5+CSS3+JavaScriptで一から作成する方法について、意外と肝心な注意点が抜けてるように思います。 とくに、よくmetaタグを使った「Webアプリモード（フルスクリーンモード）」にする方法が書かれていたりします。 <meta name="apple-mobile-web-app-capable" content="yes" /> これをやると、URLバーとかが無くなって、サイトがネイティブアプリっぽくなってかっこいいんですよね。 これで、サイトをアプリっぽく見せられる！ってちょっと興奮しちゃいますよね。 ただ、これって意外な落とし穴があるんです(￣▽￣;) 今回は、僕が知ってる大きな２つの注意点を
アドビ―Dreamweaverデベロッパーセンター
Enhance and extend DreamweaverDreamweaver provides its own API as well as the Common Extensibility Platform (CEP), and offers you the flexibility of using C++, HTML, CSS, and JS to build extensions for Dreamweaver. You can extend the Dreamweaver UI, add powerful features for building web apps and automate entire cross-application workflows. Build custom web development toolsImport database data in
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://vosegus.org/labs/CSS3/index.html