style01

作ったスクロールエフェクトを集めました。 スクロールすると要素が出現します。 スクロール値によってjsでクラス’is_visible’をつけています。 そのあとのアニメーションはすべてcssです。   See the Pen 180727_スクロールエフェクトいろい…

SP用の横から出てくるナビゲーションを作成しました。 今回はjQuery入れなくても動きます。一応jQueryで書いた時も載せています。 クラスと要素の追加・削除処理のみjsで行い、残りは全てcss。ハンバーガーメニューの動き部分もcssです。クラス付け替えてるだけ。 デモページ HTML [cra…

justify-content:space-betweenがうまく効かない時は justify-contentはflexboxのコンテナの配分を定義するプロパティ。 私がよく使うのはspace-between。最初と最後のアイテムを端に寄せ、あとは均等に配分してくれるとてもいい子。 でもたまにうまく…

先日公開したコーダーのための計算機で使用したタブメニューです。レスポンシブ対応。今回のメニューは５個なので、スマホサイズの時のタブサイズは、１〜３番目の横幅は33%、４番目と５番目の時は横幅50%です。 See the Pen 180327 by nekuta (@nekuta) on CodePe…

デザインをhtmlにするときに楽したいなという願望から生まれた計算機です。 ・とりあえず２で割ってくれる電卓 ・px→em変換 ・px→rem変換 ・行送り計算 ・トラッキング計算 こんな感じにまとまって言います。 楽するところは楽していきたいですね。 コーダーのための計算機 https://dem…

実は最近cssだけで連番を作ることができることを知りました。ずっとjsで書いていた自分が恥ずかしいです。 See the Pen 180302 by nekuta (@nekuta) on CodePen. 使うのはcounter-incrementというプロパティ。 連番表示させる繰り返し要素(今…

みんな大好きfontawesome！ beforeやafterの擬似要素でfontawesome使えるのだから、inputのplaceholderにも使えるんじゃないかと思ったらやっぱり使えるみたいですね。今回使うのは旧バージョンの4.7。最新バージョンの5はうまく表示してくれませんでした。 See…

cssだけで画像を変に引き延ばさずにトリミングする方法です。 デモページ １　画像をbackgroundとして使うタイプ imgとして置かずに、divなどのbackgroundとして使うタイプです。background-sizeをcoverにして、背景領域を完全におおう最小サイズで出しています。 H…