レビュー商品一覧ページのスマートフォン表示を改善！擬似要素の勉強にもなりました - 力こそパワー

2017/06/04 51 users 実装方法 完成度 最後 高評価 公開以降

先日ご紹介したレビュー商品一覧ページ。 公開以降、多くの高評価をいただき 作って良かった としみじみ感じております。 レビュー商品一覧ページを作成しました(完成度は7割ほど？) 残作業の1つとしてスマートフォン表示時について触れましたが、今回 とある人 に協力していただいて大きく改善されました。 こどみすさんに依頼 CSSだけで再現したい！ Amazonボタンの実装方法を考える 実装してみた 最後... 続きを読む

ゴーストボタンにマウスを乗せたときの動きいろいろ16個｜Webpark

2015/05/20 312 users span Webpark HTML マウス サンプル

昨年くらいから流行っているらしいゴーストボタンというもののサンプルをいくつか作ってみました。皆さん色々作られていて、今さら感もありますがぜひご覧ください。 今回、以下のルールに沿って16個サンプルを作りました。 HTMLは全て同じ マウスを乗せる前は同じ状態 擬似要素は使っても1つだけ 擬似要素を2つ使ったり、spanなんかをはさんでやるともっと色々できると思いますが、今回はシンプルにマウスを乗せ... 続きを読む

CSSの content プロパティーを使いこなそう！ | Webクリエイターボックス

2015/04/08 405 users CSS before After Webクリエイターボックス

CSSの小技やスニペット集なんかを見ていると、ちょくちょく見かける content プロパティー。「そういえば、こいつ一体何者…！？」と思った方もいるかもしれないので、今更ながら改めて content プロパティーの紹介をしようと思います。 content プロパティーって何？ content プロパティーは、要素の前後に、:before または :after という擬似要素を使ってテキストや画像... 続きを読む

音声出力環境における擬似要素(::before, ::after)の内容(content)の読み上げについて｜Web制作 W3G

2015/01/19 19 users content before After ソフトウェア 多く

音声出力環境における擬似要素(::before, ::after)の内容(content)の読み上げについて Updated 2015.01.19 / Published 2015.01.19 スクリーンリーダーや音声ブラウザなどの音声出力環境で::before擬似要素、::after擬似要素にcontentプロパティで生成した内容は多くのソフトウェアで読み上げることができます。使い方次第で、薬に... 続きを読む

Pure CSSでアイコンを実装できるスタイルシート「icono」 | NxWorld

2015/01/06 43 users NxWorld SVG プロパティ CSS Webフォント

「icono」は画像を使用せずに、擬似要素や様々なプロパティを使用してCSSのみでアイコンを表現したスタイルシートです。使い方も簡単で必要なファイルを読み込んでクラスを指定するだけで表示させることができ、CSSなのでカラー変更なども容易にできます。WebフォントやSVG使えばって感じですが、それすらも使いたくない場合はよく見かけるものがひと通り揃っていて良いかなと思いました。 画像は用意されている... 続きを読む

擬似要素を利用したベースライン・グリッド · terkel.jp

2014/11/07 43 users terkel パディング padding-bottom 上下

CSS でテキストをベースライン・グリッドに揃えるとなると、ベースラインの高さに応じて上下のパディングやマージンを調整するアプローチがよく見受けられるますが、あまり実用的なものとは言いがたかったと思います。 p { padding-top: 0.30116em; padding-bottom: 0.19884em; /* ... */ } しかし、::before と ::after 擬似要素を利... 続きを読む

二本線からバツ印へ - Weblog - Hail2u.net

2014/09/19 22 users Weblog hail2u.net バツ印 sandwich

Appleの新ウェブサイト(2014年9月)では狭い画面の時にグローバル・ナビゲーションを出す二本線のアイコンが表示される。それをタッチするとナビゲーションが表示されると同時に回転しながらバツ印に変化する。同じようなアニメーションをCSSでやってみると意外に面倒くさかった。 View Demo: Sandwich 二本線は以下のように擬似要素を2つ使って作った。コンテナーに対して幅を半分のサイズ、... 続きを読む

CSSで画像を六角形にくり抜く - Weblog - Hail2u.net

2014/05/19 76 users Weblog hail2u.net SWARM CSS 六角形

