CSS小技集シリーズの第3弾！「【第2弾】少しのコードで実装可能な20のCSS小技集」から3年が経ち、さらに便利でサクッと使えるコードが続々登場！特にこれまではJavaScriptで実装していたものがCSSだけで実現できるようになったりと、進化が凄まじいです。初心者さんからベテランさんまで要チェック！
続きを読む

Webフォントとしておしゃれなフォントが使えるサービスで人気なのがGoogle Fontsですね。無料で手軽に使える便利サービスです。しかし、Webフォントを提供しているのはGoogleだけではありません。デザイナー御用達のAdobeも「Adobe Fonts」を提供しています。今回はこのAdobe Fontsの使い方を紹介します。
続きを読む

以前Vue.jsでカラーコードからRGB値にサクッと変換する方法という記事で紹介した、「Quick HEX to RGB」では、値をクリックすればクリップボードにコピーする機能をつけています。これはclipboard.jsを使っているので、基本的な使い方と、あまり説明のないツールチップの加え方を紹介します。
続きを読む

色関連の解説をしたり、記事を書く時に、カラーコードのRGB値をダーッと一覧で見たい！という機会がちょこちょこありまして。グラフィックツールや既存のWebサイトでもできますが、もっとサクサク進めたくなって「Quick HEX to RGB」というツールを作りました。Vue.jsを使ってみたので、制作方法をかいつまんで紹介します。

続きを読む

Webサイトを作るとき、通常色の指定にはカラーコードを記述しますが、決められた色名称を使うこともできます。色を自分で一から探すより、リストの中から選ぶ方がイメージにあう色が探しやすいよなぁ…という場面があったり、単純に色の名前からカラーコードやRGB値を知りたいということが時々あったので、一覧にまとめました。新たに加わった「rebeccapurple」も一覧に入れていますよ。
続きを読む

画面領域いっぱいに広がるフルスクリーンレイアウト。近年ではよく目にしますね。スクロールした時に画面にピタッと各エリアを表示させたい時に使えるのが「CSSスクロールスナップ」です。JavaScriptなしでスクロール位置を調整してくれますよ！
続きを読む

長い文章や補足説明をアコーディオン（折りたたみ）にしたい時ってありますよね。そんな時に使える details と summary タグを紹介します。CSSなしでも実装できますが、CSSを加えてより素敵な表現をする方法も挑戦しましょう！
続きを読む

Webサイトのアクセントに、ちょっとした動きをつけたい時ってありますよね。一から作り込むのは大変ですが、プラグインを使えば意外と簡単に実装できますよ。夏らしい涼し気なデザインになりそうです。サンプルがうまく動かない時はデモ画面右上の「EDIT ON CODEPEN」をクリックして別タブで表示してみてください！
続きを読む

CSSで文章を縦書きにする表現、少しずつ目にする機会が増えてきたように思います。しかし、縦書きのコンテンツをレスポンシブ対応させるのはなかなか大変。様々なサイトを見てみましたが、文章を横にスクロールしたり、文字サイズを調整してなんとかモバイルに対応しているようです。今回はたった一行でそんな問題を解決する方法を紹介します。
続きを読む

Vue.jsはサクッと小さく始められるJavaScriptのフレームワークです。「びゅー」と読みます ;) これまでWebデザイナーがjQueryで作成したような動きもVue.jsでも加えられるのですが、jQueryとは違ってHTMLに条件文を加えたり、アニメーションをCSSで設定することで、JavaScript自体のコードをあまり書かなくても実装できちゃいます。jQueryからの乗り換えを考えている方はぜひ検討してみてくださいね！
続きを読む