css [CSS]CSSセレクタ・擬似要素・擬似クラスを知るとCSSコーディングが楽しくなる
今回は基本に立ち返り、よく使う、基本的なセレクタ・擬似要素・擬似クラスのおさらいをしてみようかと思います。
CSSセレクタって何？
例えばCSSで「段落の文字色を赤にする」ときに「～の」、要するにこの場合「段落の」の部分がセレ...
css
css 
css [css, filter, brightness, invert]hover時に画像の色を白くする
今回はCSSネタ。
シゴトでデザイナーさんから「このカラフルなアイコン(画像)にマウスを乗せたら白くできます？」という質問があったので。
はい、やってみよー
filterを使うと画像を白くできる！
filterプロ...
css [js, jQuery]グローバルメニューを固定する2パターンをメモっとく
久しぶりのjsネタ（女子小学生とは違う）
最近のWEBは縦の長さが長くなったと思いません？パララックスとか使うと特に。そんな時のユーザビリティに役に立つ「グローバルメニューをページ上部に固定する」jsを2パターンメモっておこうと思い...
css [CSS]CSSの小技をメモる Part.1
ネタがありすぎて何を書けばいいか分からなくなったので自身たまにしか使わないCSSの小技をメモるという逃げ。
誰かの役に立てばいいのだけどとは思ってませんので参考、コピペは自己責任で。
ってCSSなので大したことは起きないと思います。...
css [JavaScript,CSS,WordPress]WordPressの案件で素人がtable使っても同じようにデザインできる小技
WP案件あるあるネタを。
WordPressの案件で納品後、お客様が編集する際に表を利用するときの対応方法をひとネタ書きたいと思います。
どうにかして表を入れてもらっても見た目の部分はスマートに行かないものです。多くのエンドユ...
css [WordPress, CSS]WordPressの記事本文で1行目を1文字空けたい日本人だからw
なんだかタイトルどう付けていいか分からなくなったよ。これでもSEO考えてるよっ。
で、何がしたいかと言うと・・・
WordPressのエディタは1行目にスペース入れると勝手に削除
してしまいます。
まぁ仕方ないっち...
css [CSS]そろそろFlexboxをまとめてみる Part.3
今回は「flex-grow」「flex-shrink」「flex-basis」3つと「flex」ショートハンドについてやってみようと思います。
基本のhtml
まずは基本になるhtmlから
<div class=&...
css [CSS]そろそろFlexboxをまとめてみる Part.2
前回の続きです。
Flexboxの色々なプロパティを見ていきましょう。
flex-direction
「flex-direction」は子要素の配置方向を指定するプロパティです。
基本になるhtml
<div cla...
css [CSS]そろそろFlexboxをまとめてみる
IE10のシェアも全体の1%を切ったということで、そろそろガンガンFlexbox使ってもいいかなと思ったり思わなかったり。
この辺、クライアントにも依存するところはありましてね、柵やらなんやらね。
とは言いましても一般的な話...
css [CSS3]CSSだけでアコーデオンっぽいメニューを作ってみたよ！
サイトのグローバルメニューをおもしろくしてみたい！
動きがあったほうがおもしろいんじゃね？
というわけで作ってみました。
See the Pen flex by mitsuki sagayama (@sagayama) on ...