Swarmで使われている六角形のプロフィール画像はちょっと流行りそう。CSSだけで行えるように考えておくとなんかの時に役に立つはず。難しく考えずに擬似要素で三角形を作るテクニックを反転させて重ねるだけでも良かったけど、CSSグラデーションで重ねた方がフレキシブルに作れた。 View Demo: CSS HEX Clip 切り抜きはCSSグラデーションを上に重ねて行うので、何らかの要素で括る必要があ... 続きを読む

プレースホルダー周りのセレクター - Weblog - Hail2u.net

2013/12/30 20 users セレクター Weblog hail2u.net 実装 フォーム

フォームのプレースホルダー周りのセレクターは、今のところウェブ標準では:placeholder-shown擬似クラスとして定義されている。つまりプレースホルダー文字列が表示されているかどうかという状態を反映するもの。どうやらInternet Explorer 11はこれを踏襲した実装のようだ。対してChrome 31やFirefox 25では擬似要素として実装されており、プレースホルダーそのものを... 続きを読む

CSSだけで作る「多階層」なドロップダウンメニュー｜Webpark

2013/10/15 144 users Webpark 矢印 階層 CSS 多階層

以前書いた「CSSだけで作る動きのあるドロップダウンメニュー｜Webpark」という記事が検索エンジン経由でそこそこアクセスがあり、よく質問をいただきます。そのなかで多階層にできないのかという質問があったので作ってみました。 IE7の場合擬似要素が使えませんので、次の階層があることを示す矢印が表示されません。ドロップダウンの機能はIE7でも問題ありませんので、IE7に対応させる場合は矢印を画像にす... 続きを読む

CSSだけで作るamazon風な縦型メガメニュー｜Webpark

2013/09/02 78 users Webpark border-radius CSS 矢印 若干

先日、「CSSだけで作る動きのあるドロップダウンメニュー」という記事のコメント内で、amazonのようなメガメニューをCSSだけで作れないのかというコメントいただきましたので作ってみました。 CSSだけですのでメニューの現れ方など若干違います。box-shadowとborder-radiusはIE8以下で、矢印を作るための擬似要素はIE7以下で非対応ですが、メニューとしての機能は果たせます。 では... 続きを読む

擬似要素とCSS3を使ってリストメニューを楽しくデザイン｜Webpark

2013/07/22 121 users Webpark Ｔｒａｎｓｉｔｉｏｎ jQuery CSS

画像を使わずに擬似要素を使ってリストメニューをデザインしてみました。CSS3のtransitionを使った動きのあるメニューも作ってみました。 まずはHTMLから <ul class="rist-menu" id="list1"> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">jQuery</a... 続きを読む

擬似要素と擬似クラスの違いやダブルコロンとシングルコロンの話｜Webpark

2013/07/01 88 users Webpark visited hover active 復習

私のように趣味でWebサイト作成をしていると基礎が抜け落ちていたりするので復習を兼ねて擬似要素と擬似クラスの違いについて考えてみました。 擬似クラス（Pseudo-classes） 擬似クラスには次のようなものがあります。何気なく使っていますが、擬似クラスという名称を知らない方も多いのではないでしょうか。 :link :visited :hover :active で、擬似クラスはCSS3で大幅に... 続きを読む

floatを解除する方法のまとめ: 小粋空間

2013/03/27 678 users float 小粋空間 After CSS まとめ

CSSのfloatを解除（クリア）する方法をまとめてみました。 以前、floatを解除するテクニックとして以下の記事をエントリーしたのですが、その後色々なテクニックがあることに気がつきました。 CSS の after 擬似要素で回り込みを解除する ということで、そもそものfloatの問題（というか仕様）と、その対処方法についてネットで調べた情報を一通りまとめました。 １．floatにより親要素の高... 続きを読む

[CSS3]擬似要素とbox-shadowを駆使したエレメントデザインのコツ(サンプルコード付き) - WEBCRE8.jp

2013/02/13 56 users CSS 用途 box-shadow 表現 使用用途

先日擬似要素のまとめを書きましたが、用途の説明に留まり不完全燃焼だったので…今回それを使った表現のコツなんかを突き詰めてみました。サンプルコード付きですー！★ 擬似要素で出来ることを考えていて、先日[CSS]擬似要素の実用的な使用用途のまとめ – WEBCRE8.jpというまとめを書きましたが、やっぱり自分で作ったりしたかったですｗ 今回は実際に擬似要素などを使ってCSSのみでどんな表現が出来るの... 続きを読む

