タグ

CSSとHTMLに関するiwwのブックマーク (144)

  • CSS3でテキストを長体・平体にする方法と注意点 | Tips Note by TAM

    テキストを長体にしたいとき、画像ではなくCSS3を使う方法があります。 テキスト要素に対してtransformのscaleの値を調整すると、文字の一つ一つを細くしたり平たくしたりできます。この方法はWebフォントに対しても使えます。 表現の幅が広がりますね。 ただし、transformの性質上、説明文などの長い文章や、文章中の一部に使おうとするとき、表示がうまくいかないことがあります。ハマりやすいポイントがあるので、すべてのテキストに適用するのではなく、使う場所を選んで設定することをオススメします。 基的な使い方 <p class="text">普通のテキスト</p> <p class="text text-narrow">長体テキスト</p> <p class="text text-wide">平体テキスト</p> <style> .text { text-align: center;

    CSS3でテキストを長体・平体にする方法と注意点 | Tips Note by TAM
    iww
    iww 2020/06/18
    文字を細長にできるやつ。 位置指定とかいろいろ狂うので注意が必要
  • 【CSS】テーブルタグ内のラジオボタンの押しにくさを解消する - Qiita

    きっかけ td内部に設置したラジオボタンのクリックのしにくさに業を煮やして諦めかけてたところ解決したのでメモ 見えない壁 td内部に設置したラジオボタンのクリック範囲を広げるためにやったこと つまりは失敗例です labelで挟み込んでマージン無くして幅は100%高さも100%!! あれ? 幅はセル内いっぱいになったけど高さが何かに制限されている とクロームちゃんは教えてくれました その時のHTMLCSS <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="test.css"> <title>jstest</title> </head> <body> <table> <tr> <th>ラジオ</th> <th>テキスト</th> </tr> <tr> <td>

    【CSS】テーブルタグ内のラジオボタンの押しにくさを解消する - Qiita
  • TABLE の TD 要素内全てをチェックボックス化したいが…… - 風柳メモ

    HTMLのチェックボックス要素(input[type="checkbox"])で表示される□は、閲覧環境によっては小さく表示されてしまい、チェックを入れたり外したりしにくい場合がある。 その場合の対処法として、 チェックボックスそのものをCSSで拡大する(参考:チェックボックスやラジオボタンを大きくする方法: 小粋空間、チェックボックスを大きくしたい - Qiita) LABEL 要素を用いて、有効な範囲を拡大する チェックボックスの代替として、画像+JavaScript 等でなんとかする といった方法があると思われる。 で、2. の手法でやろうとしたのだが、条件を チェックボックスを、TABLE 内の TD 要素下に置く TD の高さや横幅は不定 TD 内部全体を有効範囲としたい チェックボックスそのものは、TD要素の上下左右中央に表示 のように定めたところ、どうやって CSS を書けば

    TABLE の TD 要素内全てをチェックボックス化したいが…… - 風柳メモ
  • HTML,CSS カラーコード一覧表 | 背景色や文字色の設定

    HTML,CSS ホームページの背景色や文字色 (フォントカラー) 色を使うメリット イメージ・デザインの統一、デザイン性の向上、オリジナリティ。 赤字やマーカーと同様で目立たせる。 文字色が浮き出て立体感がでる。 目に優しい色が使える。 画像に合う色を適応。透明化も可能。 色を使うデメリット 背景と文章の同色部分が被ったり、使いすぎると読み難くなる。 目が疲れる場合もある。 青系色はリンクアンカーと間違える。 色名にオンマウス(onmouseover)、カーソルで背景色が変更(要ワイド画面) W3C標準 基16色 10進数 例: rgb(255,0,0)

  • <color> - CSS: カスケーディングスタイルシート | MDN

    CSS初心者向けチュートリアル初めてのウェブサイト: コンテンツのスタイル設定CSS スタイル設定の基CSS とは何かCSS 入門課題: 経歴ページのスタイル設定基的な CSS セレクター属性セレクター擬似クラスと擬似要素結合子ボックスモデル競合の処理CSS の値と単位CSS におけるアイテムのサイズ設定背景と境界線コンテンツのオーバーフロー画像、メディア、フォーム要素表のスタイル設定CSS のデバッグ課題: 基的な CSS の理解課題: 美しいレターヘッド付きの便箋の作成課題: かっこいいボックスCSS テキストの装飾基的なテキストとフォントのスタイル設定リストのスタイル設定リンクのスタイル設定ウェブフォント課題: コミュニティスクールのホームページの組版CSS レイアウトCSS レイアウト入門浮動ボックス位置指定フレックスボックスCSS グリッドレイアウトレスポンシブデザインメ

    <color> - CSS: カスケーディングスタイルシート | MDN
    iww
    iww 2020/04/13
    色名のバージョンごとの一覧
  • linear-gradient() - CSS: カスケーディングスタイルシート | MDN

    CSS初心者向けチュートリアル初めてのウェブサイト: コンテンツのスタイル設定CSS スタイル設定の基CSS とは何かCSS 入門課題: 経歴ページのスタイル設定基的な CSS セレクター属性セレクター擬似クラスと擬似要素結合子ボックスモデル競合の処理CSS の値と単位CSS におけるアイテムのサイズ設定背景と境界線コンテンツのオーバーフロー画像、メディア、フォーム要素表のスタイル設定CSS のデバッグ課題: 基的な CSS の理解課題: 美しいレターヘッド付きの便箋の作成課題: かっこいいボックスCSS テキストの装飾基的なテキストとフォントのスタイル設定リストのスタイル設定リンクのスタイル設定ウェブフォント課題: コミュニティスクールのホームページの組版CSS レイアウトCSS レイアウト入門浮動ボックス位置指定フレックスボックスCSS グリッドレイアウトレスポンシブデザインメ

    linear-gradient() - CSS: カスケーディングスタイルシート | MDN
    iww
    iww 2020/04/13
    グラデーションのやつ
  • position―スタイルシートリファレンス

    positionプロパティは、ボックスの配置方法(基準位置)が、相対位置か絶対位置かを指定する際に使用します。 positionプロパティで指定するのは、配置方法(基準位置)のみです。 実際の表示位置の指定には、 top、 bottom、 left、 rightを併用して、基準位置からの距離を設定する必要があります。 ■値 static 特に配置方法を指定しません。この値のときには、top、bottom、left、rightは適用されません。これが初期値です。 relative 相対位置への配置となります。positionプロパティでstaticを指定した場合に表示される位置が基準位置となります。 absolute 絶対位置への配置となります。親ボックスにpositionプロパティのstatic以外の値が指定されている場合には、親ボックスの左上が基準位置となります。親ボックスにpositi

    iww
    iww 2020/01/09
    absolute指定した要素の親がstatic以外だと相対になる
  • CSSフレックスボックス(display:flex)の使い方 [無料ホームページ作成クラウドサービス まめわざ]

    HTMLのレイアウト方法で最も新しいフレキシブルボックスをまめわざでも利用しています。 手軽に並列レイアウトができるスタイルですが、他の並列レイアウトとの使い分けはどうすべきか、flexにしかできない表現はあるのかを、実例を挙げながら解説します。

    CSSフレックスボックス(display:flex)の使い方 [無料ホームページ作成クラウドサービス まめわざ]
    iww
    iww 2019/09/17
    このやり方はきちんと流行るんだろうか。 それともいつの間にかなかったことにされるのか、使用禁止になるのか
  • http://blog.sakurachiro.com/2013/04/table-padding/

    http://blog.sakurachiro.com/2013/04/table-padding/
  • 色々なパターンの点滅するCSSアニメーションサンプル集 | 1 NOTES

    文字や要素を点滅するCSSアニメーションのパターン集です。 各点滅アニメーションのサンプルコードは@keyframes(キーフレーム)を使ったanimationを利用しています。 通常点滅パターンシンプルなフラッシュパターンで、1秒間隔で点滅アニメーションさせています。 See the Pen CSS Flash animation 1 by yochans (@yochans) on CodePen. <div class="box"></div>.box { animation: flash 1s linear infinite; width: 50px; height: 50px; background: #0091EA; margin: 20px; } @keyframes flash { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

    色々なパターンの点滅するCSSアニメーションサンプル集 | 1 NOTES
    iww
    iww 2019/07/05
  • マウスカーソルの形状を変える

    解説 「cursor」プロパティは、ページ上で表示されるマウスポインタ(カーソル)の種類を変えることができるスタイルシートです。 通常、マウスカーソルは矢印で表示されますが、リンクの上にきたときや入力中のはそれぞれ異なる種類のカーソルが表示されるはずです。 これらカーソルの種類を要素ごとに変えることができます。 値 「cursor」プロパティで指定できるカーソルの種類に割り当てられた値は、以下の表のようになっています。 以下はWindows系のOSのポインタの一例です。 OSやブラウザによって表示されるカーソルの形状は異なります。 値 カーソル形状 ポインタ例

    マウスカーソルの形状を変える
    iww
    iww 2019/06/29
    cursor: pointer;
  • 改行コード(\n)が含まれる文字列をブラウザの表示上で改行表示させる方法 - Qiita

    Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

    改行コード(\n)が含まれる文字列をブラウザの表示上で改行表示させる方法 - Qiita
    iww
    iww 2019/04/15
  • tableのcolでCSSのtext-alignが効かない!というどぅーでもいい話

    全然、科の話では無いのですが授業ネタ。 最近、AKBの総選挙があって、それをネタにHTMLのtableを練習しよう!というお題をやっていました。で、票のところは数値なので、右寄せにしたいじゃないですか! で、colgroupを使って右寄せにしようとしても、それは反映されません。これはブラウザの実装の問題ではなく、そもそもtext-alignは指定されたブロック要素の中に在るインライン要素に対する指定で、これがtdやthなら有効なのですが、colやcolgroupはtdやthの親要素ではないという扱いなので、こうなります。table要素も他のブロック要素と違う振る舞いをする面もあり、悩ましいですね。これを何とかしようとすると、右寄せしたいtdにclassを設定して、そのstyleでtext-alignを使うしかありません、縦一列を一元化して指定したくても、出来ません。 colって何のために在

  • col/colgroup 要素で有効なスタイルと無効なスタイル。

    Web 制作のことを中心に、ちょっとした Tips などを掲載しています。「自分用メモ」が基スタンス。 btmup Blog 「ある列だけを改行なしにしたい」というときが結構あります。 確実なのは「その列のすべての td タグに class を付けていく」という方法ですが、あまりスマートとは言えません。 ソースの見栄え的にもいただけない感じ。 そこで、col や colgroup が使えるんじゃないかと思い、事あるごとに試していました。 が、どうしてもうまくいきません。 col と colgroup の組み合わせ方を変えてみたり、CSS の設定を工夫してみたり、いろいろ試しましたが結果は同じ。 ただ、設定したスタイルの中でも適用されるものと適用されないものがあり、その違いがよく分からないままだったので、どうもしっくりこない状態なのでした。 んで今回も似たような場面に遭遇したので改めて調べ

    col/colgroup 要素で有効なスタイルと無効なスタイル。
  • HTML[colgroup要素]表の列グループを表す - TAG index

    colgroup要素は、表の列をグループ化します。この要素は、table要素の子要素として使用します。 <colgroup span="3"></colgroup> <colgroup> <col span="1"> <col span="2"> </colgroup> span属性は、colgroup要素内にcol要素がない場合にのみ、指定することができます。 colgroup要素を使用すると、1つ以上の列を意味的なまとまりとしてグループ化することができます。 次の例では、5列の表を3つのグループ(1列:2列:2列)に分けています。 <colgroup span="1"></colgroup> <colgroup span="2"></colgroup> <colgroup span="2"></colgroup> グループ化の指定を行なうと、グループ単位でスタイルを設定できるようになり

    HTML[colgroup要素]表の列グループを表す - TAG index
    iww
    iww 2019/01/26
    『span属性は、colgroup要素内にcol要素がない場合にのみ、指定することができます。』
  • 日本語対応!CSS Flexboxのチートシートを作ったので配布します | Webクリエイターボックス

    語対応!CSS Flexboxのチートシートを作ったので配布しますFlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。現在ほとんどすべての最新ブラウザーでFlexboxをサポートしており、Flexboxを使ったレイアウト組みが今後のWebデザインのスタンダードとなるでしょう。 Web クリエイターボックスでは以前から Flexbox の使い方について紹介してきたのですが、最近 Flexbox が浸透してきたこともあってか各プロパティの使い方について質問される機会が増えてきたので、チートシートとしてまとめてみました。この記事ではなるべく画像メインでプロパティーの使い方を紹介したいと思います! 動画で学ぶ CSS Flexbox この記事は YouTube 動画でも解説しています。動画派の方

    日本語対応!CSS Flexboxのチートシートを作ったので配布します | Webクリエイターボックス
  • W3Schools.com

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

  • ★スタイルシートリファレンス

    山田太郎は、ウェブ開発やグラフィックスプログラミングに10年以上の経験を持つテクノロジーの専門家です。特にHTML5 CanvasやJavaScript、インタラクティブメディアに精通しており、動的なユーザーインターフェースや最先端のウェブアプリケーションの開発に携わってきました。複雑な図形描画や画像操作、リアルタイムグラフィックスに関する知識が豊富で、ウェブ技術の限界を追求する開発者たちにとって頼りになる存在です。知識の共有に情熱を持ち、初心者からプロフェッショナルまで幅広く支援するため、技術フォーラムやブログにも積極的に貢献しています。

    iww
    iww 2018/07/09
    スクロールバーの幅を考慮しないといけないとき出したり引っ込めたりで計算するのが面倒なので出しっぱなしにしたいけど見た目がダサいのもなんとかしたいとき、背景色と同じ色にして人間の目だけをごまかした。
  • ★CSS3リファレンス

    山田太郎は、ウェブ開発やグラフィックスプログラミングに10年以上の経験を持つテクノロジーの専門家です。特にHTML5 CanvasやJavaScript、インタラクティブメディアに精通しており、動的なユーザーインターフェースや最先端のウェブアプリケーションの開発に携わってきました。複雑な図形描画や画像操作、リアルタイムグラフィックスに関する知識が豊富で、ウェブ技術の限界を追求する開発者たちにとって頼りになる存在です。知識の共有に情熱を持ち、初心者からプロフェッショナルまで幅広く支援するため、技術フォーラムやブログにも積極的に貢献しています。

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