vwを使って、ウィンドウ幅によらずデザイン通りの比率にしたいときのmixin小技
どのウィンドウ幅でもデザイン通りの比率に見えるようにコーディングしたいというときがあると思います。 単位vwを使えば再現可能なのですが...
「HTML/CSS」一覧
CSSでテキストに枠をつけるジェネレーター（枠が太くても大丈夫）
CSSでテキストに枠をつけるためには、text-shadowを複数指定して「影を枠っぽく見せる」ことで再現しますが、枠が太くなるにつれてちょ...
CSSだけで埋め込みGoogle Mapをモノクロに
Google Mapの埋め込みの見た目を変えるためには基本的にはGoogle Maps APIを使用してプログラムを書く必要がありますが、全...
表の項目名とか１行のテキストを両端揃えにする CSS + jQuery
表の項目名を、両端揃えにするやつやりたい！ こういうやつ！ なるほど、やってみましょう。 実装 真っ先に思い...
PC/スマホで改行する位置を変えるCSS小技
センター寄せのテキストなんかで、PC向けとスマホ向けで改行位置が違う場合、テキスト自体を出し分けている人が多いようなので、もっと簡単にできる...
absoluteで上に乗った要素が邪魔でクリックできないときのCSS小技
ボタンの上とかにabsoluteで何か乗ってて、ボタンがクリックできない！ そんなときに使える小技です。 実装 absol...
formでボタンを押したらその値を送信しつつ即画面遷移
formって、textとかcheckboxで入力した値を「送信」ボタンを押したら送信しながら画面遷移…という感じが多いと思うんですが、そうで...
【IE対応】CSSで画像をトリミングする「object-fit」まとめ
レイアウトのサイズに合わせ、出力する画像を複数用意する時代はもう終わりを告げた。 今は「object-fit」というウルトラ便利なcs...
【CSS】なぜidや要素そのものにスタイルをつけてはいけないのか
例えば以下のようにhtmlがあったとき、 idや要素自体にスタイリングするのはご法度とされています。 さてなんでダメなんでしょう...
【CSS】子要素にmarginがあると、親要素を突き抜けてしまう問題の対処法
コーディングしているとき、子要素の下にmarginをつけているのに、親要素の下側に余白ができない場面に遭遇したことはないでしょうか？ ...
ユーザーの使いやすさから考えるtarget=”_blank”の使いドコロ３点
リンクを別タブで開くことのできる「target="_blank"（以下タブゲラ）」、つけるかつけないかについてはずっと意見が分かれていて絶え...
スライス卒業！イラレからスマートに画像を書き出す方法３パターン
昨今、XDでWebデザインをするのがだいぶメジャーになってきましたが、イラストレーターでデザインをする人はまだまだ普通にいますので、コーダー...
CSS 「n番目の要素」を指定できるnth系疑似要素のまとめと注意
「n番目の要素」という指定ができる":nth-child(n)"系の疑似要素ですが、注意しなければいけない点と、案外知られていない便利なバリ...
【JavaScript】iPadだけviewportを固定してPC表示にするやつ
レスポンシブだけど、iPad（タブレット）ではPCの縮小表示にしたい。 あると思います。 僕は基本WordPress使いなので、ph...
【Sass】BEMとSMACSSをなんとなく使っていい感じのCSS設計
CSS設計、やってますか？ 何も考えずに命名したりCSSを書いていると、拡張性や管理性を損なうとんでもないものが出来上がります。 作った...
flexで３列以上横並びにするとき、左右をコンテンツ端に合わせるやり方
cssのflexを使って、３列以上の幅が均等な要素を横並びにして左右にぴったりくっつけたい場合、以下のように記述すればＯＫ。 ...
レスポンシブコーディングで早めに知っておきたい便利な小技まとめ
コーディングを始めたての頃は、レスポンシブでかなり苦戦すると思います。僕がWeb制作をやりはじめたころは、まだレスポンシブはそこまで一般的と...
スマホのときだけ電話番号をリンクにしたいときのCSS小技
電話番号をタップしたら電話できるようになる これですが、そのままだとPCでもクリックできちゃう。 実はSkype...
aタグの中にdiv入れていいんですか！？消えたブロック要素の概念
突然ですが、HTML5ではaタグの中にdivやsection等のブロック要素を入れてもいいということを知っているでしょうか。 HTML...
初心者がコーディングを３倍速くするために知っておきたい６つの技術
HTML/CSSコーディングは、ある程度慣れてくると、どうやって書けばこのデザインを実現できるかという思考から、どうやれば早く効率的に終わら...