BLOG

ブログ

2019.04.5.

固定ヘッダも考慮してページ内リンクをスクロールさせる「smooth-scroll.js」

LPなどで見かけるページ内リンクのスムーススクロール。簡単に実装でき、気が利いている感も出るのでよく使います。もちろん、ユーザーがページ内での現在地を見失ったりしたいよう、ユーザビリティも考慮していますが。ただ、そのページのヘッダが固定されていたりすると結構面倒。ヘッダの下にリンク先のコンテンツが隠れてしまったり・・・ 今回紹介するsmooth-scroll …

2019.04.4.

実際のボタンを押したような効果を実装するCSS

クリックできることをわかりやすくするCSSは色々ありますが、個人的に一番わかりやすいのはhover時にボタンが沈み込むアニメーションだと思っています。今回はそれをCSSだけで実装する方法を紹介します。 実装方法 HTML HTMLは下記のようにします。サンプルなんでシンプルな形ですが、基本的にはどのようにしても大丈夫です。 <p class=&quot …

2019.04.3.

サイトやページのメインビジュアルにつかえる筆記体フリーフォント10選

サイトやページを開いたユーザーが一番最初に目にする部分。つまりファーストビューにほぼ必ず入ってくるのがメインビジュアルです。ぱっと目に入り込んできたメインビジュアルで、そのサイトやページのデザインに対する印象が決まると言っても過言では無いと思っています。 今回はそのメインビジュアル部分でつかうのにピッタリな筆記体のフリーフォントをいくつか紹介します。簡単な英 …

2019.04.2.

matchMediaをつかってデバイスサイズ別のjavascriptを適用させる方法

cssであればメディアクエリをつかってデバイスサイズに応じたcssを適用させることは簡単です。では、javascriptの場合はどうでしょう? javascriptではwindow.matchMediaというメソッドをつかって、設定したブレイクポイントごとに適用させるjavascriptを変えることができます。 他にも色々方法はあると思うのですが、このwin …

2019.04.1.

Flexboxのjustify-contentを指定したとき最後の行を左寄せにするCSS

コーディング時の要素の横並び。僕がWEBデザインやコーディングを覚え始めたときはfloatをつかうのが定石でした。 それが近年、CSS3が出てきてからはflexboxをつかうようになりました。floatをつかった方法よりも汎用性が高く、簡単ですし、clearfixも必要ない。 そんなflexboxですが、アイテムの数と列の数の組み合わせ次第では、どうしても最 …

2019.03.31.

サイトやページに埋め込むYouTube動画をレスポンシブ対応させる方法

サイトやページの制作時に、YouTube動画を埋め込むことが多々あります。今回は、YouTube動画をPCでもタブレットでもスマホでもきれいに表示出来るように、つまりレスポンシブ対応するためのCSSを紹介します。 実装方法 HTML まずはYouTubeから、動画の埋め込み用ソースを取得して、下記のように<div class="movie&q …

2019.03.30.

スマートフォン表示のときtableを横にスクロールさせる方法

サイトやページで横長のtableをつかっているとき。PC表示時であればそれほど悩むことはないですが、スマホでの表示方法に悩むことがあります。きちんとデバイスの幅に合うよう組み方を変える方法もありますが、場合によっては肝心の表の見やすさが損なわれてしまうときもあると思います。かといって、対策を何もしないとページ全体からtableだけ突き抜けてしまって不格好な表 …

2019.03.29.

フリーランスWEBデザイナー、忙しいときこそ体を動かした方が良い

フリーランス、個人事業主のWEBデザイナーとして働き始めてから半年以上経ちました。ここ何ヶ月かありがたいことにもの凄く忙しく、誇張表現抜きで「寝ているか、食事をしているか、仕事をしているか」という感じでした。 会社員時代に続けていた朝のジョギングも全く時間が取れなくなってしまい、今年に入ってから3か月近く全く運動をしなくなってしまっていました。元々ダイエット …