スタイル付け – SVG 1.1 （第２版）
6 スタイル付け 目次 6.1 SVG のスタイル付けプロパティ 6.2 スタイル付けの利用局面 6.3 スタイル付けを与える２つの方法 6.4 呈示属性によるプロパティの指定 6.5 XSL によるスタイル付け 6.6 CSS によるスタイル付け 6.7 プロパティの名前と値における文字の大小の区別 6.8 SVG で利用される CSS と XSL の機能 6.9 外部スタイルシートの参照 6.10 style 要素 6.11 class 属性 6.12 style 属性 6.13 既定のスタイルシート言語の指定 6.14 プロパティ継承 6.15 スタイルの可視／有効範囲 6.16 UA スタイルシート 6.17 聴覚スタイルシート 6.18 DOM インタフェース 6.18.1 インタフェース SVGStyleElement 6.1 SVG のスタイル付けプロパティ SVG は文書の
SVGをcss/jsで操作するときに知っておきたいこと - Qiita
はじめに ※SVG初心者向きの記事です SVGはスケーラブルでベクターなグラフィックスです。レスポンシブや高解像度ディスプレイに対応する時にはとても頼もしい存在です。htmlと同じようにcssやjsでの制御も可能なため、インタラクティブなコンテンツもお手の物です。 そんなSVGは表示だけであれば簡単ですが、cssやjsを利用する際には知っておきたい基本知識があります。 これ以上、私のように時間を浪費してしまう哀れな子鳥たちを増やさぬようメモしたいと思います。ｱｰﾒﾝ 目次 表示のさせかたに気をつけろ！ cssに気をつけろ！ fill: none;に気をつけろ！ viewBoxに気をつけろ！ jQueryに気をつけろ！ サーバーの設定に気をつけろ！ 表示のさせかたに気をつけろ！ SVGの表示方法は複数あります。 <img>のsrcでファイルを読み込む background-imageプロパテ
CSS(SCSS) で作るペルソナ5 風メッセージウィンドウ - Qiita
ペルソナ5 の UI かっこいいですよね。 今は ペルソナ5S が出ていますが、今回は ペルソナ5 のメッセージウィンドウを、 もしかしたら CSS で作れるんじゃないか、と思って作ってみました。 画像としてはこんな感じ これがゆらゆらアニメーションします。 特徴 自由変形した四角形。 白と黒で重なったウィンドウ 吹き出しの矢印の部分の複雑な形 不規則にそれぞれの枠が別々で動くアニメーション 動作サンプル( Codepen ) See the Pen Persona5 Message Window by ばりとん📛フルスタックエンジニア兼ITコンサル (@dd0125) on CodePen. ソースコード <link rel="stylesheet" href="persona5.css"> <body> <h1>ペルソナ5 メッセージウィンドウ</h1> <div class="me
マルチデバイス対応方法(viewport,CSSの出し分け)をまとめてみた - NEZU.log
初期値は端末によって異なるため、除いてあります。 それぞれpxや乗数で入力して調整できますが、ほとんどの端末にもれなく対応するためには、以下のように記述するのがベターかと思います。 <!-- ▼ユーザーの拡大、縮小あり --> <meta name="viewport" content="width=device-width,initial-scale=1.0" /> <!-- ▼ユーザーの拡大、縮小なし --> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" /> user-scalable、つまりユーザーの拡大と縮小の可否で分けてあります。ユーザーはデフォルトで拡大できると認識していることがほとんどだと思うので、基本的には拡大縮小
これがスマートフォン向けサイトを作るときの viewport 設定３パターンだ
スマートフォン向けの Web サイトを作るとき、viewport の設定次第で使い勝手が大幅に変わる。 最近はレスポンシブ Web デザインが流行してるけども、その大前提として viewport の設定パターンを抑えておくのは重要だろう。 この記事では、viewport の設定によって、見た目・使い勝手がどう変わるかを解説する。 パターン1: 何も考えずに HTML を書く まずは、viewport を指定せずに、単純な HTML をスマートフォンで表示してみる。 <!DOCTYPE html> <head> <meta charset="utf-8"> </head> <body> <img src="/images/logo-ja.png"> <p>色んな素材がごった煮になった様子をお椀で表現しています。 湯気が<strong>「てっく」</strong>に見えるのが隠し味になっていま
画面上の文字や画像を選択できないようにする at softelメモ
問題 文字や画像をダブルクリックされると、選択状態になってしまう。 文字やリンクや画像に、onclickで何らかの処理をするスクリプトを作っているのだが、カチカチクリックされたときやドラッグされたとき選択状態になると、どうにもかっこ悪い。 ダブルクリックしたときやマウスを使って選択しようとしたときに、選択状態にならないようにできる？ 答え CSS3では以下のように書ける。 user-select: none; ただ、だいぶ普及した角丸をするborder-radiusのようには広く実装されていないようなので、現状では各ブラウザの独自実装にも合わせておく必要がありそう。 以下のように、各実装にあわせた記述をしておく。 user-select: none; /* CSS3 */ -moz-user-select: none; /* Firefox */ -webkit-user-select:
CSSだけで作る動きのあるドロップダウンメニュー
では、HTMLから解説していきます。 HTML <ul id="dropmenu"> <li><a href="#">メニュー</a> <ul> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> </ul> </li> <li><a href="#">メニュー</a> <ul> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> </ul> </li> <li><a href="#">メ
CSSセレクタ20個のおさらい
CSSセレクタって意外と分かっていなかったりするので勉強ついでにまとめてみました。比較的実用的かなと思うものを20個紹介していきます。いい復習になればと思います。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 また、IEが対応しきれていないCSS3のセレクタもありますが、IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」 で紹介したようにCSS3セレクタはie対策も容易なのでぜひお試しください。 SelectivizrはCSSを外部ファイルで指定した方がいいのですが、今回のサンプルはCSSを外部ファイル
box-sizing－CSS3リファレンス
box-sizingプロパティは、ボックスサイズの算出方法を指定する際に使用します。 値にcontent-boxを指定すると、 widthとheightで指定する幅と高さが内容領域に対して適用されます。 幅と高さにはパディングとボーダーは含まれません。 これはCSS2.1の仕様通りの解釈で、DOCTYPEスイッチの標準モードのような表示になります。 値にborder-boxを指定すると、widthとheightで指定する幅と高さがボーダーボックスに対して適用されます。 内容領域にパディングとボーダーを含んだ範囲に対して幅と高さが適用されるため、 パディングとボーダーの分だけボックスサイズが小さくなります。 DOCTYPEスイッチの互換モードのような表示になります。 ■値 content-box パディングとボーダーを幅と高さに含めない（初期値） border-box パディングとボーダーを
webcreatornote.com - webcreatornote リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
CSSで角丸を表現する方法をちょっと詳しく書いてみる
CSS3では、border-radiusプロパティを使う事で角丸を表現する事ができます。 この方法を少し詳しく調べてみました。 .radius{ border-radius: 10px; /* CSS3草案 */ } ここの10pxとは角丸の半径の大きさとなります。 ただし、現在のところはCSS3はまだ草案なので、 Safari、Google Chrome では -webkit-border-radius、 Firefox では -moz-border-radius と指定します。 Safari、Chorme用（-webkit-border-radius） 4辺を一括指定する場合は以下のように書きます。 .webkit1{ -webkit-border-radius: 10px; /*一括指定*/ } 4辺を個別に指定する場合は以下のように書きます。 .webkit2{ -webkit-b
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Clippy — CSS clip-path maker
Redirecting to Animate.css
CSS3のMedia Queriesで実装するレスポンシブWebデザインについて考える - Kowappa
Ceaser - CSS Easing Animation Tool - Matthew Lein
Stopwatch in CSS
http://www.css-lecture.com/log/css3/css3-gradient.html
CSS3 を使って円を描く
新しいCSSの仕様を色々調べてみた
