[B! CSS] [3ページ] iwwのブックマーク

Stylus – 🦊 Firefox (ja) 向け拡張機能を入手

お気に入りのWebサイトをStylusでデザインしましょう。Stylusは、アクティブに開発されているコミュニティ主導型のユーザースタイル管理ツールです。有名なオンラインリポジトリからカスタムテーマを簡単にインストールしたり、あなたの個人用のCSSスタイルシートを作成したり、編集したり、管理したりすることができます。特徴 * テーマのインストール方法の多様性。Stylusは、有名なオンラインリポジトリからのインストールをサポートしています。加えて、.user.css や .user.styl のURLから、スタイルをインストールすることも可能です（詳細については、我々のgithubのウィキにあるUsercssフォーマットの文書を参照ください）。 * インストール済みスタイルのデータベース全体をバックアップする機能。これは、他のユーザースタイル管理ツールと互換性があります。 * 直観的で設

iww 2021/04/19

ユーザースタイルシート

リンク

jQueryでCSSの値を複数設定するときの記述 - Qiita

$("p").css("color","red"); $("p").css("font-size","16px"); $("p").css("font-weight","bold");

iww 2020/12/03

リンク

HTMLやCSSやJavaScriptなどのコードをかっこよく魅せるために使用できる無料ツールのまとめ

HTMLやCSSやJavaScriptなどのコードをかっこよく魅力的に見せるために使用できるツールを紹介します。プレゼンなどでコードを人に見せる時をはじめ、TwitterやFacebookやInstagram用にコードの画像を最適化して見せることもできます。 6 Awesome Ways To Present Your Code 🔥 by Niharika Singh ⛓ 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。はじめに Carbon Codeimg.io Pastie Rust Playground Silicon Polacode はじめに Web制作者はいつか、コードを発表する時がくるかもしれません。プレゼン、ツイート、ブログ、あるいはスニペットを人に見せる時です。あなたのコードを素敵に見せるために使用できる

iww 2020/09/02

はてなブログのスーパーpre記法が良いと思う

リンク

CSSで、button要素とinput要素のテキストを美しく揃えるスタイルシートのテクニック

検索フォームなど、button要素とinput要素を並べて配置した際に、それらのテキスト（アイコンも）を垂直方向に美しく揃えて配置するスタイルシートのテクニックを紹介します。ボタンと入力フォームの高さは自由に変更でき、デザインも普通に変更できるので、スニペットとして登録しておくと便利です。 button要素とinput要素のテキストを揃えるインタラクティブな要素のコンテンツを垂直方向に揃えるのに苦労したことはありませんか？あなたは仲間です、多くの人が経験していると思います。この記事では、line-height, padding, flexboxを使用して、button要素とinput要素のコンテンツを中央に配置する方法について解説します。まず、ゴールを明確にしておきましょう。 button要素とinput要素のコンテンツは完璧に揃えます。 button要素とinput要素の高さは

iww 2020/08/24

昔は力業で強引にそろえたけど、今はもう少しだけスマートにできそう

リンク

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

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

iww 2020/06/18

文字を細長にできるやつ。位置指定とかいろいろ狂うので注意が必要

リンク

【CSS】テーブルタグ内のラジオボタンの押しにくさを解消する - Qiita

きっかけ td内部に設置したラジオボタンのクリックのしにくさに業を煮やして諦めかけてたところ解決したのでメモ見えない壁 td内部に設置したラジオボタンのクリック範囲を広げるためにやったことつまりは失敗例です labelで挟み込んでマージン無くして幅は100%高さも100%！！あれ？幅はセル内いっぱいになったけど高さが何かに制限されているとクロームちゃんは教えてくれましたその時のHTMLとCSS <!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>

iww 2020/05/21

リンク

TABLE の TD 要素内全てをチェックボックス化したいが…… - 風柳メモ

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

iww 2020/05/21

リンク

Webクリエイターボックス

WebクリエイターボックスのX: @webcreatorboxでは毎日Webに関する記事や美しいデザイン・写真などを紹介しています。その中で今週人気だったWeb関連の情報トップ10を紹介します。見逃してしまった人はこちらでチェック！まだフォローしてない人はお気軽にフォローしてみてくださいね！続きを読むプレゼンをする時に必須なのがスライド。私も作成する機会がちょこちょこあります。基本的なデザインの原則はおさえつつ作っていくのですが、プレゼンテーションでの資料として参加者にみてもらうことを前提に考えた時に、特に気をつけているポイントを紹介します。続きを読む WebクリエイターボックスのX: @webcreatorboxでは毎日Webに関する記事や美しいデザイン・写真などを紹介しています。その中で今週人気だったWeb関連の情報トップ10を紹介します。見逃してしまった人はこちらでチェック！ま

