レスポンシブでちょうどいいバランスのとれた文字を表示するには？
今日はRichard Rutterさんのタブレットの文字表示についての投稿をご紹介いたします。画像と同じようなアプローチでテキストサイズをちょうどよくする方法のようです。それではどうぞ。 読みやすいテキストに設定するとき、ビューポートサイズに合わせてあらかじめ適切に定義されたサイズで本文と見出しを設定するのが一般的です。 rem単位を使ってテキストサイズをページのデフォルトとユーザーに合わせ調整する手法です。 画像に関してはビューポートに依存して可変しますが、同じアプローチをテキスト表示に用いることができます。 サイズと形状を画面やブラウザウィンドウに合わせて固定する手法をご紹介します。 ビューポート単位の導入 CSS3では、新しいビューポート単位が登場しました。ビューポート単位は、ピクセル、em、パーセンテージなどの長さの単位が使用できます。ビューポート単位は次の4つ。いずれも1の値はビ
画像をタイル画風にする
Result 画像の上に要素を重ねてdisplay:grid;でグリッドと枠線を作り中を空にすればタイル画のようなものが作れます 枠線はすき間をgrid-gapで作り、background: white;で白い枠線を表現します。 その際、画像部分に影響が出るので子要素にbackgroundを設定し、mix-blend-mode:lighten;で画像が表示されるようになっています。 設定適当なのでモニタサイズ次第ではズレると思います。親の高さを決める等、便宜調整下さい csssection article {/*タイル作成*/ position: absolute; top: 0; width: 100%; background: white; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 20px; mix-bl
マウスストーカーがすごいサイトまとめ | バシャログ。
マウスストーカーとは、画面上のカーソルにキラキラ追従していたあれです。個人サイトが隆盛を極めていたときによく見たあれです。サンプルは以下のリンクより参照されたし。 マウスストーカー１■文字■ 複数色のキラキラ すっかり見なくなったと思っていたら、最近このマウスストーカーを取り入れているサイトをちらほら見かけるようになりました。気になったデザインのものをいくつかピックアップしたいと思います。チェケラ！ Blend | A creative agency イタリアのクリエイティブエージェンシーのサイト。ここでは透過された円が追従してきますが、リンク可能なエリアに入ると大きくなって矢印が現れます。トップのマウスオンでぼかしが鮮明になる挙動もいい。 BASIC™ | Culture Manual 上のgifはメンバー紹介で、詳細がある場合は＋のオブジェクトが、閉じる時は×が追従します。他にも下に要
Lighthouseとは？SEOに便利なチェックツールを紹介します | 株式会社PLAN-B
今回はサイトの評価を確認することができるLighthouse（ライトハウス）についてご紹介します。 Lighthouse（ライトハウス）で現状サイトがどのような評価を受けているのかを把握してSEOに役立てていきましょう！ またLighthouse以外で確認しておくべき内部対策項目はこちらからご確認ください。 また、そのほかお役立ち資料をまとめておりますので、こちらからご活用ください。 Lighthouse（ライトハウス）とは？Lighthouse（ライトハウス）とは、Webアプリを監査するためのツールです。特にPWA（プログレッシブウェブアプリ）を中心としたサイトの評価を簡単に確認することができます。 LighthouseはもともとGoogleが公式で運営していたツールであり、GoogleChromeの拡張機能を使って使用します。 Lighthouseの主な項目は、PWAに必要な品質項目を
Google画像検索にキャプションが付く、キャプションはtitleタグから取得
[レベル: 初級] モバイルの画像検索の結果に出てくる画像にキャプションを表示するようにしたことを Google はアナウンスしました。 キャプションには、その画像が掲載されているページの title タグが用いられます。 キャプションが付いた画像検索の結果、キャプションは title タグから 画像検索すると、検索結果に出てきた画像にキャプションが付いています。 URL の上にその画像の説明文らしきものが見えますね。 「らしき」と表現したのは、必ずしもその画像を直接表した説明文とは限らないからです。 キャプションは、その画像が掲載されているページの title タグから取得されます。 もっとも title タグからとはいえ、その画像のヒントになっているように見えます。 キャプション付きの画像検索は、Android 版および iOS 版の Google アプリとブラウザからのモバイル検索で
スクロール時にちょっとしたアニメーションを加えたいときに使えるJSライブラリ「ScrollReveal」
シンプルなスクロールアニメーションを実装したいときに使えそうなライブラリを見つけたのでご紹介します。「ScrollReveal 」というやつです。 無意味にたくさん動くアニメーションはUIやユーザの情報消費の邪魔をするので好きではないですが、単調なページをより魅力的に見せるための「気の利いた」アニメーションならいいですよね。 ScrollRevealのいいところ 3.3KB（minified / gzipped）で軽量 単体で動く。jQueryなどのライブラリに依存しないし別途CSSも必要ない 実装がシンプル アニメーションを細かく調整できる まだ開発中でv4がそろそろ完了しそう？（2017年内にと書いてあります が…） animate.css のようなCSSアニメーションのライブラリと連携させるスクリプト や他にもAOS とかDelighters.JS とかもあるんですが、単体でサクッと
サイドに固定できるナビゲーション実装「Bootstrap Navbar Sidebar」 – bl6.jp
Bootstrap Navbar Sidebarは、サイドに固定できるBootstrapによるナビゲーションを実装できます。左右のどちらでも配置できるほか、上部に配置することも可能です。固定されたナビゲーションを設置したい人には最適ですね。 以下、Bootstrap Navbar Sidebarの実際のデモページになります。 デモ デモページを読み込むとナビゲーションが左側に表示されています。下へスクロールすると分かりますが、ナビゲーションはそのまま固定表示されているので、いつでも手軽にアクセスできます。 左側に配置するFIXED LEFTのほかにも、上部に配置するFIXED TOPや右側に配置するFIXED RIGHTといったボタンも用意されているので、こちらも同時に確認してみてください。 使い方も分かりやすく、トップに表示させたい場合は「.navbar-fixed-top」、左の場合は
カテゴリー・タグ・カスタムタクソノミーに画像を登録して出力できるようになるWordPressプラグイン「Categories Images」 | TechMemo
Categories Imagesは、カテゴリーやタグ、カスタムタクソノミーに画像を登録できるようになるWordPressプラグインです。登録して紐づけた画像はテーマ内で出力することができます。 Categories Imagesのインストール インストール手順は以下の通りです。 Categories Imagesをダウンロードします。 ダウンロードしたファイルを展開し wp-content/plugins にアップロードします。 管理画面の[プラグイン]ページで、Categories Imagesを有効化します。 Categories Imagesの設定 WordPress管理画面の[設定] – [Categories Images]にて、画像登録を除外するカテゴリーを選択できます。 チェックを入れたカテゴリーやタクソノミーでは、画像の登録項目が出てこなくなります。 カテゴリー・タグ・タ
うぇぶもよう
viewport/css viewportを指定してレスポンシブに適用させます。 meanmenu.cssを読み込みます。 ファイルの階層はそれぞれの環境に合わせて変更してください。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"> <title>Title</title> <link rel="stylesheet" href="./css/meanmenu.css" /> </head> HTML HTMLは共通で良いので、お好きな書き方でOKです。 多階層メニューにしたい場合は、liタグの中にさらにulを入れることによって 自動的に「＋」ボ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
