visibility - 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
HTML 4.01とスタイルシート
はじめに World Wide Web Consortium（W3C）は1997年12月にHTML 4.0規格を策定しました。 これは1999年12月に多少改訂され HTML 4.01 となりました。 この新しいHTMLでは，文書の論理的枠組みを記述するというHTML本来の目的に添った部分だけを残し，見栄えを飾るための仕組みはスタイルシートという別の枠組みに移しました。 ここではHTML 4.01とスタイルシートの基本を解説します。 なお，この文書自体がHTML 4.01とスタイルシートを使って書かれています。 HTML 4.01では，たとえば次のように書きます。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" Content
【Firefox】右クリックメニューの「ページを端末へ送信」を消す方法 | ハルパス
「ページを端末へ送信」とは？ 「ページを端末へ送信（N）」は、Firefoxの右クリックメニューに表示されるコンテキストメニューの一種です。 閲覧ページ情報をスマートフォンなどに転送する機能で、Firefox同士かつFirefoxアカウントでログインしている場合に使用できます。 今回はこの「ページを端末へ送信（N）」を非表示にする方法のご紹介となります。 なお、リンクを右クリックした場合に表示される「リンクを端末へ送信（N）」も同様に非表示にします。 ※Firefox Quantumの仕様によりテーマ機能（userChrome.css）を使用しています。 ウィンドウ右上のメニューボタンをクリックし、「ヘルプ」を選択 「他のトラブルシューティング情報」をクリック プロファイルフォルダー右横の「フォルダーを開く」をクリック 「chrome」という名前のフォルダを作成 作成したchromeフォル
『リンク要素から離れた要素のhoverを実現する方法』
Remote Linking （別窓） このRemoteLinkingという手法では、リンク要素から離れた要素のhoverを実現することが出来ます。 デモは以下から。 Remote Link （別窓） リンク要素から離れた要素のhoverを実現と書きましたが、実際は要素同士は一つのaタグで囲まれています。 具体的には以下のような感じです。 <div class="people"> <a href="#toby" id="toby"> <span class="name">Toby Yong</span><br /> Toby Young joins the fifth season of Top Chef to lend his culinary expertise to the judges table. Young is a British journalist and the aut
【CSS】nth-child()で要素の指定 - 株式会社ネディア │ネットワークの明日を創る│群馬
CSSの小技 その7 今回は「nth-child()で要素の指定」です。 今までのデモページで使用していましたが、nth-child()について もう少し掘り下げていきたいと思います。 用途 テーブルやナビゲーションや横並びなどで、何番目かの要素に特定の装飾をしたいときに、 今までですとclassを加えて装飾していましたが、nth-child()を使うことで便利に、かつ綺麗なソースで構築する事が出来ます。 実装方法 今回は前回使ったナビゲーションで説明します。 ナビゲーションの順番によって要素の色を変更し、1番左の要素の横幅を半分にします。 ひとつ目の要素はfirst-childで指定することも出来ます。 CSSは下の方に記述しています。 HTML <nav> <ul> <li><a href="#">HOME<span>ホーム</span></a></li> <li><a href="#
「:hover」している要素以外にも「:hover」の効果を付けるCSSチュートリアル「Hover on “Everything But”」｜BLACKFLAG
CSSの指定で要素にマウスオーバーした際に色を変えたり、背景色を変えたり、 何かアクションを付けることに使用する「:hover」要素。 本来この指定はマウスオーバーしている要素のみに効果を利かすものですが マウスオーバーした要素の兄弟要素に対しても「:hover」の効果を付けることを可能とするチュートリアル 「Hover on “Everything But”」が使えそうだったのでメモ書きしておきます。 ≫Hover on “Everything But” | CSS-Tricks ≫デモはこちら：Hover on Everything But デモ画面ではマウスオーバーした際に それぞれ要素の透明度「opacity」の値を変化させています。 仕組みについては以下。 ◆HTML <section class="parent"> <div></div> <div></div> <div></
表(テーブル)の行の色を動的に変える - CSS小技集
CSSの小技として、表(テーブル)の行の色をマウスカーソルに合わせて動的に変える方法です。 表(テーブル)の行の色を動的に変えるには。 大きな表(テーブル)では、マウスカーソルに合わせて行の背景色を変えられるようにする事で、データを読み易くする事が出来ます。 この方法は簡単で、:hover擬似クラスを利用します。 意外に誤解されているようですが、:hover擬似クラスは<a>要素で無くても有効です。 尚、:hover擬似クラスを列に対して適用しようとして、<colgroup>要素や<col>要素に付けても効果はありません(列に効果が無い理由は後述します)。 この方法は、当然ながら、ネットスケープ 4.xでは不可能です。 テーブルの行の色を動的に変える実例。 実際のCSSでは以下のようになるでしょう。 ここでは、マウスカーソルが合わせられた際に、行を薄緑色で表示するようにします。 表(テーブ
マウス移動に合わせて表のセル/行/列に色を付ける
<table class="tableArea" id="makeImg" onclick="tableClick(event)" onmousemove=";mouseMove(event)" onmouseout="mouseOut(event)"> <tr><th>見出し1</th><th>見出し2</th><th>見出し3</th><th>見出し4</th></tr> <tr><td>データ11</td><td>データ12</td><td>データ13</td><td>データ14</td></tr> <tr><td>データ21</td><td>データ22</td><td>データ23</td><td>データ24</td></tr> <tr><td>データ31</td><td>データ32</td><td>データ33</td><td>データ34</td></tr> <tr><td>データ4
TweetDeckのカラム幅を調整するCSS - Qiita
TweetDeckは設定からカラム幅を3段階（「Wide」「Medium」「Narrow」）で調整できるが、 「Narrow」にしてもまだカラム幅が広いので、stylishとcssで調整してみた。
<style>－HTML5タグリファレンス
<style>タグは、スタイルシートを記述する際に使用します。 通常は<head>～</head>の中に配置しますが、 head要素内に記述することで文書単位でスタイルを指定することができます。 style要素のtype属性は、スタイリング言語（スタイルシートのMIMEタイプ）を指定します。 例えば、CSSの場合にはtype="text/css"となります。 type属性は必須属性ではなく、指定しない場合にはtype="text/css"がデフォルトで適用されます。 style要素のmedia属性は、どのメディアにどのスタイルを適用するかを指定します。 media属性でメディアの種類を指定することで、 例えば、パソコンのスクリーンで表示される場合のスタイル、プリンタで印刷される場合のスタイル、読み上げブラウザで再生される場合のスタイル などを指定し分けることができます。 W3Cの仕様で規定
スタイルシート［CSS］/CSSの基本/IDを使った指定 - TAG index
ID（固有の識別名）を使った指定では、1つの要素にだけスタイルを適用させることができます。 要素のIDは、id属性で指定することができます。 #example { color: red; } 上記の例では、example というIDが付けられた要素にだけ、このスタイルが適用されることになります。 1つのIDは、同じ文書内で1ヵ所にだけ使用できます。（重複させてはならない） 要素名に続けてID名を指定する方法と、ID名だけで指定する方法があります。どちらの場合も、ID名はハッシュ（ # ）に続けて記述します。 h1#example1 { color: red; } #example2 { color: blue; } example1 と example2 の部分がIDになります。 IDを付ける際には、以下の点に注意してください。 大文字と小文字の区別があります。 使用できる文字は、半角の英
拡張はセキュリティリスクなので、なるべく入れない方が良い (#3146931) | Webブラウザアドオン「Styish」、ユーザーデータの収集を始めて騒動に | スラド
「入れているアドオンの数が多いほど、ブラウザを使いこなしている上級者である」と考えている人もいるようですが、アドオンを入れれば入れるだけセキュリティリスクが高まったり重くなったり不安定になったりするので、ブラウザの標準機能でできることは標準機能でやった方が良いでしょう。 Firefox の場合、昔のバージョンでは標準であったような気がする chrome ディレクトリや userContent.css ファイルが無くなっていますが、自分で作ることで Firefox 最新版 (50.1.0) でも、拡張無しでユーザーCSSが適用可能です。 プロファイルディレクトリ "%AppData%\Mozilla\Firefox\Profiles\【ランダムな英数字】.default" を開く"chrome" というディレクトリを作成する"userContent.css" というファイルを作成する例えば、
ユーザーにスクロールを予測させるCSSの書き方について | mkasumi.com
受託案件でレスポンシブ対応をするようになって4年半ほど。未だに悩むのがテーブルのレスポンシブ対応。 テーブル要素をレスポンシブ対応する方法はいろいろとあると思うのですが、私がよく使うのはテーブルをスクロールさせる方法。ただ、このテーブルにはデザインの面で抱えている問題があります。それは、スクロールできることがユーザーには伝わらないこと。ぱっと見、途中でコンテンツが切れているように見えてしまう。もっとひどい場合にはthやtdの区切り線と同じタイミングで見切れてしまっていてその先にもっとコンテンツが存在することが予測できない可能性があります。 今回は続きのコンテンツの存在をグラデーションで表現し、CSSのみでスクロールを予測させる方法について記述しています。 実装方法 box-shadowやbackgroundプロパティでグラデーションを適用すればいいと思ってしまいがちですが、ただ単にこのプロ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「max-width: 100%」が指定されたimg要素を縦横比が維持された状態で縮小する方法 | CreativeStyle
[CSS]連番のIDやクラスをまとめて指定する書き方｜シラサヤ備忘館
http://www.okuni.me/entry/hatenablog-hard-to-read-cause
DESIRE 中森明菜 - 歌詞タイム
Table内のtdのdiv要素にheight:100%をきかせる - Qiita
https://www.xml.vc/property/table/auto2.html