タグ

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

タグの絞り込みを解除

CSS3に関するiwwのブックマーク (16)

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


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

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

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

  • 【応用】Flexboxレイアウトまとめ - Qiita

    Flexboxとは Flexbox = Flexible Box Layout Module CSS3から導入されたレイアウトモジュール これを使うことfloatをサヨナラできます。 用語 詳しくはW3Cのflexページへ 使い方 flexレイアウトを適用したい要素の親要素にflexを指定します。

    【応用】Flexboxレイアウトまとめ - Qiita

  • CSSだけでボックスの縦横サイズをユーザが自由に変更できるようにする方法 - スタイルシートTipsふぁくとりー

    《2016年3月7日 11:02 公開/更新》 CSSだけでボックスの縦横サイズをユーザが自由に変更できるようにする方法 [CSS3,ボックス] CSSのresizeプロパティを使えば、閲覧者がマウスなどを使って任意のボックスの描画面積を自由に増減させられるようになります。複数行のテキスト入力欄のサイズが可変になっていれば、たくさん入力したい場合などに便利かも知れません。 CSSだけで、ボックスの縦横サイズをユーザが変更できるようにできる ボックスのサイズをユーザが変更できるようにするresizeプロパティ 複数行のテキスト入力欄(textarea要素)の縦横サイズを可変にした例 CSSだけで、ボックスの縦横サイズをユーザが変更できるようにできる CSS3で新たに追加されたresizeプロパティを使うと、ボックスの縦横サイズ(表示面積)をユーザが自由に拡大・縮小できるようになります。テキス

    CSSだけでボックスの縦横サイズをユーザが自由に変更できるようにする方法 - スタイルシートTipsふぁくとりー

  • 画面上の文字や画像を選択できないようにする at softelメモ


    問題 文字や画像をダブルクリックされると、選択状態になってしまう。 文字やリンクや画像に、onclickで何らかの処理をするスクリプトを作っているのだが、カチカチクリックされたときやドラッグされたとき選択状態になると、どうにもかっこ悪い。 ダブルクリックしたときやマウスを使って選択しようとしたときに、選択状態にならないようにできる？ 答え CSS3では以下のように書ける。 user-select: none; ただ、だいぶ普及した角丸をするborder-radiusのようには広く実装されていないようなので、現状では各ブラウザの独自実装にも合わせておく必要がありそう。 以下のように、各実装にあわせた記述をしておく。 user-select: none; /* CSS3 */ -moz-user-select: none; /* Firefox */ -webkit-user-select:
    画面上の文字や画像を選択できないようにする at softelメモ
    iww
    iww 2016/08/29
    CSSによる選択禁止
    リンク

  • IE8をレスポンシブ、HTML5やCSS3、rgba角丸に対応させる場合の注意点まとめ - 京都のお墨付き！


    IEでHTML5やCSS3を使う場合、いくつか補助プログラムを読み込んだり、制作上の注意点があります。これは、きちんとHTML5やCSS3の仕様を身につけていないと﹁動作しない﹂などのトラブルに見舞われることがあります。 この記事では、﹁なぜ、そうする必要があるのか﹂をキチンと書いて、仕様・仕組みを理解した上で使いこなすことができるようになる事を目標に書きました。 IE8で、HTML5のSectionsタグを使えるようにする﹁html5shiv.js﹂ ﹁Sectionsタグ﹂とは以下のタグです。これはHTML5で定義されていますが、IE8では使えないもの(HTML5で追加した分)があります。これを使えるようにするのが﹁html5shiv.js﹂です。 section (HTML5から追加) nav (HTML5から追加) article (HTML5から追加) aside (HTML5か
    IE8をレスポンシブ、HTML5やCSS3、rgba角丸に対応させる場合の注意点まとめ - 京都のお墨付き！

  • CSS3 PIE: CSS3 decorations for IE

    PIE makes Internet Explorer 6-9 capable of rendering several of the most useful CSS3 decoration features. Try the Demo This quick demo shows just a few of the CSS3 properties PIE can render. Use the controls to adjust the CSS3 applied to the box. Load this page in IE to see that it is rendered properly!

  • スマートフォンサイトに！CSSでできるボタンデザイン | SONICMOOV LAB


    こんにちは。デザイナーのユウコです。 CSS3の登場によって、従来なら画像で作成していたボタンも、デザインによってはほぼCSSだけで表現することができるようになりました。 そこで今回は、CSSでできるボタンのデザイン・エフェクトについてご紹介します。 １.枠線・角丸 CSS3では、ボタンに枠線をつけるだけでなく、角丸にすることもできます。 上下左右の枠線の色・太さを個別に設定できて、また四隅それぞれに角丸の大きさを設定できるので、上部だけ角丸に、下はフラットにしてタブっぽいデザインのボタンなんかもCSSだけで可能です。 2.背景色のグラデーション ボタンの背景色にグラデーションを設定することができます。 線形のグラデーションであれば、グラデーションのポイントを複数指定できるので、立体感のあるボタンだけでなく、つやっとした光沢感のあるデザインも表現できます。 不透明度も設定できるので、背景に
    スマートフォンサイトに！CSSでできるボタンデザイン | SONICMOOV LAB

  • 電話占いで使われる占術をご紹介 | 当たる電話占いおすすめランキング～口コミで評判の当たる電話占いサイト紹介～


    小さいころから占いに興味があって、色々と勉強しているうちにどんどん好きになり、皆さんにも占いの良さを知ってほしくて記事を書いています。 知り合いに占い師や霊能力者、お寺の住職がたくさんいるので、その方たちにインタビューして記事を書いています。
    電話占いで使われる占術をご紹介 | 当たる電話占いおすすめランキング～口コミで評判の当たる電話占いサイト紹介～
    iww
    iww 2016/05/09
    角が丸いボタンとか
    リンク

  • phiary

    今回は CSS3 から box-sizing について紹介します. width や height と同時に border や padding を指定しているときに, 少し値を変えただけで意図しない表示になったりレイアウトが崩れたという経験はありませんか？ これはボックスサイズの算出方法が複雑なのが原因です. そんな面倒な問題を解決してくれるのが box-sizing プロパティです!! box-sizing プロパティを指定することでボックスサイズ(width, height) の算出方法を指定することができます. あまり普及していないようですが, 実はこれめちゃめちゃ便利だったりします!! まだ独自実装レベルだからかもしれません. ですが, 現在のCSS3 の草案にも 一応残ってるので, がっつり使わせて頂いてる次第です.

    phiary
    iww
    iww 2016/04/13
    リンク

  • CSS Values and Units Module Level 3

    CSS Values and Units Module Level 3 W3C Candidate Recommendation Draft, 22 March 2024 More details about this document This version: https://www.w3.org/TR/2024/CRD-css-values-3-20240322/ Latest published version: https://www.w3.org/TR/css-values-3/ Editor's Draft: https://drafts.csswg.org/css-values-3/ History: https://www.w3.org/standards/history/css-values-3/ Implementation Report: https://draft

  • 【CSS3】word-wrap:break-wordとword-break:break-allの違いを説明します


    こんにちは、WEBマーケティング部の杉尾です。 今回は枠内で文章︵単語︶の折り返しを指定するプロパティword-wrap と word-breakの使い分けを紹介します。 文章の折り返しを指定する 文字、文章の折り返しの指定をするプロパティはword-wrap と word-breakで、それらに値もいくつかありますが、現実に使用頻度が高いのは2つだけだと思います。 それが、﹃word-wrap:break-word;﹄と﹃word-break:break-all;﹄です。 word-wrap と word-breakとは どちらもCSS3のTextモジュールに属するプロパティです。 紛らわしい2つのプロパティですが、違いはというと、 ・word-wrap …… 単語の途中で改行するかどうかを指定する ・word-break …… 行の改行方法を指定する ということです。 word-wra
    【CSS3】word-wrap:break-wordとword-break:break-allの違いを説明します
    iww
    iww 2016/03/04
    リンク

  • HTML5 & CSS3 リファレンス - writing-mode プロパティ（文字表記の方向）


    元々，﹁縦書き﹂のサポートは，Microsoft がIEの独自拡張仕様として策定したものが存在しておりました。　また，上のwriting-mode プロパティ の仕様は基本的に後になって Googoleの Chrome で採用されたものに基づいています。 すでに，W3C の CSSWriting Modes Level 3 の勧告候補 がリリースされていますが，主要ブラウザーでの対応が進まないのは，Microsoft が独自仕様に固執していることも原因になっているのかもしれません <style type="text/css"> <!-- div.sample { margin: 20px; padding: 10px; border: solid 1px #808080; float: left; } .vert1 {writing-mode: vertical-rl; } .
    iww
    iww 2016/02/01
    リンク

  • CSS3だけで作られたピクロス「Pure CSS お絵かきロジック」


    Pure CSS お絵かきロジック | xl1 (jsdo.it) JavaScriptは使わずにCSS3だけで作られた、ピクロス・ゲーム﹁Pure CSS お絵かきロジック﹂が公開されています。 終わっても正解とは表示されないようです。 Firefoxのみ、終わって正解すると﹁Congratulations!﹂と表示されます。ChromeとSafariでは表示されませんでした。
    CSS3だけで作られたピクロス「Pure CSS お絵かきロジック」

  • 【CSS】☆を子に持つ親の指定


    それは現状ではできません。 この場合、親要素にclass名をつけるしかありません。 なお、HTMLが間違っています。 ★articleは、内容にheader,section,footer要素をとる、あるいはとると期待された完結した記事を示します。 ★<img>は行内要素ですから<p><img></p>と囲みます。 ⇒HTML5における HTML4からの変更点( http://standards.mitsue.co.jp/resources/w3c/TR/h … ) リンク先に仕様書本体があります。サンプルもそこに・・ <section> <h2>見出し</h2><!-- sectionには必ずひとつだけ見出しが存在すると期待される --> <p>段落</p> <p>段落</p> <figure class="fig withIMG" id="fig1"><!-- 本文から参照される記事
    【CSS】☆を子に持つ親の指定
    iww
    iww 2015/04/10
    『CSSである特定のセレクタを持った子の親のスタイルを指定したい』 CSS4が来れば出来るらしい
    リンク

  • border-image...画像ボーダーを指定する


    border-imageプロパティは、画像ボーダーについてまとめて指定する際に使用します。 border-imageプロパティでは、 border-image-source、 border-image-slice、 border-image-width、 border-image-outset、 border-image-repeatの各プロパティの値を、まとめて指定することができます。 省略された値はそれらの初期の値に設定されます。 現在のところ、個別のプロパティをサポートしているブラウザは無いようなので、画像ボーダーを実現する際には、border-imageプロパティを利用するのが一般的です。 border-imageプロパティでも、border-image-outsetの値はブラウザでサポートされていないようです。 画像は上下左右それぞれのボーダー用に4枚必要となるわけではなく、1枚
    iww
    iww 2014/12/03
    cssで９スライス（９パッチ）
    リンク
  • 1

お知らせ

もっと読む

公式Twitter

  • @HatenaBookmark

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

  • @hatebu

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

はてなブックマーク

公式Twitter

はてなのサービス

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