frontendmemo

このサイトは、「html、css、js、ruby,ツールなどについて、自分が覚えたこと、またはいつも忘れて調べることを書き溜め、それが結果といて勉強したての初心者の方や自分と同じような技術レベルの人の助けになることを目的とするWebログ」、略してブログです。挨拶→http://frontendmemo.hatenablog.com/entry/2016/06/25/115845

z-indexの数値をルール化するための覚書き

css

z-indexの数値っていくつに設定したらいいかわからないですよね。適当な数値を入れてしまうと特に大規模サイトはカオスになってどこかで崩れます。崩れ方もグレーの背景にその要素だけ前に出てたりして目立つ&かっこ悪いです。 z-indexのルール z-indexのル…

【CSS】clip-pathの対応ブラウザ、generateツール紹介

cssのclip-path プロパティは、表示領域を決められるcssのプロパティです。 つまり指定した位置を結んだ図形が表示され、その外側が非表示になります。 このcssを使えばどんな形にでもくり抜くことができるためデザインにこだわったサイトやアイディア次第で…

photoshopスライス3パターン使い分け

オブジェクトを選択し新規レイヤーに基づくスライスを選択(ショートカットあり) 新規レイヤーを複製してトリミング(透過があるとき便利) レイヤーの目のところをalt+クリック(透過がありスライスを保存したいとき便利) photoshopのスライスの方法を3パ…

a要素とbutton要素の使い分け

先日下記のツイートをしましたが、多くのいいねをいただいたので記事にしたいと思います。✅button要素とa要素の使い分けa要素はリンク、button要素は何らかのアクションが発動すると覚えれば使い分けはokなんですが、アクションを発動するけどa要素を使う場…

【CSS】画面サイズに合わせてfont-sizeの拡大縮小

css

レスポンシブサイトやLPの背景にテキストが乗ってる場合に画像の拡大・縮小に合わせてテキストも拡大・縮小させたい時に使います。 画面サイズに合わせてfont-sizeの拡大縮小することが可能です。計算式は下記です。 font-size: calc({フォントサイズ}vw * 1…

Vue.js ラジオボタンで要素を切り替える方法

Vue.jsを使用してラジオボタンを切り替えた時要素を切り替える方法について解説します。下記のようになります。 デモ See the Pen xBddEg by funclur (@funclur) on CodePen. htmlは通常通りですね。 <div id="app"> <label><input type="radio" name="radio" v-on:change="handler" value="a" checked> A</label> <label></label></div>