[CSS]擬似要素の実用的な使用用途のまとめ - WEBCRE8.jp

2013/02/04 223 users CSS WEBCRE8.jp 使用用途

::before、::after…便利だけど敬遠していた人もいると思います。IE6,7のシェアの減少、スマートフォンの流行によって使いやすくなってますよー★ (個人的な)Graceful Degradationへのシフト webcre8はこれまでIE対応の必要な環境で仕事をしていた為あまりIE6,7で使えない技術には興味が湧かなかったんですが、ずっと考えているブログのリニューアルのことを考えている... 続きを読む

CSSの擬似要素を使った見出しデザイン｜Webpark

2013/01/27 633 users before After Webpark ボーダー 見出し

このブログの見出しはシンプルなんですが、CSSの「:before」や「:after」など擬似要素を使えば色々と装飾ができますので今回は8つのサンプルを紹介します。 HTMLはすべてHタグだけです。特に意味はありませんが今回のサンプルはh4タグを使っています。 「:before」「:after」やボーダーで表現する三角形の使い方など慣れない方もいるかもれませんので、その都度簡単に解説していきます。「... 続きを読む

劇的！（でもない）before after 擬似要素の使い方まとめ

2012/09/20 20 users before after スポンサードリンク ゴロドク 普段

【スポンサードリンク】 劇的！（でもない）before after 擬似要素の使い方まとめ 【HTML/CSS】 wrote on 2012/09/20 http://blog.56doc.net/Entry/415/劇的！（でもない）before after 擬似要素の使い方まとめ 自宅を匠にまかせて改造するほどの資金力なんてとうてい捻出できないゴロドクです、どうも。 普段コーディングするのにb... 続きを読む

[CSS]なにかと便利な「:before, :after擬似要素」の使い方を基本からマスターするためのチュートリアル | コリス

2012/07/18 574 users コリス before hover チュートリアル CSS

HTMLを汚したくない、もしくは変更することができないときに役立つ擬似要素の基本的な使い方から応用テクニックまでを紹介します。 擬似要素で、div要素の両端にシャドウをつけたり、一枚の画像を重ねたりすることができます。 擬似クラス、擬似要素 擬似要素の記述は一つのコロンを使用し、「:before, :after」となります。 コロンを使用するものは他に、「:hover」などの擬似クラス、CSS3で... 続きを読む

[CSS]ちょっと面白いMedia Queriesの使い方 -表示サイズで異なるメッセージを表示するテクニック | コリス

2012/03/18 39 users コリス Row CSS div span

実装 「BE なんとか」のメッセージは、「BE」だけ固定で、「なんとか」はMedia Queriesと擬似要素を使用して配置しています。 HTML h2要素をdiv要素で内包したシンプルな実装です。 <div class="row"> <h2>Be <span></span></h2> </div> 空のspan要素はCSSでコンテンツをレンダリングするために使用します。 CSS Media Qu... 続きを読む

[CSS]ol要素に頼らないナンバリングするスタイルシートのテクニック | コリス

2011/12/06 74 users コリス counter-increment CSS ol要素

下記は各ポイントを意訳したものです。 ol要素を使用しないでナンバリングをするコンテンツは、例えばデモにあるようなFAQのリストです。 このFAQのリストは、dl要素で実装されています。 dl要素でナンバリングしたデモページ ※実装は、下記で紹介。 ナンバリングの実装には擬似要素と「counter-increment」を利用しており、アイデアの元となったのは「Styling ordered lis... 続きを読む

CSSメモ: Firefox 1.5での新機能

2005/11/02 78 users active 行間 新機能 Firefox 1.5 目次

CSSメモ: Firefox 1.5での新機能 擬似要素に対しては、CSS3仕様書で用いられているコロン2つ (::) という表記を用いています。 コメントなどについては日記のコメント欄 (返信するボタンかコメントのリンク「返信する」で、入力フォームが表示されます) へどうぞ。 目次 親要素の:activeへ継承するようになった 擬似要素::first-letterを含む行の行間を修正 [New!... 続きを読む