[B! 表示][css] kanariya_wwwのブックマーク

Paged.js - Webページを電子書籍風に表示するCSS Paged MediaのPolyfill MOONGIFT

Webページでテキストコンテンツを書籍のように楽しめるようにする、そのための仕様がCSS Paged Mediaです。まだ仕様が固まっていませんが、標準化されればコンテンツの楽しみ方がまた変わってくるでしょう。いち早くCSS Paged Mediaを体験したい方はPaged.jsを使ってみましょう。 Paged.jsの使い方これはePubファイルという訳ではありません。HTMLに書かれた文書をこのようにページ区切りにして表示できます。日本語や画像も表示できます。目次も出せます。数式表示も対応。 CSSなのでダイナミックにレイアウト変更できます。 Paged.jsではページサイズ、ヘッダーやフッターの設定、マージンなど細かな指定が可能です。ePubファイルを読み込んで表示する機能もあります。小説サイトのコンテンツもPaged.jsで表示すれば楽しみ方が増えることでしょう。 Page

kanariya_www 2019/12/17

リンク

表示領域にピタッと移動！CSSでスクロールスナップを実装しよう

2019年1月11日 CSS 画面領域いっぱいに広がるフルスクリーンレイアウト。近年ではよく目にしますね。スクロールした時に画面にピタッと各エリアを表示させたい時に使えるのが「CSSスクロールスナップ」です。JavaScriptなしでスクロール位置を調整してくれますよ！ ↑私が10年以上利用している会計ソフト！スクロールスナップの基本 See the Pen scroll-snap basic demo by Mana (@manabox) on CodePen. スクロールすると、各エリアの中途半端な位置で停止せず、エリアがすべて見える位置でピタッと止まりますね！このデモの構成を見ていきましょう： HTML ピタッと移動させたい各要素を親要素で囲みます。この例では親要素に「container」、子要素に「area」というクラスをつけました。 <div class="container"

kanariya_www 2019/01/12

リンク

CSSを使ってテキストカラーを半々に表示させる方法 - NxWorld

CSSを使ってテキストカラーが左右または上下で異なるカラーで表示されている見栄えを実装する方法を紹介します。以下でそれぞれ紹介しているCSSは必要な記述のみ抜き出した形で紹介しているので、デモと全く同じ見栄えにしたい場合はCodePenの表示を切り替えてCSSを確認してください。また、position: relative;とdisplay: inline-block;の指定は使用箇所によっては別の値に変更したり不要なら削除してください。疑似要素とdata属性を使うこのデモで表示されているようにテキストのカラーが中央を境に半々になっているのを疑似要素とdata属性を使って実装する方法です。まずHTMLは下記のようなものを使用し、その際に中に記述する内容と同じテキストをdata属性（data-split）にも記述します。

kanariya_www 2017/10/03

リンク

日本らしさを表現！CSSで文字の縦書きに挑戦！

2017年8月24日 CSS 日本の書籍は元々上から下、右から左という縦書きで書かれてきました。しかしWebサイトでは横書きが基本なので、縦書きを取り入れることで日本らしさやWebサイトの個性を引き立てられます。かつてのWebサイト制作では縦書きが難しく、多くの場合画像を使って表示されてきましたが、CSSでも縦書きが実装できるようになりました！今回はそんな縦書き表現に注目したいと思います！ ↑私が10年以上利用している会計ソフト！縦書きにするには縦書きを設定するのはとっても簡単！縦書きにしたい箇所にCSSで writing-mode: vertical-rl; を記述します。この「vertical」が縦、「rl」が右から左（Right to Left）という意味です。また、IE用には別の書き方になります。 -ms- というベンダープレフィックスを付け、tb-rl（上から下、右から左＝

kanariya_www 2017/08/24

リンク

文字詰めできるCSSのfont-feature-settingsが凄い！日本語フォントこそ指定したい自動カーニング - ICS MEDIA

游ゴシックではプロポーショナルメトリクスは効果的 WindowsやmacOSに搭載されている游ゴシック体は、仮名が漢字に対してかなり小さめにデザインされています。游ゴシック体ではヒラギノ書体より字間が開いて見えてしまうため、プロポーショナルメトリクスを活用する効果は大きいです。 Webフォントにもプロポーショナルメトリクスは効果的デバイスフォントだけでなく、Webフォントでもプロポーショナルメトリクスに対応したOpenTypeフォントがたくさんあります。Webフォントに関しては記事「Webフォントサービスの徹底比較！和文フォントが使える5つのサービスの利点まとめ」を参考ください。 ▲左側は未指定（和文等幅）の状態でカタカナの開きが大きい。右側はプロポーショナル字形を適用した状態で、カタカナが詰まっている。対応環境：ほぼすべてのブラウザで利用可能これだけ便利なCSSですが、どれだけの

kanariya_www 2016/12/02

リンク

CSSで縦横比を維持しながら横幅いっぱいに背景画像を表示させる方法 - NxWorld

特にレスポンシブやスマホサイトで見かけることが多い、どんなウィンドウサイズでも縦横比を維持しつつ横幅いっぱいに画像を表示している見栄えですが、imgであれば画像を配置してwidth:100%;とheight:auto;辺りを指定しておけば簡単に表示させることができても、その見栄えを背景画像を利用してとなると先述した方法では実装できません。背景画像でも同じように縦横比を維持しつつ横幅いっぱいに画像（背景画像）を表示させたいときは以下の方法で実装することができます。実装には背景画像を表示したい部分に下記のようなCSSを記述することで縦横比を維持しつつ横幅いっぱいに背景画像を表示させることができ、以下のサンプルは表示させたい画像が「横幅：1000px　高さ：300px」の画像だった場合のものになります。 .background { width: 100%; height: 0; paddin

kanariya_www 2016/05/15

リンク

CSSでのフォント指定について考える（2014年）｜DTP Transit

結論1：アルファベットでウエイトなしだけでも、すべてのモダンブラウザに対応可能です。ただし、旧バージョンのSafariやFirefoxでは対応がまちまちであったため、それらに対応するには併記します。游ゴシック体と游明朝体はWinodws 8.1では日本語名、OS X Mavericks（10.9）ではアルファベット名のみの対応であるため、両名の併記が必要となります。疑問2：「ヒラギノ明朝 Pro」と「ヒラギノ明朝 ProN」のどちらを記述すればいいのでしょうか。「ヒラギノ明朝 Pro」を改訂し、JIS X 0213:2004の例示字体に対応させたものが「ヒラギノ明朝 ProN」です。参考：ウィキペディア - ヒラギノ「ヒラギノ明朝 Pro」と「ヒラギノ明朝 ProN」の違い CSSのfont-family指定はこれで決まり！（2013春）結論2：新しい字形に対応をしている「ヒ