BOOK Studio947
狩野祐東・狩野さやか著書

コラム

CSSで変数を使う var()

いまでもSassなどを使えばCSSの値を変数として保存しておくことができるが、ネイティブのCSSでもできるよ、という話。ちなみにIE11では動かないけど、そろそろいいよね。それ以外のほとんどのブラウザでは機能する。 CS… [more]

  • 2019-12-17 17:00

text-decorationに関連する新プロパティ

テキストに下線(または上線)を引く、text-decorationに関連する新プロパティがある。現在のブラウザの多くが下線の色や線の形状(実線、破線など)を設定できる。 テキストの下線の色、線の形状を設定するには テキス… [more]

  • 2019-10-24 12:07

リンクに伸びる下線をつけるには

ときどきみかける「テキストにホバーしたら下線が横に伸びる」リンク。簡単に見えますが意外と面倒で、ちょっと長いCSSを書かないといけません。

caniuse.comをターミナルで使える、コマンドラインツールがあった

caniuse.comをターミナルで使える、コマンドラインツールを発見しました。

HTMLやCSSの書き間違いをチェックする「バリデーションサービス」

「HTMLやCSSをちゃんと書いたはずなのにうまく表示されない」ということがよくあります。HTMLやCSSが
「思ったように表示されないなあ」というときは、バリデーションサービスを使ってみましょう。

パターンで覚えるflexbox(4)─flexboxの応用例─

flex boxの記事を紹介するシリーズ、今回で最後です。最後はflexboxの応用例を紹介します。第2回で紹介したボックスを横に並べるテクニックの発展系で、より高度なレイアウトを実現します。

  • 2016-04-27 8:00

パターンで覚えるflexbox(3)─コラムレイアウトをしてみよう─

flexboxの実践的な使い方シリーズ。第3回目の今回は、ページレイアウトをしてみます。2コラムレイアウト、3コラムレイアウト、モバイル向けシングルコラムレイアウトを作成します。そして、これらのレイアウトをレスポンシブで変化させる方法も紹介します。

  • 2016-04-20 8:00

パターンで覚えるflexbox(2)─ボックスを横に並べる─

flexboxの実践的な使い方4回シリーズの第2回。flexboxの中心となる強力な機能「親要素のスペースに合わせて子要素を伸縮させてピッタリ収める」を使って、ボックスをきれいに並べてみます。

  • 2016-04-13 8:00

パターンで覚えるflexbox(1)─ナビゲーションメニューの作成─

新しいCSSの機能の中でもとくに大物なのがflexbox。普及すればいままでのCSSレイアウトの手法が大きく変わります。このflexboxの実践的な使い方をこれから4回シリーズで紹介していきます。今回は比較的簡単な、flexboxを使ったナビゲーションメニューの作成方法です。

  • 2016-04-07 8:00