もう逃げない。HTMLのviewportをちゃんと理解する
<meta name="viewport" content="width=device-width,initial-scale=1"> と呪文のように書いてきたが、いい加減ちゃんと整理して理解しよう。 いろいろ調査した結果、以下の考え方で理解できると思う。 まず、実際の液晶の解像度は一旦忘れろ。 <meta name="viewport" content="width=480">と指定したとする。 するとそこに幅480pxの仮想的なウインドウが作られる。幅480pxの液晶モニターがあることをイメージして欲しい。これをviewportと呼ぶ。 ブラウザはviewportにレンダリングする。viewportの中では、あたかも本当に480pxのモニターを使っているかのような環境になっている。なので、JSのdocument.documentElement.clientWidthなんかも480を返す
HTML［a要素］電話発信用のリンクを設定する - TAG index
href属性の値には、tel: に続けて発信先の電話番号を指定します。（ハイフンは含めません） 次の例では、発信先として 0312345678 を指定しています。 href="tel:0312345678" 使用例 0312345678 という電話番号に発信する場合 <address> 連絡先：<a href="tel:0312345678">03-1234-5678</a> </address> 表示例 連絡先：03-1234-5678 上記の電話番号はダミーです。タップしないようお願いいたします。 PC向けのブラウザからは発信できません。
これがスマートフォン向けサイトを作るときの viewport 設定３パターンだ
スマートフォン向けの Web サイトを作るとき、viewport の設定次第で使い勝手が大幅に変わる。 最近はレスポンシブ Web デザインが流行してるけども、その大前提として viewport の設定パターンを抑えておくのは重要だろう。 この記事では、viewport の設定によって、見た目・使い勝手がどう変わるかを解説する。 パターン1: 何も考えずに HTML を書く まずは、viewport を指定せずに、単純な HTML をスマートフォンで表示してみる。 <!DOCTYPE html> <head> <meta charset="utf-8"> </head> <body> <img src="/images/logo-ja.png"> <p>色んな素材がごった煮になった様子をお椀で表現しています。 湯気が<strong>「てっく」</strong>に見えるのが隠し味になっていま
【CSS3】わずか2行の CSS3 でmarqueeを再現する方法。
先日、スマートフォン専用サイトの制作を依頼されまして、その際、marquee タグによるデザインを同時に打診されました。 しかしながら、HTML5ではmarqueeタグは非推奨。 今後は廃止予定のタグということで、別の方法を模索。 jQueryでの実装も考えましたが、CSS3を使ってより簡単にmarqueeを再現できるので、コチラを採用しました。 実際のコードは以下。 .marquee { overflow:-webkit-marquee; white-space:nowrap; } これだけでOK! とりあえず、Android 2.3以降のデフォルトブラウザ・iOS5以降Safariでは問題なく動作します。 他の端末や対応していないブラウザでの挙動が怪しいのが難点です。 細部までこだわるなら、動き方、動く範囲、動くスピード、繰り返す回数など、それぞれ任意に指定できます。 -webkit-
CSSで画面全体に対して天地中央に配置するテクニック(2) | 先端研究ブレイドLAB
CSSで天地センターに配置するテクニック第２回目です。今回は定番テクニックの問題点を解決する方法をご紹介します。 produced by Blades co.,ltd. 前回のエントリーで、CSSで画面全体に対して天地中央に配置するテクニック（1）として定番のテクニックをご紹介しました。今回は前回の手法の問題点を解決する別のテクニックをご紹介したいと思います。 定番テクニックの問題点のおさらい 定番のテクニックである「絶対配置+ネガティブマージン」にはコンテンツ表示上の大きな問題があります。それは、ブラウザの表示スペース（つまりbodyの大きさ）がコンテンツ表示領域（divなど）よりも狭い場合、コンテンツの全体が表示されないと いうことです。 これをわかりやすく説明するために、ブラウザで表示した例を見てみましょう。ソースは前回のエントリーでサンプルとして挙げたものを少し改変します。 HTM
lang属性 * HTMLリファレンス
<タグ lang="言語コード"> ほとんどの要素で指定できる。 その要素の言語コードを指定する。 きちんと指定することは検索エンジンや音声合成装置にとっていいらしい。 言語コードの形式 言語コードは、主コードと副コード群（省略可）からなり、大文字・小文字の区別はない。 以下の他、x （実験的コード。私用可？）などもある 例 ： x-klingon （クリンゴン語） 主な言語コード （主コード） en （英語） ja （日本語） zh （中国語） ko （韓国語） fr （フランス語） de （ドイツ語） it （イタリア語） nl （オランダ語） el （ギリシア語） es （スペイン語） pt （ポルトガル語） ar （アラビア語） he （ヘブライ語） ru （ロシア語） hi （ヒンディー語） ur （ウルドゥー語） sa （
reveal.js - The HTML Presentation Framework
Hello Therereveal.js enables you to create beautiful interactive slide decks using HTML. This presentation will show you examples of what it can do. Vertical SlidesSlides can be nested inside of each other. Use the Space key to navigate through all slides. Basement Level 1Nested slides are useful for adding additional detail underneath a high level horizontal slide. Basement Level 2That's it, time
GitHub - adobe/brackets: An open source code editor for the web, written in JavaScript, HTML and CSS.
⚠️ On September 1, 2021, Adobe will end support for Brackets. If you would like to continue using, maintaining, and improving Brackets, you may fork the project on GitHub. Through Adobe’s partnership with Microsoft, we encourage users to migrate to Visual Studio Code, Microsoft’s free code editor built on open source. Welcome to Brackets! Brackets is a modern open-source code editor for HTML, CSS
要素の重なりについて本気出して考えてみた（z-indexとか何とかとか） – No.1026
あなたはhtml/cssにおける要素の重なり方を知っていますか？ z-indexを指定しなければ先に書いたほうが下層で後に書けば上層に来る？ というわけで、実は割りと複雑な要素の重なりについて書きます。そこまで意識しなくとも支障がでることは滅多にないと思いますが、知っておいて損はないはずです。 ちなみに、昨今CSS3なるものが流行していますが、この記事はW3CのCSS2.1勧告（と付録）を元に書いています。 基本的な内容であり、目新しいことは特になにもありません。 スタックコンテキストとスタックレベル 用語と概念から。 ある意味、ここが一番よくわかりませんが、ここがわからないと何もわかりません。 スタックコンテキスト（スタッキング・コンテキスト） 簡単に言えばauto以外のz-indexと位置（static以外のposition）を指定した要素によって生成される階層構造を形成する固まりです
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Material Design
no003.info