[css,html5] placeholder属性のテキストカラーを変更 - Qiita
/* 各ベンダープレフィックスが取れた標準版！！(http://caniuse.com/#search=placeholder-shown) */ :placeholder-shown { color: red; } /* Google Chrome, Safari, Opera 15+, Android, iOS */ ::-webkit-input-placeholder { color: red; } /* Firefox 18- */ :-moz-placeholder { color: red; opacity: 1; } /* Firefox 19+ */ ::-moz-placeholder { color: red; opacity: 1; } /* IE 10+ */ :-ms-input-placeholder { color: red; } ::-webkit-inp
![[css,html5] placeholder属性のテキストカラーを変更 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/25fba9d030dcc96d969890514ded69e5eb0165eb/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JTVCY3NzJTJDaHRtbDUlNUQlMjBwbGFjZWhvbGRlciVFNSVCMSU5RSVFNiU4MCVBNyVFMyU4MSVBRSVFMyU4MyU4NiVFMyU4MiVBRCVFMyU4MiVCOSVFMyU4MyU4OCVFMyU4MiVBQiVFMyU4MyVBOSVFMyU4MyVCQyVFMyU4MiU5MiVFNSVBNCU4OSVFNiU5QiVCNCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1jbGlwPWVsbGlwc2lzJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9NDQwNWViYmExN2I0ZGFkN2E3ODNiYmZhYTBmNzMxYjU%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwdG1pYW1lJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz04ZjNiZWQyNTQ2ZTdiMTZmNGFlNzc3ODA3MDhiMzBhMg%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3Dcfd6479d647ab6d0a17b7b52c4c901a7)
<ruby>－HTML5タグリファレンス
<ruby>・<rt>・<rp>は ルビをふる際に使用します。 <rt>はRuby Textの略でルビのテキストを、 <rp>はRuby Parenthesesの略でルビのテキストを囲む括弧等の記号を、それぞれ指定します。 <rt>と<rp>は、<ruby>～</ruby>の中で子要素として使用します。 <rp>～</rp>の内容は、<ruby>タグに対応したブラウザでは無視されます。 <ruby>タグに対応していないブラウザでは、 漢(かん)字(じ) のように表示されます。 ■HTML4.01からHTML5へのバージョンアップによる変更点 <ruby>・<rt>・<rp>は、すでにInternet Explorer5以降で先行採用されていますが、HTML5では標準仕様となります。 ただし、Ruby Baseの略でルビをふる対象となる文字本体を示す<rb>は採用されない予定です。 HTML
かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技
2015年3月18日 CSS 2011年に「少しのコードで実装可能な20のjQuery小技集」という記事で数々の便利な制作技を紹介したのですが、時は流れ、今ではCSSのみで表現できるものが多くなってきました。という事で今回はその記事内で紹介した技を中心に、かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる小技を紹介します。 ↑私が10年以上利用している会計ソフト！ 目次 Div全体をクリックできるようにする テーブルの偶数・奇数の行の色を変える フォームにテキストを入れておき、フォーカスで消す（文字色も変更） ラジオボタンとチェックボックスを装飾する スライドパネル アコーディオン ツールチップ 言語によってスタイルを変更 横並びのdivの高さ揃える ボックスを上下左右中央に配置する それでは実際にどんな事ができるのか見てみましょう！サンプルも作ったのでコードと
<input placeholder>－HTML5タグリファレンス
<input>要素のplaceholder属性で指定した値が、入力欄に初期値として表示されます。 例えば、テキストフィールドに初期値として、 「検索するキーワードを入力してください」などのヒントを示してユーザーの操作を補助することができます。 ■属性
รูเล็ต ทดลองเล่นรูเล็ต เว็บพนันออนไลน์ อันดับ 1 เครดิตฟรีกดรับเอง
7 คาสิโนออนไลน์ ชั้นนำที่ดีเยี่ยมที่สุด Ichimaruni-design คาสิโนออนไลน์ ขอชี้แนะ 6 เว็บเดิมพันออนไลน์ชั้นหนึ่ง ที่มีครบทุกสิ่งที่มีความต้องการ ไม่ว่าจะเป็น คาสิโนออนไลน์ บาคาร่าออนไลน์ ไพ่โป๊กเกอร์ออนไลน์ พร้อมรับโปรโปรชันเครดิตฟรีที่แจกให้แบบจุใจ เว็บไซต์ตรงไม่ผ่าเอเย่นต์ เล่นง่าย ได้เครดิตฟรี ๆ ไปเลย UFABET เครดิตฟรี ไม่รับไม่ได้แล้ว กับโปรเด็ด โบนัสปัง UFABET เครดิตฟรี สิ่งดีๆที่พวกเรามีให้เฉพา
Viewport と Media Queries に関するメモ | Web Design Leaves
Viewport の指定 スマートフォンの多くは「Viewport」と呼ばれる仮想ウィンドウサイズが設定されていて、設定された Viewport サイズに Web ページを縮小して表示する。 Viewport ブラウザの表示領域のことで、デバイスごとに異なる。（デバイス幅や解像度とは別）「Viewport」にはブラウザの表示領域をピクセル単位（何px X 何px）での値が設定されている。 デバイスの解像度（device-width や device-height） デバイスの解像度は、デバイスピクセル比を持つスマートフォンなどではデバイスピクセル比から求められた解像度の値を指す。これは「デバイスの画面解像度 ÷ デバイスピクセル比」で求められる。 画面解像度が 320px X 480px、デバイスピクセル比「１」の iPhone 3GS では 320px X 480px。 画面解像度が 6
<small>－HTML5タグリファレンス
<small>タグは、免責・警告・法的規制・著作権・ライセンス要件などの注釈や細目を表す際に使用します。 その箇所が重要であるという意味や強調する役割、反対に重要性を弱める意味などはありません。 <small>はメインコンテンツではなく、あくまで注釈や細目などの短いテキストに使用する要素です。 <small>を複数の段落、複数のリスト、複数のセクションなどの長いテキストに対して使用するべきではありません。 例えば、利用規約がメインコンテンツとなるページで、全体を <small> ～ </small> で囲むような使い方は適切ではありません。 ■HTML4.01からHTML5へのバージョンアップによる変更点 small要素は、HTML4.01ではテキストを小さく表示する要素でした。 HTML5では注釈や細目を表す要素となり、これまでとは意味が変更されています。 ■使用例 HTMLソース <f
[HTML5]正しいfigure要素の使い方(文脈まで深く考えた)
figure要素には何を入れられるのか figure要素には何を入れられるか、どう使うべきなのかが疑問になったので考えてみました。 発端：リストにタイトルをつけたい このfigure要素について考えるきっかけになったのは、ブログ内で「タイトルの付いたリスト」を作りたいと思った時です。 別に見出し要素の直後にリストを置けば読み手にはそれについてのリストだと認識されるんでしょうけど…場合によってはなんかしっくりきません。 だって画像はfigureで囲めばfigcaptionで、inputにはlabelで、tableにはcaptionでマークアップ的にしっかり関連づいたキャプションがつけられるのに、リストや定義リスト、あとコードにキャプションがつけられないのは変ですよ、変だよなー。と思ってたわけです。 figure要素の説明を読んだ HTML5.JPを読みに行きましょう。すると figure 要
![[HTML5]正しいfigure要素の使い方(文脈まで深く考えた)](https://cdn-ak-scissors.b.st-hatena.com/image/square/a4edf0eaf5e8f4c77408f10ba236c93f8031449d/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2012%2F03%2Fhtml5-right-figure-01-150x150.png)
<figure>－HTML5タグリファレンス
<figure>タグは、図表であることを示す際に使用します。 ここで言う図表とは、文書の本文（メインフロー）から参照されるようなイラスト・図・写真・ソースコードなどのことです。 図表は本文から参照される内容ですが、本文に影響を与えることなく、ページの端・専用ページ・別表にして切り離すことができます。 必要ならば、図表にキャプションや注釈を付けても良いでしょう。 図表にキャプションを付ける場合には、<figcaption>タグを使用します。 ■HTML4.01からHTML5へのバージョンアップによる変更点 figure要素は、HTML5から新たに追加された要素です。 ■使用例 HTMLソース <p>カエルの生態に関しては、<a href="#kaeru">こちらの画像</a>でご確認いただけます。</p> <figure id="kaeru"> <img src="../images/kae
HTML5の新しいinputタイプと便利な属性 | DevelopersIO
HTML5 Formsとは HTML5では従来のinputタイプに加え、新たなinputタイプの追加やrequired、placeholder、autocomplete、validateなどが可能になりました。 現在HTML5 Formsの実装はブラウザによって異なります。 サンプル Type属性 <form method="post" action="#"> <ul> <li>電話番号：<input type="tel" name="tel" id="tel" required /></li> <li>検索：<input type="search" name="search" id="search" required /></li> <li>URL：<input type="url" name="url" id="url" required /></li> <li>メールアドレス：<in
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
もう逃げない。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を返す
IDとclassを使わないで、HTML5とCSS3でコーディングしてみた。
IDとclassを使わないで、HTML5とCSS3でコーディングしてみた。 2011-05-02 Webサイトをコーディングする時に、IDとclassを考えるのが面倒臭くなったので、IDとclassを使わないでコーディングしてみました。 シンプルなサイトなら簡単でつまらないので、IDとclassを使っても難しそうなデザインにしています。 今回もJavaScriptは一切、使用していません。 完成したサイト ID, classなしで組んだサイトを見る。 サイトでやってみたHTML5 HTML5では、html, head, bodyタグを完全に省略しても構わないとされています。 省略してもDOMツリー上に存在しているので、 body {background:#f00;} というCSSの記述も認識してくれました。 サイトで使用したCSS, CSS3の簡単なまとめ Child Selector 結
web.dev
Stay organized with collections Save and categorize content based on your preferences. Explore our growing collection of courses on key web design and development subjects. An industry expert has written each course, helped by members of the Chrome team. Follow the modules sequentially, or dip into the topics you most want to learn about.
[CSS]水平に配置したセクションを分けるスタイルのさまざまな素敵なテクニック
1ページに複数のセクションを水平に配置した際に、それらの区切りとなるさまざまなスタイルを紹介します。 縦長の1ページで構成されたプロモーションサイトやポートフォリオなどで見かけるものだけでなく、こんなこともできるのかとアイデアが素晴らしいものもたくさん！ デモページ 各デモと共にそのスタイルを紹介します。 まずはHTMLから。基本となるのは、2パターンです。 1つ目は、section要素にclassをつけるだけ。 <section class="ss-style-hogehoge"> コンテンツ </section> 2つ目は、svg要素を使用します。 <section> コンテンツ </section> <svg id="hoge"> SVGの中身 </svg> sctionだけの場合はclass、svgを使用するものはidになっています。 以下、各デモとそのスタイルです。 HTML/C
Google Web Designer - Home
Create engaging videos, images, and HTML5-based designs for your business that can run on any device Intended for business use only Features that help businesses bring ideas to life Google Web Designer gives you the power to create beautiful and compelling videos, images, and HTML5 ads. Use animation and interactive elements to build out your creative vision, then scale your content for different
WebページをRetina対応させるテクニック～基礎知識編
WebページをRetina対応させるテクニック～基礎知識編：jQuery×HTML5×CSS3を真面目に勉強（4）（1/2 ページ） iPhoneのRetinaディスプレイは、Webページの制作フローにも大きな変化をもたらした。WebページをRetina対応させるにはどうすればいいのだろうか。 はじめに 2010年6月に登場したアップルのiPhone 4には「Retinaディスプレイ」と呼ばれる、それまでの常識を覆した高精細なディスプレイが搭載されました。それ以降、スマートフォンやタブレットといったモバイル端末のディスプレイはより解像度の高いものへと進化していき、2013年の初めにはサムスン電子のGALAXY S4やソニーモバイルのXperia Zなど、フルHD画質対応（1920×1080ピクセル）のディスプレイを搭載したスマートフォンが登場するまでになりました。 高精細ディスプレイの登場
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
05step.com
HTML5 & CSS3 Tools and Tutorials
HTML5とCSS3の実用的なテクニックが丁寧に丁寧に解説されたウェブ制作に真剣に取り組みたい人にオススメの本 -HTML/CSS デザインの教科書