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;
<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 の基本的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボック
CSSだけでボックスの縦横サイズをユーザが自由に変更できるようにする方法 - スタイルシートTipsふぁくとりー
《2016年3月7日 11:02 公開/更新》 CSSだけでボックスの縦横サイズをユーザが自由に変更できるようにする方法 [CSS3,ボックス] CSSのresizeプロパティを使えば、閲覧者がマウスなどを使って任意のボックスの描画面積を自由に増減させられるようになります。複数行のテキスト入力欄のサイズが可変になっていれば、たくさん入力したい場合などに便利かも知れません。 CSSだけで、ボックスの縦横サイズをユーザが変更できるようにできる ボックスのサイズをユーザが変更できるようにするresizeプロパティ 複数行のテキスト入力欄(textarea要素)の縦横サイズを可変にした例 CSSだけで、ボックスの縦横サイズをユーザが変更できるようにできる CSS3で新たに追加されたresizeプロパティを使うと、ボックスの縦横サイズ(表示面積)をユーザが自由に拡大・縮小できるようになります。テキス
画面上の文字や画像を選択できないようにする at softelメモ
問題 文字や画像をダブルクリックされると、選択状態になってしまう。 文字やリンクや画像に、onclickで何らかの処理をするスクリプトを作っているのだが、カチカチクリックされたときやドラッグされたとき選択状態になると、どうにもかっこ悪い。 ダブルクリックしたときやマウスを使って選択しようとしたときに、選択状態にならないようにできる？ 答え CSS3では以下のように書ける。 user-select: none; ただ、だいぶ普及した角丸をするborder-radiusのようには広く実装されていないようなので、現状では各ブラウザの独自実装にも合わせておく必要がありそう。 以下のように、各実装にあわせた記述をしておく。 user-select: none; /* CSS3 */ -moz-user-select: none; /* Firefox */ -webkit-user-select:
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か
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.背景色のグラデーション ボタンの背景色にグラデーションを設定することができます。 線形のグラデーションであれば、グラデーションのポイントを複数指定できるので、立体感のあるボタンだけでなく、つやっとした光沢感のあるデザインも表現できます。 不透明度も設定できるので、背景に
phiary
今回は CSS3 から box-sizing について紹介します. width や height と同時に border や padding を指定しているときに, 少し値を変えただけで意図しない表示になったりレイアウトが崩れたという経験はありませんか？ これはボックスサイズの算出方法が複雑なのが原因です. そんな面倒な問題を解決してくれるのが box-sizing プロパティです!! box-sizing プロパティを指定することでボックスサイズ(width, height) の算出方法を指定することができます. あまり普及していないようですが, 実はこれめちゃめちゃ便利だったりします!! まだ独自実装レベルだからかもしれません. ですが, 現在のCSS3 の草案にも 一応残ってるので, がっつり使わせて頂いてる次第です.
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モジュールに属するプロパティです。 紛らわしい２つのプロパティですが、違いはというと、 ・word-wrap …… 単語の途中で改行するかどうかを指定する ・word-break …… 行の改行方法を指定する ということです。 word-wra
HTML5 & CSS3 リファレンス - writing-mode プロパティ（文字表記の方向）
元々，「縦書き」のサポートは，Microsoft が IE の独自拡張仕様として策定したものが存在しておりました。 また，上の writing-mode プロパティ の仕様は基本的に後になって Googole の Chrome で採用されたものに基づいています。 すでに，W3C の CSS Writing 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; } .
【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"><!-- 本文から参照される記事
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の値はブラウザでサポートされていないようです。 画像は上下左右それぞれのボーダー用に４枚必要となるわけではなく、１枚
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【応用】Flexboxレイアウトまとめ - Qiita
電話占いで使われる占術をご紹介 | 当たる電話占いおすすめランキング～口コミで評判の当たる電話占いサイト紹介～
CSS3だけで作られたピクロス「Pure CSS お絵かきロジック」