リンクの反応範囲の拡張 リンクをボタンスイッチのように表示させることができます 普通は文字があるところしかリンクが反応しません。 （カーソルを枠内に移動させてみてください。何も反応しないはずです。） 〔例〕
リンク反応範囲の拡張
リンクの反応範囲の拡張 リンクをボタンスイッチのように表示させることができます 普通は文字があるところしかリンクが反応しません。 （カーソルを枠内に移動させてみてください。何も反応しないはずです。） 〔例〕
input要素を選択した時に表示される青色の枠線を消す方法【Googleクローム】
つい先日、コンバージョン改善の取り組みの一環として、フォームボタンの修正を行いました。 その際、困ったこと。 クロームで確認すると、青枠が表示される！！ 原因は、クロームのスタイルシートに「outline」が設定されている影響によるもの。 初期設定がそうなっているのだから、当然これまでも青枠は表示されていました。 でも、全然気にならなかったんですよね… なぜなら「ボタン」と「青枠」のサイズがイコールだったから。 ただ、今回は申し込みボタンにキャンペーン情報を追加しました。 ↓ クリックすると… めちゃくちゃ青枠が目立つッ！！！ ↓ボタンのソースコードはこんな感じ。 <!DOCTYPE html> <!--[if (gt IE 9)|!(IE)]><!--> <html lang="ja" class="no-js"> <!--<![endif]--> <head> <html lang="
セレクタの種類－CSSの基本
■セレクタの種類 スタイルを適用する対象を指定するセレクタ（selector）には以下のものがあります。 ブラウザの種類やバージョンによって対応していない場合があるので注意してください。 セレクタ一覧表 名前セレクタの書式スタイルを適用する対象使用例 要素型セレクタ
【HTML・CSS】フッターを常に画面の最下部（一番下）に表示する方法
この記事では、フッターを画面の最下部（一番下）に固定して表示する方法を紹介します。 「フッターが画面の最下部に表示できず、困っている」という方は、本記事で紹介している方法を試してみてください。 次の表示内容をご覧ください。このHTMLではコンテンツの量が少ないため、コンテンツとフッターとの間隔が詰まってしまっています。 この表示だと画面ごとのコンテンツの最低の高さが統一できず、レイアウトが�崩れて見える恐れがあります。 See the Pen フッターを最下部に固定して表示 – Part1 by aiiro (@aiiro29) on CodePen. 一方、次の表示ではコンテンツとフッターの間にスペースが確保され、フッターがウィンドウの最下部に固定されています。 See the Pen フッターを最下部に固定して表示 – Part2 by aiiro (@aiiro29) on Code
CSS には vw, vh, vmin, vmax という単位がある | DevelopersIO
例として以下の様な HTML 構造があったとします。 <body> <!-- 画像解像度: 100 x 100 (px)--> <img src="images/thumbnail.jpg" /> </body> img { display: inline-block; margin: auto; width: 10vw; } img の幅を 10vw と指定しています。基準となるビューポートの幅を vw で表すと 100vw となります。iPhone 5S のビューポート幅をピクセルで表すと 320px な訳ですが、10vw はその 1/10 ということで32px が img の幅となります。つまり 1vw は 1% と同じ長さになります。もちろんリキッドレイアウトにも対応した動きを持っています。 Demo - viewport lengthを開く（このサンプルはChromeブラウザでの
【初心者向け】CSSの擬似要素と擬似クラスを理解しよう！ | ビジネスとIT活用に役立つ情報（株式会社アーティス）
前回の記事【初心者向け】CSSセレクタとは？セレクタの種類や指定方法を解説！（基礎編）ではCSSセレクタの基本的な知識と指定方法をご紹介しました。 今回は、よりコーディングの幅が広がる「擬似要素」と「擬似クラス」に関して解説していきます。 擬似要素とは ～擬似要素の適用例～ 擬似要素とは、要素の一部に対してスタイルを適用できる指定方法です。 HTMLの要素を擬似的にCSSで設定するので、コーディングに手を加えることなく装飾を適用することができます。 例として、下図のように見出しの先頭一文字のみ文字の色を変える装飾を実装してみましょう。 擬似要素を使わない場合 擬似要素を使わずにこれを表現すると、HTMLとCSSの記述は下記のようになります。 見出し要素のh2の一文字目のみをspanタグで囲い、スタイルを適用しています。 この方法でも装飾は可能ですが、テキストをspanタグで無理やり区切って
【コピペ改変OK】CSSで作れる吹き出しデザイン8選
サイトのコンテンツはテキストだけだと単調になりがちですが、吹き出しがあると目を引きますし楽しくなりますよね。また、会話形式のコンテンツが吹き出しで作られていると親しみが湧くはずです。この吹き出し、画像は使わずにCSSだけで作ることができてしまいます。 この記事では吹き出しの作り方の説明から吹き出しのデザインサンプルも用意しました。コピペも改変もOKですのでご自由に使ってみてください。 まずは吹き出しの基本！三角部分の作り方 吹き出しから飛び出ている三角の部分はborderプロパティを使えば簡単に作れます。 以下のサンプルは上下左右に異なる色を指定したものです。三角が4つ集まっているように見えますね。 See the Pen border-color-test by Beco (@becolomochi) on CodePen. HTML [html] <div class=”box”></
z-index―スタイルシートリファレンス
z-indexプロパティは、ボックスの重なりの順序を指定する際に使用します。 z-indexプロパティは、positionプロパティでstatic以外の値が指定されている要素に適用されます。 ■値 整数値で指定 重なりの順序を整数で指定します。0を基準として、値が大きいものほど上になります。 auto 親要素と同じ階層になります。これが初期値です。 スタイルシート部分は外部ファイル（sample.css）に記述。 p.sample { color: #000000; background-color: #99cc00; position: relative; top: 50px; z-index: 2; } img.sample { position: relative; top: -50px; z-index: 1; } HTMLソース <html> <head> <link rel="
:last-of-type - CSS: カスケーディングスタイルシート | MDN
CSS チュートリアル CSS の基本 CSS の第一歩 CSS の第一歩の概要 CSS とは何か CSS 入門 CSS の全体像 CSS の働き 評価課題: 経歴ページのスタイル設定 CSS の構成要素 CSS の構成要素の概要 CSS セレクター Type, class, and ID selectors Attribute selectors Pseudo-classes and pseudo-elements Combinators カスケードと継承 Cascade layers ボックスモデル 背景と境界 書字方向の操作 内容のはみ出し CSS の値と単位 CSS における大きさの指定 画像、メディア、フォームの要素 表のスタイル付け CSS のデバッグ CSS の整理 評価課題: CSS の基本的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボック
input要素のスタイルを属性値で指定し分ける－ウェブ制作チュートリアル
今回は、「メールアドレス」入力欄と「お名前」入力欄の横幅を揃えようと思います。 入力欄の横幅を揃えるのが本当にスタイルとして良いかどうかはともかく、現在の表示領域に対して横幅70%で統一することにします。 入力欄のスタイルを指定するのですから、input要素にスタイル指定すれば良いように思います。 そこで、form.cssに以下の記述を追加してみましょう。 CSSソース（form.css） @charset "utf-8"; /*************************************** 入力フォーム ***************************************/ #form1 input, #form1 textarea { font-size:16px; /*フォントサイズ*/ border:1px solid #999999; /*ボーダー*/ p
:checked - CSS: カスケーディングスタイルシート | MDN
CSS チュートリアル CSS の基本 CSS の第一歩 CSS の第一歩の概要 CSS とは何か CSS 入門 CSS の全体像 CSS の働き 評価課題: 経歴ページのスタイル設定 CSS の構成要素 CSS の構成要素の概要 CSS セレクター Type, class, and ID selectors Attribute selectors Pseudo-classes and pseudo-elements Combinators カスケードと継承 Cascade layers ボックスモデル 背景と境界 書字方向の操作 内容のはみ出し CSS の値と単位 CSS における大きさの指定 画像、メディア、フォームの要素 表のスタイル付け CSS のデバッグ CSS の整理 評価課題: CSS の基本的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボック
隣接セレクタ－スタイルシートリファレンス
要素型セレクタ（タイプセレクタ） …… 特定の要素にスタイルを適用する 全称セレクタ（ユニバーサルセレクタ） …… すべての要素にスタイルを適用する classセレクタ（クラスセレクタ） …… 特定のclass名がつけられた要素にスタイルを適用する idセレクタ …… 特定のid名がつけられた要素にスタイルを適用する :link擬似クラス …… 未訪問のリンクにスタイルを適用する :visited擬似クラス …… 訪問済のリンクにスタイルを適用する :hover擬似クラス …… カーソルが乗っている要素にスタイルを適用する :active擬似クラス …… クリック中の要素にスタイルを適用する :focus擬似クラス …… フォーカスされた要素にスタイルを適用する :lang擬似クラス …… 特定の言語を指定された要素にスタイルを適用する :first-child擬似クラス …… 最初に現れ
【CSS】複数行でも3点リーダーをきかせる - Qiita
p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } まぁ普通に3点リーダーになりますよね。 複数行で3点リーダー Chrome・Safari でしか実装できませんが（今後はIEとかでも使えるようになる事を期待）下記のように書きます。 複数行での3点リーダー実装するために、 ”display: -webkit-box;” ”-webkit-box-orient: vertical;” 指定をします。 display属性を”box”とすることでフレキシブルボックス状態になり、 ”-webkit-line-clamp”で指定した行までを表示するようになります。 box-orientはそのフレキシブルボックスの並び方向を指定しverticalと指定する。 overflow: hidden;をスクロールバー対策と
W3Schools.com
W3Schools offers a wide range of services and products for beginners and professionals, helping millions of people everyday to learn and master new skills. Free Tutorials Enjoy our free tutorials like millions of other internet users since 1999
いつか役立つ！知っておくと便利なCSSセレクタ5選
CSSはその登場当初から現在に至るまでにさまざまな進化を遂げており、ひと昔であれば複雑なJavaScriptで書かないといけないような所作も、驚くほど簡単にできるようになりました。 とりわけCSSの進化が著しかったのはCSS3(CSS Level 3)が登場してからで、単純な挙動しかできなかったこれまでのCSSに、複雑な処理を実装できるようになりました。 それぞれセレクタやプロパティはCSS3に次ぐ次世代のCSSだと評されています。 そこで今回は、CSS Level 4で登場した、知っておくと便利なCSSセレクタをご紹介します。 知っておくと便利なCSSセレクタ5選 CSS Level 4には、例えばnth-childのようなよく知られているセレクタもたくさんありますが、それ以外にもユニークなセレクタが含まれています。 それらの中には新しい多くの便利な擬似セレクタもあり、覚えておいて損はあ
【css】どこまでselectをデフォルトの状態で装飾出来るか - Make note
納期に追われて時間が無かった為、久しぶりの投稿となります。 今回は、簡単なことでしたが、随分とハマってしまったselectの装飾をメモしたいと思います。 目的 「デフォルト状態」のデザインを弄らずに装飾を行いたい 先に結論から言うと、この「デフォルト状態」ってのミスリードを誘った原因です。こいつが厄介だったわけですね。 何を勘違いしてハマったかは今回のテーマにも関係していくので、順々に分かり易く伝えられたらと思います。 通常selectをレイアウトするには？ まず先に述べておきますが、通常デザインされていないselect（プルダウン）を用いることはあまりないと考えていいでしょう。 なのに何故デフォルトを装飾する必要があるのか？ それはデザイン資料が足りず、最低限のトンマナを揃えて表示しておく時など、特定の要望があった場合に限られると思います。 なので今回は特殊なケースとなりますが、覚えてお
CSS でクラス指定の無い要素にのみスタイルを適用する方法
CSS の小ネタです。 CSS で class 属性での指定が無い要素にのみスタイルを付ける方法についてです。 この方法はハックでも何でも無いのですが、個人的には目からウロコでした。 これを使うと、規模が大きめのサイトの CSS で起こりがちな「スタイルリセット地獄」を回避でき、 CSS のメンテナンス性を高めることができます。 やり方 CSS でクラス指定の無い要素にのみスタイルを適用したい場合は、セレクタに :not([class]) を使えば OK です。 メリット この方法のメリットを、サンプルを使いながら説明してみます（ CSS だと冗長なので、コードには SCSS を使用します）。 例として、リスト要素に次のようなスタイルを適用したい場合を考えましょう。 デフォルトのスタイル: 先頭のマークが赤色のドット。左マージンは小さめ。 item-list というクラスの付いたスタイル:
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5 & CSS3 リファレンス - checked属性 （チェックされた状態）
ColorSpace - CSS Gradient Color Generator
小林 I Webデザイナー on Twitter: "未入力の対処には『:empty』が便利。 空要素にスタイルが施せる。 WordPressでクライアントに投稿してもらう際に未入力になる事があるので、予め設定しておきます。 PHPの条件分岐で入力がないと親要素（dl）ごと非表示… https://t.co/QIODeJbTBQ"