webサイトのデバイスフォントを美しく見せるために有効な設定まとめ
●自動カーニングCSS設定 本文にやると詰まりすぎるのでletter-spacingで字間を少し広げるといい。 文字詰めできるCSSのfont-feature-settingsが凄い！日本語フォントこそ指定したい自動カーニング https://ics.media/entry/14087 ●「」などの頭を揃えるjs 「」や『』など約物が半角にできる、Yaku Han JP のご紹介 http://taneakashi.ad-mk.com/yaku-han-jp-introduction.html ●テキストの箱組みを綺麗にするcss設定 テキストの箱組みをしたい時に使えるCSS https://www.pressmantech.com/tech/coding/1551#css-text-justfy ※英語の改行でおかしくなるのでこれを効かせたら 長めの英語の文言周りをチェックする必要がある
Webブラウザにおける文字のアンチエイリアスの現状の最適解｜dwango creators' blog（ドワンゴクリエイターズブログ）
Winでは基本的にフォントレンダリングをCSSで制御することは出来ません。また、スマートフォンのブラウザもほとんど制御できず、基本的にグレースケールで表示されることが多いようでした。 MacではSafariのみがグレースケールですね、これが原因で「Safariで文字が細く見えてしまう」現象が起こっています。 デバイスのdpiによる見え方 このまま各ブラウザでアンチエイリアスを揃える設定しても良いのですが、1x, 2xの解像度による見え方を見ていきましょう。(今回はThunderbolt Display = 109ppi, MBP Retina Display = 220ppiで検証・比較。実際に表示した画面をスマホのカメラで加工が無いようにして撮りました。) 109ppi(Thunderbolt Display) 220ppi(MBP Retina Display) 以下のことがわかります
font-familyに指定する2017年春の決定版メモ - Qiita
Webサイトで表示するフォントは閲覧するユーザーの環境に依存しています。 グラフィックデザインメインの方でWebサイトのデザインを行う場合などの Webサイト制作をしたことのない人だと知らない方が多いので前置き書いてます。 例えば、『ヒラギノ』を指定していても、ユーザーの環境になければ別のフォントが表示されてしまいます。 同じく、明朝体はもっと悲惨でWindowsではキレイに表示できるのがわりと最近です。 （なので基本的に日本語のWebサイトってゴシック体が多いですよね。MS明朝は超汚いので過去に全てのテキストを明朝体でデザインされた時には投げたくなりました。） ゴシック体の指定はこれ！ body { font-family:-apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI","Noto Sans Japanese
CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選
今回は見出し（h1〜h6タグ）のオシャレなデザインサンプルを68つ紹介します。CSSコードをコピペすればそのまま使うことができます。もちろん自分好みにカスタマイズして使って頂いても構いません。
CSSのクラス名を決めるときに使うリストをつくりました
CSSは設計手法も大事ですが、どういう単語で名前をつけていくかも大事だと思っています。 個人個人でばらつきが出るところでもありますし、「単語名 英語」で検索をして探した単語を使ったけど若干意味合いが違ったといったこともあると思います。 クラス名を決めるためのリストを見かけることもありますが、英単語の読みは書かれていても意味合いが書かれていることは少ないように思います。 自分の確認用と、チームで製作するさいの基準になるようなものを作りたいと思い、単語とその意味を短くまとめてGitHubにあげています。 CSS クラス名リスト | GitHub 以下投稿時の内容です。 名前をつけることは難しいですが、とても重要なことです。 CSSには設計思想が必要ですが、実践するにあたり、名前と機能の意味がとおり、名前のつけ方にブレがないようにするべきです。 このドキュメントでは、CSSでよく使われる単語を分
CSSの単位（em, rem）を使った、これから取り入れていきたい実装テクニックのまとめ
CSSの相対的な単位（em, rem）を使って、Webページで使われるUIコンポーネントのさまざまなサイズを変化させるスタイルシートのテクニックを紹介します。 em, remは文字の大きさだけでなく、画像やアイコンのサイズ、背景、フォーム、ボタン、配置など、さまざまな指定に利用できます。 Building Resizeable Components with Relative CSS Units 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 フォントのサイズを変化 縦と横の比率を維持したボタン 縦と横の比率を維持した画像 box-shadowを使ったボーダーの幅と高さ アイコンの幅と高さ、そして間隔も キャプション付き画像 装飾された背景 アイコン付き検索フォーム チェックボックスで実装されたトグル ブロックの一行の長さ ボタ
JavaScript無し！CSSで簡単に動きを実装するテクニックまとめ
作成：2016/07/19 Web制作 > JavaScript無しで実装するCSS小技まとめです。細部にちょっとした動きを取り入れたいときなど、知っておくと便利なエフェクトをまとめました。 エンジニア速報は Twitter の@commteで配信しています。 メタ言語でなく、CSSで見たい方は「View Compiled CSS」でコンパイルして見てください。 ※CodepenのURLの末尾に「?editors=1100」を付与するとhtml/cssのみの編集画面で閲覧できるので、今回は全てのURL末尾に付与してます。 モーダルウィンドウ チェックボックスを使わないタイプ。擬似クラスである:targetを使い、アンカーリンク（#シャープ）にスタイルを適用しモーダルウィンドウを表示しています。 .foo:target { color: red; } :target擬似クラスを利用すれば、J
より良いCSSを書くための様々なCSS設計まとめ
CSSは誰でも簡単に自由に書けるのですが、好きなように書いていると「ここを変更したら、違うところが崩れた」といったようにすぐに破綻してしまいます。 さらに、複数人で書いている場合は、各々が好きなように書いて読むだけでも苦痛なCSSが出来上がってしまいます。 そこで、これらの問題を解決するために考えられたのが「CSS設計」です。 今回は記事が長くなり過ぎるので、CSS設計の概要のみを説明し、参考となる公式ドキュメントへのリンクを記載しました。 CSS設計とは CSS設計は、CSSを記述する時のルールとなるものです。プロジェクト毎に適したCSS設計を採用することで、「良いCSS」にすることができます。 最近では、命名規則はBEMで、構成はSMACCSのように各CSS設計の概念を取り込んだオリジナルの規約をつくるといったことも多いようです。 「良いCSS」とは 「良いCSS」の定義として、おそら
意外と今っぽくなる、CSSやjQueryで実現するエフェクトまとめ
作成：2016/02/8 更新：2016/06/29 Web制作 > CSSやjQueryで実現する、今までにないようなエフェクトを実現するために知っておくと便利なエフェクトをまとめました。トレンドをおさえた最近のものを厳選してピックアップ。ファーストビューなどで、一味違った面白さを出したいときに。 エンジニア速報は Twitter の@commteで配信しています。 セグメンテッド コントロール pocketなどに見られる「リスト・タイルビュー」など表示形式の切り替え。コンテンツを切り替えるセグメンテッド コントロール（SegmentedControl）。少し古い記事ですが、他になさそうだったので。 Blueprint: View Mode Switch もうひとつはcodepenから。 See the Pen DropDown2Segment by ActiveCodex (@Acti
テキスト周りのスタイリングに使えるCSSプロパティやスニペット - NxWorld
スタイリングといっても見栄えを大きく変えるとかではなく、ほとんどがただのプロパティ説明みたいな感じになっていますが、サイト制作時に覚えておくとテキスト周りをいろいろと変更できるCSSのプロパティや使用する頻度が高そうなスニペットみたいなものをひと通りまとめてみました。 紹介するもの全てがひと通りのブラウザで自由に使えるわけではありませんが、上手く利用すれば今まで画像を使用していた見栄えをCSSだけで再現できたり、複雑な組み方をしたりJavaScriptを使って実装していたりしたものがCSSのみでシンプルに実装できたりします。 November 27, 2015 追記 前川（@maepon）さんが、このエントリーでは記載していなかった各種プロパティのブラウザ対応状況についてまとめてくださいました。 OS・ブラウザの種類やプレフィックスの有無、Can I useの各種プロパティページへのリンク
イージング関数チートシート
イージング関数は、時間の経過に伴うパラメーターの変化率を指定します。 現実の物体は、即座に動いたり停止したりすることはなく、一定の速度で動くこともほとんどありません。引き出しを開けるとき、私たちは最初に引き出しをすばやく引き出し、それが外に出てくるにつれてゆっくりと動かします。床に向けてなにかを（例えばペンのような）放すと、最初に重力によって下に向かって加速し、床に当たった後上に跳ね返ります。 あなたの必要なイージングを選択して、あなたのプロジェクトの中で使用してみてください。
そろそろ真面目に、HTMLで帳票を描く話をしようか - Qiita
帳票といえばPDFとして生成するのが一般的でしょうか? でも、2015年の今、あえてHTMLで描くのがホットです(個人的に)。ミリ単位で設定された高度な帳票も、CSSを駆使して簡単に作ることができます。業務システムでもモダンブラウザを選択することが増え、@pageなども積極的に使えるようになったこと、SPA(Single Page Application)の台頭、いろいろと条件が揃ってきました。 書いてたら結構長くなっちゃったので、さくっとコードだけ見たい方は、Paper CSSリポジトリをどうぞ。 はじめに HTML帳票のメリット 2015年現在、HTML帳票を選択する幾つかのメリットがあります。 ライブリロードで、リアルタイムなスタイル調整 バックエンドではなくフロントエンドで生成できる 前者は、gulpやGruntの普及で、CSSにしろHTMLにしろ、リアルタイムにプレビューできる環
Webプログラマから見たiOS9 Safari9のCSS/JavaScriptなどの新機能解説 - Qiita
iOS9がリリースされ、iPhone6sも発売され、iOS9 Safari9で使える新機能をWebプログラマ目線で使ってみたいものをいくつか試してみました。iOSはアップデートの進捗がわりと良いので、新機能でもモバイルサイトであれば積極的に使える…はず。デスクトップ版の方は…お察しください。 ぶっちゃけ今回はそこまで目玉機能はなく、地味です。地味ですが、SafariでWebアプリを作れるようになりそうな気配がどことなくするようなしないような感じの内容です。残念ながらServiceWorkerには対応していないので、それに対応してくれたらもっとアレなんですが。 iOS Safari9の新機能（OSX版含む） CSS系 backdropフィルタ対応 新し目のiOSやOSXとかのメニューバーが半透過されるあれが作れます。要は背景要素に対してフィルタがかけられるプロパティです。綺麗で良いですね。
とほほのBootstrap 3入門 - とほほのWWW入門
このページは 「Bootstrap 3」について説明しています。Bootstrap 4 については、「Bootstrap 4入門」を参照してください。 Bootstrap は、スマートフォンなどのモバイル端末にも対応し、レスポンシブデザインを採用した HTML, CSS, JavaScript フレームワークです。 Twitter 社で開発され、最初は「Twitter Bootstrap」と呼ばれていましたが、現在は「Bootstrap」となりました。 ライセンスは MIT License で、商用利用も可能です。 現時点(2018年5月6日)の最新バージョンは 4.1.1 です。 Bootstrap 2 と Bootstrap 3 以降では一部互換性の無い機能があります。 2018年1月に Bootstrap 4 も正式リリースされました。
最近のJS&CSSアニメーションライブラリまとめ - Qiita
最近のHTML5アニメーションについてのまとめです。 まとめを紹介する前にCSS3アニメーション vs JSアニメーションのパフォーマンスについての有名な海外の記事を紹介します。 http://davidwalsh.name/css-js-animation 大雑把に内容を要約すると、以下のようなお話です。 - DOMを操作したJavaScript AnimationよりCSSの方が早い - ただしCSSにも色々欠点がある(GPU負荷が大きい、ブラウザの対応とか) 結論: JavaScriptでアニメーションを最適化できるライブラリを使いましょう！ この記事で紹介されている最適化を施したJSライブラリはGSAPとVelocity.jsです。大規模なアニメーションでない場合はVelocity.jsがおすすめのようです。 もちろん上記の他にも色々ライブラリは存在し、使用用途により最適なライブラ
あまり知られていないCSSの12の事実(続編) | POSTD
1年以上前に、私は最初の 12 Little-known CSS Facts（あまり知られていないCSSの12の事実） を発表しました。SitePointで最も人気の高い記事となりました。この記事を書いた後も、私はCSSのアドバイスやちょっとした情報の収集を続けました。だって、大ヒット映画も必ず続編を制作するじゃないですか。 注釈 SitePoint/ Natalia Balska によるイラスト それでは、早速今年も開発のヒントになる12の事実について話しましょう。もちろん、中にはもうすでにご存じのこともあると思いますが、この中で初めて知ったという事実がありましたら、コメントでお知らせください。 1. border-radius プロパティに”スラッシュ”シンタックスを使用できる事実 このプロパティについてはSitePointに4年以上 前に書いた のですが、この機能が存在することを、未
CSS3のブレンドモードが素敵！ 新プロパティmix-blend-modeを使いこなそう – ICS MEDIA
mix-blend-modeというCSSのプロパティ。これはDOM要素を重ねた時の見え方を指定するCSSプロパティです。デザイナー視点だとブレンドモードはごく当たり前に使う機能のひとつ。mix-blend-modeはウェブの表現手法が広がり、デザインの自由度が広がる注目すべきCSSプロパティです。本記事はmix-blend-modeの魅力と使い方をデモを交えて紹介します。 そもそもブレンドモードとは？ ブレンドモードはクリエイティブな表現を作る上での基本機能のひとつです。Adobe PhotoshopやIllustrator、After Effects、XDや、Figmaで搭載されていて、レイヤーを重ねたときにどのように重ねて表示するかの設定になります。ソフトによっては「ブレンドモード」や「描画モード」「モード」と異なる名称が使われていますが、機能としては同じものになります。本記事ではCS
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS Snippets - NxWorld
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
http://blog.nakatanigo.net/archives/50768904.html