Web制作、Webサービスに関する技術やノウハウを発信するコラムサイト

年々増えていく、フォントサイズを指定する単位。 「px」を基本として、「vw」と「vh」が使えるようになったと思ったら、気が付くと「rem」という単位もあったり、煩雑としてきました。 今回は私がレスポンシブサイトを構築する際、一番楽だと思うフォントサイズ設定を紹介します。 決め手は「rem」と「vw」 CSSでまずは基準となるフォントサイズを決めます。下記のように設定します。 そして、個々のCSSを記述していく際、すべてのfont-sizeで「rem」単位を使用します。 PC […]

今日はvideoタグを好きな形に切り抜きしてみましょう。 実際に表示するとこんな感じです。 ＜円形に切り抜いた場合＞ どうやって切り落とす？ これが実は、CSSの「clip-path」という1行を追加するだけで切り落としが可能です。 ＜CSS＞ circleは円形です。 他にも、楕円形・五角形など、色々な形にすることができます。とても簡単ですね。 ジェネレーター 手打ちで数値を調整してもいいのですが、ジェネレーターを使ってしまった方が簡単です。 Clippy: https:/ […]

表示速度などの問題でwebp形式を使いたいけれど対応していないブラウザもあるし、レスポンシブの問題もあるしなーという時はpictureタグでうまく切り替えます。 コード とりあえずコードです。 第1候補で『sample.webp』を表示させます。画面を縮めた時にはほかの画像を表示させたいので、メディアクエリでmin-widthを設定します（次で設定するmax-widthの1つ前の数字）。 第2候補で画面を768px以下に縮めた時の画像を『sample_sp.jpg』表示します […]

私が初めてAMP対応に着手しようとした時、複数のサイトを渡り歩いて情報を集めながら進めていかなければならない状態でした。「で、結局どうすればいいの」となったので、忘備録も兼ねてまとめていきたいと思います。速くなる仕組みなどは今回は省略します。 作る前に知っておいてほしい仕様 項目が多くなってしまったのですが、着手する前にAMPの制約を確認しましょう。 作成方法にお急ぎの方はジャンプ AMPの公式仕様に沿ってタグを記述する必要がある AMPの公式仕様はこちらのサイト（https […]

昨今、SEOで絶対に無視できないのがAMP。 表示速度を爆速にする分、様々な制約が設けられていますが、Google Chartsなどの部分的なものであれば同ページ内に表示が可能です。 部分的なJS表現をiframeで追加する 分かってしまえばやり方は単純。AMP非対応の箇所のみiframeを使用します。 下記は弊社で運営している飲み会マッチングサービスのノミトモ。飲み会の募集が下にするする流れていくようなアニメーションを採用していますが、オリジナルで組んだJSアニメーションな […]

ページのbackgroundにふわふわと泡が漂うような表現ができる「bubbly-bg.js」を紹介します。 公式デモサイト 使用してみたところ、仕様は以下のようです。 ・背景は固定。スクロールのある縦長のページでも、100vw、100vhでfixed。 ・スマートフォン端末でも動作。（とりあえず手元のiPhoneXとiPadで動作確認しました。） ・泡の個数、色、向き、速さ、大きさ、ぼかし具合、アルファ値、背景グラデーションなど細かなカスタマイズが可能 ・背景のグラデーショ […]

キャンセルの方法 スマホやタブレットなどのタッチデバイスで、ソフトウェアキーボードが立ち上がるのをキャンセルしたい場合、inputに「readonly=”readonly”」属性を追加すると、キーボードが非表示になります。 利用シーンとしては、iPadでツールを作成したい場合などに使えると思います。 予約システムなどであれば、電話番号の入力や電卓機能を独自のテンキーを実装できると入力しやすいですね。 ただreadonly属性を付与しただけだと単純にソフ […]

マウスホバーするとフキダシでテキストが表示される「jquery.balloon.js」。 シンプルで大変使い勝手の良いJSですが、単純に呼び出しただけではタブレットやスマートフォンなどのタッチデバイスで動作がうまくいきません。 書き方を少し工夫して、スマートフォンやタブレットのタッチデバイスに対応させます。PCではマウスホバー、タッチデバイスではタップで表示非表示するようにします。 [ 公式JSファイルのDLはこちらから ] [ 私が作った簡単なデモはこちら ] 使い方 01 […]

今回は知っておくと便利なcssの小技 part16 セレクタの使い方編です。 バックナンバー 知っておくと便利なcssの小技 part15 知っておくと便利なcssの小技 part14 知っておくと便利なcssの小技 part13 子セレクタ（親要素 > 子要素）の使い方 子セレクタとは、対象の親要素の直下にある子要素に対してのみスタイルを適用するセレクタです。 孫要素は対象になりません。 今回は親要素の直下の子要素に対してのみ、文字を赤色にしてみます。 HTML CSS 隣 […]

長くDreamweaverを使っている方こそ、意外と知らないこの機能。 最近といっても2017年時点に追加された機能なのですが、マルチカーソルという機能です。 なんとカーソルが伸びる！ Alt を押しながら縦にドラッグで伸びます。始点からしっかり引っ張るのが上手に伸ばすコツです。 増える！ Ctrl を押しながらクリックで好きな位置にカーソルを増殖できます。 Emmetなどは有名なのでみなさんご存じかと思うのですが、細かな機能のアップデートは見逃していたりするのはよくあること […]

「やめて！そのボタンは連打しないで！」 そのつらい気持ち、よくわかります。 今回はフラグを立てて、ボタン連打の対策をやってみましょう。 jQuery ＜処理のルート＞ cancelFlag という変数を定義しておき、値が「0」の場合は処理開始、「1」の場合は処理キャンセル、という判定を追加するだけです。意外とシンプル。 上記の例だと、クリックイベントが着火した直後に cancelFlag に「1」を代入、フラグを立てます。 そして処理が終了する際に「0」を代入し、フラグをおろ […]

コーディングをしているとよくお世話になるfirst-childとfirst-of-typeセレクタ。 ただfirst-childとfirst-of-typeの違いって最初のうちってよくわからないですよね。 今回はその2つの違いについてお話しようと思います。 first-childが効かない？そんな時はfirst-of-typeで！ 例えば上の画像のようにpタグの中で、1番最初にあるものに色を付けたいとします。 とりあえずHTMLは以下のような感じです。 HTML このときなん […]

現象 flexboxを使用したページをIEで印刷すると改ページで要素が消える、というバグに遭遇しました。 最新のIE11でも再現したので、おそらくIEのバージョン関係なく起こっているかと思います。 このように1ページ目は平気なのですが、flexboxを使用した要素が改ページ後に真っ白になってしまいます。 対策 印刷用のcssの設定でflexbox部分の代わりにfloatやinline-blockを使用します。 作りによっては高さが揃わない等の悩みが出てくるかもしれませんがmi […]

hreflangというタグ、ご存知でしょうか？実はこのタグ、多言語サイトを作る時に重要な動きをしてくれるタグなんです。 どうして必要なの？ 機会損失を防ぐ 例えば日英の2言語に対応しているサイトがあったとして、英語圏のユーザーがサイトを訪問した際に日本語が表示されてしまい、読めずに離脱してしまう…そんな状況。 そこでhreflangタグの出番ですが、このタグの作用は検索結果の画面で現れます。検索を行ったユーザーが使用する言語に合わせて、検索結果が返されるようになります。英語圏 […]