iww 2020/05/11

X-Frame-Options ポリシーによりブロックされました

リンク

現代ビジネス [講談社]

飛行機代が８割引き、新幹線代が４割引きになるって知っていましたか！？――GWでも使える旅の裏技「シニア割」...

iww 2020/05/10

adblock対策のひとつとして、スクロールできなくしている。 body に overflow:hidden をかけてる

リンク

HTML,CSS　カラーコード一覧表　｜　背景色や文字色の設定

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

iww 2020/04/13

リンク

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

iww 2020/04/13

色名のバージョンごとの一覧

リンク

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

iww 2020/04/13

グラデーションのやつ

HTML
CSS

リンク

CSSで実装が面倒なトグルをさまざまなデザインで簡単に実装できるCSSの軽量ライブラリ -MoreToggles.css

シンプルなHTMLに、実装が面倒なトグルをclassを加えるだけで簡単に実装できるスタイルシートを紹介します。 iOSやAndroidのスタイルをはじめ、チェックやスクエアなど、さまざまなデザインのトグルを簡単に実装できます。トグルは拡大縮小にも対応しているので、非常に便利です。 MoreToggles.css MoreToggles.css -GitHub MoreToggles.cssの特徴 MoreToggles.cssのデモ MoreToggles.cssの使い方 MoreToggles.cssの特徴 MoreToggles.cssは、さまざまなデザインのトグルを簡単に実装できるCSSライブラリです。classを追加するだけで、簡単に利用できます。 JavaScriptはなし、ピュアCSS classを付与するだけで、簡単な実装 8つのスタイル（さらに増やす予定）トグルの拡大縮小

iww 2020/03/09

MITライセンス

リンク

position―スタイルシートリファレンス

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

iww 2020/01/09

absolute指定した要素の親がstatic以外だと相対になる

HTML
CSS

リンク

CSSのmarginとは？paddingとは？余白の指定方法まとめ

余白はウェブページを見やすく、そして美しく見せるためにとても大事なポイントです。今回はCSS初心者にとって最大の難関である余白設定（marginとpadding）をマスターしましょう。

iww 2019/12/17

CSS

リンク

スタイルシート［CSS］/フォーム/フォーム部品の文字サイズを指定する - TAG index

文字サイズの指定方法については、文字サイズを指定するをご覧ください。 font-size: 100% を指定しておくと、入力欄のテキストが標準の文字サイズで表示されるようになります。 font-size: 100% を指定した例指定しなかった例（一般的なブラウザでは、やや小さめの文字サイズで表示されます）使用例 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>文書のタイトル</title> <style type="text/css"> input.example, select { width: 250px; } textarea { width: 250px; height: 7em

iww 2019/10/21

CSS

リンク

新年早々スマホコーディングの「html/css」についてもう一度おさらいしてみる。 | GrowGroup

あけましておめでとうございます！普段はフロントエンジニア兼webデザイナーとして日々精進している山田、いえ GORILLA-Yこと、ただのゴリラです。本年もGrowGroup株式会社をどうぞよろしくお願いいたします！さて今回はスマホコーディングについてもう一度おさらいということで記事を書きました！普段web上で色んなサイトを見ていたり、プラグインなどを眺めていると「そんなのあったの？」なんて指定に気づいたり、「よく見かけるけどあんまわかってない」なんて状況、よくありますよね。これは専門書を読んで学んでいくだけだと、その中に無い指定について自分で探求するのをやめてしまうから起こってしまう悲劇だと個人的に思っています。新しいものを取り入れていくためにも、ここらで「htmlとcssのスマホ対応これだけはやっとけ/これはある程度わかっとけ」を一度まとめておこうと思ったわけですね。ハ

iww 2019/10/21

CSS
HTML5

リンク

古いCSSリセットからはもう卒業！モダンブラウザに適した新しいCSSリセット -A Modern CSS Reset

モダンブラウザをターゲットにしたWeb制作では、CSSにおけるブラウザの互換性の問題はIE6の頃に比べるとはるかに少なくなりました。無理なリセットやすべてをリセットする必要は全くありません。現在のWeb制作に合わせて制作された新しいCSSリセットを紹介します。 CSSの知見やテクニックも満載です！ A Modern CSS Reset A Modern CSS Reset -GitHub by Andy Bell 他のCSSリセットが気になる人は、こちらも注目です。 2020年、モダンブラウザに適したCSSリセットのまとめ下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。はじめにモダンブラウザに適切なデフォルトのCSSリセット各CSSリセットの解説まとめはじめに私は日々、CSSについて考えて楽しんでいます。それは、お