タグ

関連タグで絞り込む (106)

タグの絞り込みを解除

CSSに関するiwwのブックマーク (422)

  • ヘッダ固定テーブルをCSSで実装してはいけない - atsukanrockのブログ


    はじめに 企業向けシステムでは、ヘッダ固定テーブルの実装を要求されることがある。ヘッダ固定テーブルとは、 テーブル︵<table>タグ︶である テーブルの横に、テーブル部分のみのスクロールバーが表示される テーブル部分のみのスクロールバーでスクロールしても、テーブルのヘッダ行はスクロールしない といった特徴を持つもので、いわばExcelの﹇ウィンドウ枠の固定﹈機能のWebアプリ版だ。 CSSで実装するには Pushpin Headerと呼ばれるテクニックがある。positionプロパティを巧みに使った華麗なテクニックだ。ちなみに私は、このテクニックを初めて見たときは理解できなかった。positionプロパティについての正確な知識がないと、理解は難しい。 Pushpin Headerテクニックの問題点 上記リンク先のページをSafari*1で表示すると、ヘッダとボディの間にスペースが空いてし
    ヘッダ固定テーブルをCSSで実装してはいけない - atsukanrockのブログ
    iww
    iww 2018/08/09
    リンク

  • user-select - 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 の基本的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボック

    user-select - CSS: カスケーディングスタイルシート | MDN
    iww
    iww 2018/07/25
    リンク

  • vertical-align－スタイルシートリファレンス

    vertical-alignプロパティは、行のなかでのテキストや画像などの縦方向の揃え位置を指定する際に使用します。 vertical-alignプロパティを適用できるのは、インライン要素とテーブルセルです。ブロックレベル要素には適用できません。 ■値 baseline 適用した要素のベースラインを親要素のベースラインに揃える（初期値） top 上端揃え middle 中央揃え bottom 下端揃え text-top テキストの上端揃え（テーブルセルへの指定は無効） text-bottom テキストの下端揃え（テーブルセルへの指定は無効） super 上付き文字（テーブルセルへの指定は無効） sub 下付き文字（テーブルセルへの指定は無効） パーセント（%） その要素のline-heightプロパティの値に対する割合を%で指定（ベースラインが揃った状態を0として、正の値なら上、負の値なら

  • HTML Global title Attribute

  • 行間の調節 CSS line-height:


    文章の行間を調節する。長い文章が多い場合、行間が詰まっていると読みにくくなる。そんな場合は、このプロパティで行間の調節をする。 オマケ︶文字サイズ・行間　確認ツール 行間を調節するプロパティ　line-height: line-height: 行間の値︵正確には、フォントサイズと上下の余白合計値︶ ページ全体の行間を変える。 body { line-height: 文字サイズの値 } 段落<p></p>要素の行間を変える。 p { line-height: 行間の値 } 行間の値の単位
    iww
    iww 2018/07/13
    行間というよりは1行の高さの指定なので、行間をなくしたいときは line-height: 1em; とする
    リンク

  • 空のセルの枠線の表示・非表示を設定する

  • Comparing CSS Resets

    iww
    iww 2018/07/10
    Reboot.cssのデモ
    リンク

  • scrollbar-base-color－スタイルシートリファレンス


    scrollbar-base-colorプロパティは、Internet Explorerが独自に追加したプロパティで、 スクロールバーのベースの色を指定します。 スクロールバーの色指定は、 IE5.5では<BODY>タグへの指定で有効となりますが、 IE6以降では<!DOCTYPE>宣言でブラウザの表示モードが﹁標準モード﹂となった場合、 <BODY>タグのみへの指定では無効となることがあります。 IE5.5とIE6以降の両方でスクロールバーの色指定を有効にするには、 <HTML>と <BODY>の両方に指定します。 また、Operaでは、ブラウザの表示モードが﹁互換モード﹂のときに <BODY>に指定すると有効となります。 尚、Netscape Navigator等のスクロールバーの色指定に対応していないブラウザでは無視されるので注意してください。 スクロールバーの色指定の比較︵別ウィン
    iww
    iww 2018/07/09
    スクロールバーの幅を考慮しないといけないとき出したり引っ込めたりで計算するのが面倒なので出しっぱなしにしたいけど見た目がダサいのもなんとかしたいとき、背景色と同じ色にして人間の目だけをごまかした。
    リンク

  • スタイルシート［CSS］/ボックス/ボックスからはみ出た部分の表示方法を指定する - TAG index


    visible Firefoxでは領域をはみ出して表示しますが、IEとOperaでは領域を広げて表示してしまいます。ただし、表示モードが標準モードの場合には、IE︵7以上︶とOperaでも領域をはみ出して表示します。︵領域をはみ出して表示するのが正しい解釈となります︶ hidden 上記の全てのブラウザで同じように表示されます。︵はみ出た部分を表示しません︶ scroll 上記の全てのブラウザで同じように表示されます。︵縦横のスクロールバーが表示されます︶ auto 上記の全てのブラウザで同じように表示されます。︵縦のスクロールバーだけが表示されます︶ 使用例 <!DOCTYPE HTMLPUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head>
    スタイルシート［CSS］/ボックス/ボックスからはみ出た部分の表示方法を指定する - TAG index
    iww
    iww 2018/07/09
    リンク

  • E:nth-last-child(n)－CSS3リファレンス

    要素型セレクタ（タイプセレクタ） …… 特定の要素にスタイルを適用する 全称セレクタ（ユニバーサルセレクタ） …… すべての要素にスタイルを適用する classセレクタ（クラスセレクタ） …… 特定のclass名がつけられた要素にスタイルを適用する idセレクタ …… 特定のid名がつけられた要素にスタイルを適用する :link擬似クラス …… 未訪問のリンクにスタイルを適用する :visited擬似クラス …… 訪問済のリンクにスタイルを適用する :hover擬似クラス …… カーソルが乗っている要素にスタイルを適用する :active擬似クラス …… クリック中の要素にスタイルを適用する :focus擬似クラス …… フォーカスされた要素にスタイルを適用する :lang擬似クラス …… 特定の言語を指定された要素にスタイルを適用する :first-child擬似クラス …… 最初に現れ

    iww
    iww 2018/07/06
    頭の方に結合セルがあって数えられないときは、ケツから数える。 やったぜ
    リンク

  • table カラムの colspan と nth-child の相性問題

    主に C#.NET と VB.NET の違いについて、メモを残していきます。 誤り等があれば、コメントから知らせていただけるとありがたいです。 ※載せているソースについて検証はしていますが、無保証です。 この記事のテーブルレイアウトで苦労したのでメモ。 例えば、列数 ＞ 2 のテーブルの先頭 2 列を色指定したい場合、nth-child を使うと簡単にできる。 [CSS] /* td と th の先頭 2 列を指定 */ td:nth-child(-n+2), th:nth-child(-n+2) { background-color: purple; } しかし、先頭 2 列に colspan=2 が含まれる場合・・・ [HTML] <table> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td colspan=2>1-2</td

    iww
    iww 2018/07/06
    逃げ道がなかった
    リンク

  • font-family: monospace;だと文字が小さくなる - しらいとブログ


    ChromeやSafariなどWebkit系のブラウザでは可変幅フォントと等幅フォント︵monospace︶のデフォルトのフォントサイズが違います。インストール時の初期設定では可変幅フォントが16px、等幅フォントが13pxになっており、等幅フォントのサイズはユーザーが簡単には変えられないようになっています。そのためfont-sizeを%指定やem指定している場合、Webkit系のブラウザだけ等幅フォントが小さく表示されてしまいます。ちなみに、Firefox系では初期設定はどちらも16pxになっていますが、ユーザーが別々に変えることが出来るので同じとは限りません。 等幅フォントも可変幅フォントと同じサイズで表示したい時は次のように指定します。 font-family: monospace, serif; これはmonospaceフォントで表示できない文字はserifフォントで表示するという
    font-family: monospace;だと文字が小さくなる - しらいとブログ
    iww
    iww 2018/06/27
    覚えておこう
    リンク

  • 何番目系の便利なCSSまとめ - Qiita

    最初 :first-child 最初の要素（親要素から見て、子要素すべての最初） デモ :first-of-type ある要素の最初（親要素から見て、ある子要素の最初） デモ 最後 :last-child 最後の要素（親要素から見て、子要素すべての最後） デモ :last-of-type ある要素の最後（親要素から見て、ある子要素の最後） デモ 1個だけ :only-child 1個だけ子要素がある（親要素から見て、子要素が1個だけある） デモ :only-of-type 1個だけある子要素がある（親要素から見て、ある子要素が1個だけある） デモ X番目 :nth-child(X) X番目 デモ：５番目 :nth-of-type(X) ある要素のX番目 デモ：５番目 :nth-child(Xn) Xの倍数 デモ：2の倍数 :nth-of-type(Xn) ある要素のXの倍数 デモ：2の倍数

    何番目系の便利なCSSまとめ - Qiita
    iww
    iww 2018/06/14
    地味に便利
    リンク

  • Firefoxでテーブルのthとかtdにはposition:relativeが効かない件 - 主に技術的なことを書くブログ


    Firefoxでは、テーブルのthとかtdにはposition:relativeが効かないというか。 borderとかが消えたりとかします。 しかし、真実は、ChromeやIEが独自の実装をしているだけで、本当の正義はFirefoxにあると。 どういうシーンで起こるかth内の右上とかに小さいボタンを置くときにわざわざthの中で、ブロックを2つに分けてフロートとかさせるのはちょっとしんどい。なので、positionでやろうとすると、thにposition: relative;をかけることになるので、起こる。という具合です。 解決方法 単純にdivをかまして、そっちにposition: relative;をかける。 th.inBtn { padding: 0 !important; /* table全体でかけてる内側パディングとる */ } th.inBtn > div { position
    Firefoxでテーブルのthとかtdにはposition:relativeが効かない件 - 主に技術的なことを書くブログ
    iww
    iww 2018/06/12
    IEでも同じような問題が起きる。
    リンク

  • jQueryで要素の表示・非表示を判定する方法


    jQueryの要素の表示・非表示を判定する方法を紹介します。1．基本 jQueryでは、要素の表示・非表示のためのメソッドとして、show()とhide()が提供されています。 show()は指定した要素を表示します。 $('#foo').show(); hide()は指定した要素を非表示にします。 $('#foo').hide(); が、表示・非表示を判定する方法として、isShow()やisHide()、isVisible()などは提供されていません。2．css('display')で判定する show()はdisplayプロパティ﹁block﹂、hide()はdisplayプロパティを﹁none﹂にするので、これを判定に利用します。 if ($('#foo').css('display') == 'block') { // 表示されている場合の処理 } else { // 非表示
    iww
    iww 2018/06/10
    is(':visible')
    リンク

  • HTMLで「table-layout:fixed」つかってもTableが崩れる場合の対応方法 | 蒼いねずみのお仕事

    ですが、同じCSSを使っていてもこんな感じでレイアウトが崩れてしまう場合があります。 （なぜか、中見出しが「100px」になっていない） 見出し これは最初にcolspanが出てきてしまうと、残念ながらこのように崩れてしまいます。 それでは、なぜcolspanで「table-layout:fixed」の効果がなくなってしまうのでしょうか。 これは、「table-layout:fixed」の仕組みが最初の＜tr＞行でレイアウトを決めて固定化してしまう仕組みになっているからなのです。 ですので、最初の行に「colspan=”3″」があると、その時点でcolspanでまとめられてしまった＜td＞列は、きれいに3等分されて「fixed（固定化）」してしまったのです。（最初の行移行では、「table-layout:fixed」の効果はない） この現象を防ぐには、どうすればいいのかというと最初に表示す

    iww
    iww 2018/06/05
    これをやってもまだ固定できないときはどうするんだろう
    リンク

  • colgroupタグの意味と使い方


    colgroupタグ︵colgroup要素︶は、表組みの列グループを表します。HTML5におけるcolgroup要素の意味と使い方、使用できる属性、サンプルコード、使用例について解説します。 < colgroup ︻ カラム・グループ ︼ 属性="属性値">~< /colgroup > colgroup要素は表組み︵テーブル︶の列グループを表します。列に対してclass属性名を与えることが可能で、これをセレクタにしてCSSを適用できます。 カテゴリー
    colgroupタグの意味と使い方
    iww
    iww 2018/06/01
    col にclassを振れる
    リンク

  • tableレイアウト、divレイアウトの利点と欠点 - asrite.net

    iww
    iww 2018/04/13
    『divだのcssだの言ってるのは各人の好みでしかないと言うことなんですよ。』
    リンク

  • display:none と visibility:hidden の違い - Qiita


    visibility:hiddenは名前の通り、要素はあるけど見えない状態。 display:noneは、要素も取得されず、完全にその場にない扱い。 検証準備 html <!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>difference between visibility hidden and display none</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="one" class="box"></div> <div id="two" class="box"> <h3>Visibility:hidden</h3> エレメント描画されず。けど、表示エリアは﹁残る﹂。背景色で塗りつぶした感
    display:none と visibility:hidden の違い - Qiita
    iww
    iww 2018/03/26
    リンク

  • 定義リスト[dl]のdt/ddを横並びにする方法 | たねっぱ！

    定義リスト dl のdt/ddタグを横並びにする方法を紹介します！ floatをつかってキレイに整えましょう！ こんばんちわ、やのっぱです。(´・ω・｀) 今回は定義リスト[dl]の中身(dtとdd)を横に並べる方法やってみるよ。 その前に定義リストってなん？？？美味しいの？ ッと思ってたら、どこからともなく天の声が！！←天から聞こえとるがな 「説明しよう！定義リストとは定義（dt）する用語を説明（dd）するリストである！」 つまりは用語があって、それを説明する文がセットになってるときに使うリストってことです。 もっと噛み砕くと[これ]はこういう[意味]やで～ってことです。 やのっぱ（ここdt）毎日せこせことマークアップすることに快感を覚え、しかし打つのは面倒いので如何にして楽にマークアップするかと言うことに情熱を注ぐ汎用人型まーくあっぷえんじにゃぁ（ここdd） こんな感じで使ったりします

    定義リスト[dl]のdt/ddを横並びにする方法 | たねっぱ！
    iww
    iww 2018/03/22
    dtをfloatにすると並べられりゅ
    リンク
  • 前のページ 2 3 4 5 6 7 8 9 10 11 次のページ

お知らせ

もっと読む

公式Twitter

  • @HatenaBookmark

    リリース、障害情報などのサービスのお知らせ

  • @hatebu

    最新の人気エントリーの配信

はてなブックマーク

公式Twitter

はてなのサービス

  • App Storeからダウンロード
  • Google Playで手に入れよう
Copyright © 2005-2024 Hatena. All Rights Reserved.