CSS グラデーションの使用 - 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 の基本的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボック
obomemo.com
このドメインを購入する。 obomemo.com 2018 Copyright. All Rights Reserved. The Sponsored Listings displayed above are served automatically by a third party. Neither the service provider nor the domain owner maintain any relationship with the advertisers. In case of trademark issues please contact the domain owner directly (contact information can be found in whois). Privacy Policy
プログラム組んだら負け！実はHTML/CSSだけでできること2015夏
ちゃんとした C# プログラムを書けるようになる実践的な方法～ Visual Studio を使った 高品質・低コスト・保守性の高い開発慎一 古賀
list-style-type: "🆕";
Firefox 39からlist-style-typeプロパティーで文字列が使えるようになる。今までは文字列を使おうとすると擬似要素経由で行うことになったため、デフォルトで要素の外側に配置されるリスト・マーカーと違和感のないように行うのはなかなか難しかった。そういった点が解決しやすくなったことや、Emojiを利用したリスト・マーカーなど、明快に広がる使い勝手の良さもあるが、他にも横並びのリストの区切りが作りやすくなる。 Demo: list-style-type: "string" デモでは横並びのリストの区切りにMiddle Dot(·)を使っている。ウェブサイトのフッターにあるリンク・リストなどでよくみる形のものだ。擬似要素でやる場合は、li要素のスタイルのリセットに加えて擬似要素の追加が必要になるが、list-style-typeプロパティーが使える場合はずっと簡単になる。 li {
CSS3での背景指定方法のまとめ
CSSであれこれやっていたら、まず間違いなく使うであろう背景関連のプロパティ。 CSS3ではこれまでより多くの指定ができるようになります。 それらの新しいプロパティや値はいったいどういうものなのか、調べてみました。 主に参考にしたのは以下の2つです。 CSS Backgrounds and Borders Module Level 3現在の仕様です。CSS 背景 & ボーダー モジュール Level 32011年2月15日版の仕様の日本語訳です。プロパティと値の説明はこちらを参考にしました。背景のレイヤー背景は複数のレイヤーを持つことができ、レイヤーの数はbackground-imageに指定されたカンマ区切りの値の数によって決められます。noneの指定も一つのレイヤーを生成します。 背景レイヤーの重なり方ですが、初めに指定したものから手前に来ますので、注意してください。 例として、下のr
Next/Prev & Back to TopをまとめたナビゲーションのCSSデザインアイディア
『mlog』を作るときに、Next/PrevとBack to Topをまとめた、下の画像のようなナビゲーションを作ったんですが、これを応用すれば色々作れそうだと思って、5種類ほど作ってみました。 画像を使わなくてもそれなりに色々できるというデモです。 ただし、そのまま使えばもちろん非対応ブラウザでは表示が崩れますし、コードも長いです。 実用するなら素直に画像を使ったほうが早いし安心だと思います。 前置き終わり。 Google Chrome 12 devだと以下のように表示されます。 Next/Prev & Back to Top Navigation Design Idea デモファイルをダウンロード 各ブラウザの最新版なら、どれも同じように見えると思います。 IE 8は3番目と4番目以外は崩れますが、使えなくはない……と思います。 :before, :after擬似要素が使えないIE 7
CSSで月の満ち欠け
月の満ち欠けは球体に光を当てた結果のもので、円を円でカットするようなものではない。CSSでは立体を立体としては扱うのは難しいので、それを平面として捉え、半円を円で膨らませたり押し出したりすることで近いものにすることが可能になりそうだ。 Demo: Lunar Phase CSSグラデーションで作った半円に、border-radiusで作った半楕円を組み合わせることで実現している。月齢15以上の場合は半円を逆転させる。地球と太陽と月の位置関係から平面で捉えると、半円を基本にするということであっている(と思う)。 例えば月齢5の場合は以下の様なCSSで構成されている。 .moon { border-radius: 51%; height: 3rem; overflow: hidden; position: relative; width: 3rem; } .phase5 { backgroun
保存版！CSS3で出来る素敵なデザインやアニメーションをまとめてみた
主要ブラウザで使うことの出来る「CSS3」ですが、IE8に対応していないためにCSS3の基本や使い方は知っていても実務等では使う機会が少なかった(クライアントワークではIE8が対応ブラウザに含まれていたため)方もいらっしゃると思います。そうするとふと「あれ、あのプロパティはどう使うんだっけ？」とか「この要素だけにスタイルを適応するCSS3は何だっけ…？」など忘れてしまうこともしばしば…。 最近ではIE8のシェアは低くなり、またスマホサイト制作の機会も増えたためクライアントワークでもCSS3を活用したWeb制作が増えてきました。そこで今回は、まず覚えておくと便利な機能の復習とそれを応用し「これCSS3だけで作れるの!?」というような驚きの作品の数々をまとめてみました！ CSS3とは そもそも「CSS3」とは何のことでしょうか。改めてその定義を確認してみましょう。 「CSS」は、ウェブページの
CSS3背景アニメーションで雪を降らすの巻 | グリニッジ株式会社
こんにちは、三橋です。 今年も残すとこあと少しですね。 冬なので、css3の勉強に背景画像を動かして雪が降ってるようにしてみました。シンプルな作りです。 こちらの記事をロジックの参考にさせていただきました。 CSSだけで背景に雪を降らせてうっとりする 1,雪の画像（動かしたい背景画像）を用意 一枚雪の画像を用意します。今回はこのpng画像を作りました。グレーの部分は透過させてます。 ２,雪を降らせたいdivにbackground-image指定。 #div{ background-image:url(雪画像のパス); } リピートされて背景全体に雪が敷きつめられます。 このページでは雰囲気を出すため背景色、background-color:#A3D6FF;を指定しています。 3、背景アニメーション snowを設定 ここでcss3の出番です。背景画像を一定スピード、無限リピートで動かして雪が
ZｕＢｏｌｌａ.メモ Firefox 29 ツールバーの背景変更
#TabsToolbar:after { top: 0% !important; box-shadow: none !important; background-color: transparent !important; background-image: none !important; } /* ページ表示画面の上 バー境界 1px ボーダー？ */ #navigator-toolbox:after { /* background-color: transparent !important; */ } #main-menubar, #toolbar-menubar, /* メニューバー */ #TabsToolbar, /* タブバー */ #nav-bar, /* ナビゲーションツールバー */ #PersonalToolbar /* ブックマークツールバー */ { /* bor
CSSでアイコンをデザイン
ものすごく大雑把に言うと今まで画像編集ソフトでやっていた、角を丸くするとか背景をグラデーションにするなどという作業をCSSでやってしまおうというお話。もちろんCSSでできないことは多くあるので万能というわけではないが、できることに限って言えば数行のCSSコードでスクリーンショットのような効果を柔軟に適用することができる。 Demo: Design icon with CSS ul li a { display: block; width: 32px; height: 32px; background-image: url("icons-w.png"); background-repeat: no-repeat; text-indent: -10000px; } 各アイコンになるa要素へのスタイルは以上のような単純なものがベースになる。icons-w.pngがアイコンの前景をつなげたスプライ
普通に引かれた下線
Mediumライクなかっこいいリンクの下線をついに諦めた。目的とコードがあまりにもかけはなれていて、CSSらしくないのが気になるようになったからだ。プロパティーの組み合わせから結果が想像しづらいルールセットに苦しめられた過去を思い出す。 とは言うものの、できることなら下線の色だけを変えるようにはしたいので、text-decoration-colorプロパティーのサポートで切り替えるようにCSSを書いた。 a { color: #1188bb; text-decoration: underline; } @supports (-moz-text-decoration-color: red) or (-webkit-text-decoration-color: red) or (text-decoration-color: red) { a { color: inherit; -moz-tex
mix-blend-mode - CSS: カスケーディングスタイルシート | MDN
mix-blend-mode = <blend-mode> | plus-darker | plus-lighter <blend-mode> = normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity <div class="grid"> <div class="col"> <div class="note"> Blending in isolation (no blending with the background) </div> <div class="row isolate"> <div cl
全称セレクターは擬似要素にマッチしない
Mediumの印刷スタイルシートの記事を読んでいた。印刷スタイルシートについては常に盛り上がりに欠けるような印象だが、Mediumのデザイナーが書くと盛り上がってくれるんじゃないかとちょっと期待している。ついでに少しこのウェブサイトの印刷スタイルシートに手を入れていたところ、どうやら全称セレクターは擬似要素にマッチしないという、あまり関係のないことを今さら学んだ。 * { color: black !important; } このウェブサイトの印刷スタイルシートではこのようにして、強制的に文字を#000000で印刷させるようにしていた。よくよく確認してみると、実際に印刷するまでもなく、印刷プレビューの状態でも一部色がおかしいことに気付いた。おかしい部分は全て擬似要素で挿入した文字列だった。 最初は全称セレクターが詳細度においてもっとも弱いことに由来する問題かと思ったが、この例では!impo
background-image - 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 の基本的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボック
パンくずリストなどを作る際に役立つ擬似要素の使い方 | pipilog
ちょっと個人的にハマったのでメモ まずパンくずリストとは。 パンくずリスト（breadcrumb list）は、ウェブサイト内におけるウェブページの位置をツリー構造を持ったハイパーリンクの一覧として示すもの。パンくずナビ、トピックパス、フットパスとも言う。 日本語では「パンくずリスト（breadcrumb list）」だが、英語では単に“breadcrumbs”または“breadcrumb navigation”というのが一般的。「パンくずリスト」という名前は、童話『ヘンゼルとグレーテル』で、主人公が森で迷子にならないように通り道にパンくずを置いていった、というエピソードに由来する。 こういうやつですね。 ちなみにみなさん、 これ、どうやって作ってますか？ もしかして sample.htmlRAW <ul id=”breadcrumb”> <li>HOME</li> <li> > <
『CSS：1行目の頭文字だけ前に出したい時』
Web仕事人の部屋札幌のWeb制作会社・株式会社メディアリュウム／株式会社WEBサクセスのスタッフHが、Web制作のTipsなどをお届けします。 注意書きなどで、よく使われているこのような文章、 「 ※ご注意ください 」 頭に ※マークなどをつけて書いていきますが、文章が折り返すときは、※マークだけ前に出ていたらいいな・・・というときがありますよね。 これもCSSで設定することができます。 最終的にはこのようになるよう、設定していきましょう。 //////////////////////////////////////////////////////////// まず、HTML <body>部分に <p>※あいうえおかきくけこ<br>さしすせそたちつてとなにぬねの</p> と書きました。表示はもちろんこのようになります。 ここで、<p>タグにCSSを仕掛けていきます。 ----------
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Twitter's FAV button back ?
sdn-project.net
content - CSS: カスケーディングスタイルシート | MDN