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崩壊...
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から<divclass="flex-layout"><div...
css[CSS]そろそろFlexboxをまとめてみる Part.2
前回の続きです。Flexboxの色々なプロパティを見ていきましょう。flex-direction「flex-direction」は子要素の配置方向を指定するプロパティです。基本になるhtml<divclass="default-flex">...
css[CSS]そろそろFlexboxをまとめてみる
IE10のシェアも全体の1%を切ったということで、そろそろガンガンFlexbox使ってもいいかなと思ったり思わなかったり。この辺、クライアントにも依存するところはありましてね、柵やらなんやらね。とは言いましても一般的な話でIE10のシェアが...
css[CSS3]CSSだけでアコーデオンっぽいメニューを作ってみたよ！
サイトのグローバルメニューをおもしろくしてみたい！動きがあったほうがおもしろいんじゃね？というわけで作ってみました。SeethePenflexbymitsukisagayama(@sagayama)onCodePen.Codepenでは分か...