プラカンブログ ホームページ制作に関する役立つ記事からおもしろ記事など。 プラスデザインカンパニーの スタッフによるブログです。
【CSS】今更ながら、フレックスボックスの使い方をまとめてみた。｜プラカンブログ | WEB制作会社プラスデザインカンパニー
プラカンブログ ホームページ制作に関する役立つ記事からおもしろ記事など。 プラスデザインカンパニーの スタッフによるブログです。
文字詰めできるCSSのfont-feature-settingsが凄い！ 日本語フォントこそ指定したい自動カーニング - ICS MEDIA
游ゴシックではプロポーショナルメトリクスは効果的 WindowsやmacOSに搭載されている游ゴシック体は、仮名が漢字に対してかなり小さめにデザインされています。游ゴシック体ではヒラギノ書体より字間が開いて見えてしまうため、プロポーショナルメトリクスを活用する効果は大きいです。 Webフォントにもプロポーショナルメトリクスは効果的 デバイスフォントだけでなく、Webフォントでもプロポーショナルメトリクスに対応したOpenTypeフォントがたくさんあります。Webフォントに関しては記事「Webフォントサービスの徹底比較！ 和文フォントが使える5つのサービスの利点まとめ」を参考ください。 ▲左側は未指定（和文等幅）の状態でカタカナの開きが大きい。右側はプロポーショナル字形を適用した状態で、カタカナが詰まっている。 対応環境：ほぼすべてのブラウザで利用可能 これだけ便利なCSSですが、どれだけの
flexboxのバグに立ち向かう（flexboxバグまとめ） - Qiita
注）本文中の「コンテナ」「アイテム」について 本文中でいう「コンテナ」「アイテム」は、flexコンテナとflexアイテムのことを指しています。 コンテナ display: flexや、wrap指定などをする 複数のアイテムを含む アイテム flex: 1 0 0%などの指定をする 1. アイテム潰れる問題（Safari） Chrome Safari 潰れてますね。 起きる条件 Safari なぜ コンテンツの最小サイズを尊重してくれない模様 どうすればいいのか flex-shrinkに0を指定 flex-basisにautoを指定（デフォ値なので、指定がなければそのままでOK） Safari10にて修正済み（つまり、SierraとiOS 10以降では対応不要） 2. align-items:center はみ出す問題 Chrome IE11 はみ出てますね。 起きる条件 IE10-11 f
IE11で謎のテキスト余白? 原因は游ゴシック体・游明朝体とIE11の相性だった！
2017年4月28日 IE11でテキストに起こる謎の余白の原因は？ WEBサイトのhtmlをコーディングする際、IE11だけテキストに謎の余白に遭遇する事がある。本文などのテキストでは気づきにくいが、見出しなどデザイン上、罫線や背景色などでテキストを囲った状態の場合、テキストの上下の余白がIE11だけ違う事に気づく時がある。いつも起こっているわけじゃなかったので、原因がどこにあるのかわかるのに少し時間がかかりました。 調べた結果、フォントの指定を「游ゴシック体・游明朝体」にしている時に、IE11で謎の余白が空いてしまう事がわかったので、その現象の詳細と対策法を書きたいと思います。 游ゴシック体・游明朝体はWindowsとMac両方にインストールされている貴重なフォント 游ゴシック体・游明朝体は、MacではOSX Mavericksから、WindowsではWindows8.1から標準でインス
游を font-family で指定した時に IE で生じる謎余白対策 | Thought is free
IE で游ゴシック・游明朝を指定した時に IE で生じる謎の余白 いまだに、IE 11 のシェアが多いので、 この手のバグへの対策は、メンドー臭い。 IE の場合、「メイリオ」以外だと、line-height が効かなくなるバグもある。 単純な話、IE では、font-family の先頭で「メイリオ」フォントを指定しないとダメですね。 （同じ Microsoft でも Edge なら、メイリオ以外でも問題ない） 参考サイト 最近は、Windows と Mac で同じフォントにするため、「游ゴシック」を指定してるサイトもあるが、その場合は、IE だけメイリオにする CSS ハックした方がいいと思う。 例えば、font-family を ↓ このように指定してるなら、 body { font-family: "游ゴシック",YuGothic,"メイリオ",Meiryo,"ヒラギノ角ゴ Pro
[CSS3] 心地よいCSS3アニメーションを実装する - YoheiM .NET
こんにちは、@yoheiMuneです。 最近githubで人気になっているtobiasahlin/SpinKitというレポジトリ（Starが2,500個も！）では、 CSS3アニメーションを使った心地よいアニメーションのサンプルが公開されています。 今回はそのレポジトリの内容を拝借して、各アニメーションの実装内容を学んで、自分も書けるようになろうというためのブログです。 SpinKitで公開されているCSSアニメーション 公開されているものは執筆時には全部で８個あり、http://tobiasahlin.com/spinkit/でデモが確認出来ます。 綺麗なものがいっぱいあって、個人的には好きです。 以下ではそれぞれのアニメーション内容を拝借して、実装内容を学びたいと思います。 <style> .spinner1 { width: 30px; height: 30px; backgroun
![[CSS3] 心地よいCSS3アニメーションを実装する - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/53d67670ab9a4d96908df62696837d176e920257/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F297.jpg)
連続したCSSアニメーションの実装 - Qiita
はじめに keyframesを使ったcssでのアニメーションは、gif画像の埋め込みと比べると読み込み速度も早く、パフォーマンスも良く、動きも滑らかです。 gif のようにどのようなアニメーションでも表現できるわけではありませんが、 1. 出現時のみ強調されたアニメーションが表示される 2. 以降、別のアニメーションがループして表示される といったようなカスタマイズが可能なので、その実装方法を紹介します。 サンプル だいぶ荒いですが、こんなイメージです。 コードは JSFiddle で公開していますので、実際の動作もこちらでご確認ください。 コード説明 ある程度カスタマイズできたほうが便利だと思うので、軽く説明します。 html
【CSSアニメーション】ひとつの要素に複数のキーフレームを追加 | ヨウスケのなるほどブログ。
ひとつの要素に2つのキーフレームの定義するのにメモ animation:で定義を2つ書くと上書きになってしまいますが、ひとつの要素に複数のアニメーションキーフレームを定義するのはカンマ区切りで良いのですね .sample{ animation: key1 5s infinite, key2 1s infinite; }これで、こっちは形状や位置、こっちは色とか２つの時間軸で要素をアニメーションさせる事ができますね、わーい @keyframes key1{ 0% {} 25% {} 50% {} 75% {} 100% {} } @keyframes key2{ 0% {} 25% {} 50% {} 75% {} 100% {} }animationプロパティ関連はこちら
CSSで横並びレイアウトを実現簡単にするinline-blockとは？ | 侍エンジニア塾ブログ | プログラミング入門者向け学習情報サイト
なんてことありませんか？そんなあなたにとってもおすすめ、インラインブロック要素をご紹介します！この記事では
【CSS3】話題のパララックス効果をスクリプト無しで実装する方法。
昨年、2013年度あたりから普及し始め、今年も大流行したウェブデザインのテクニックの１つである［パララックス・スクロール］をCSS3だけで実装する方法を紹介します。 パララックス（Parallax）とは日本語に訳すと「視差効果」を意味し、主にマウスの動きに合わせて特定の要素のスクロール量をコントロールして、ウェブサイトに奥行きや遠近感を表現する手法です。 「パララックス・スクロール」の他に、「パララックス・デザイン」や「パララックス・エフェクト」とも呼ばれています。 まずは動作のサンプルをご覧ください。 CSS3 パララックス・スクロール：動作サンプル 上記サンプルサイトでは、Internet Explorer 以外のモダンブラウザ（Safari、Google Chrome、Firefox、Opera等）をお使いの場合、「開発モード」のボタンをチェックするとレイヤーが3D化されるので構造を
CSSのみでお洒落なアニメーション付きのモーダルウィンドウを作ってみた
前々から「CSSだけでお洒落なモーダルウィンドウ作れないかな～」と思って色々と試していたんですが、ようやく納得のいく出来の物が完成したので載せておきます。 PureCSS ModalWindow 仕組みは後で解説するとして、とりあえず作ったサンプルを5つ紹介します。 一応、画面外をクリックしてウィンドウを閉じる機能にも対応していますし、ピュアCSSのモーダルウィンドウにしては珍しい閉じる際のアニメーションも実現できました。 通常パターン See the Pen PureCSS ModalWindow (Normal) by Kuzlog (@Kuzlog) on CodePen. 上から See the Pen PureCSS ModalWindow (Top) by Kuzlog (@Kuzlog) on CodePen. 拡大 See the Pen PureCSS ModalWind
写真が画面の端から端へ流れる無限ループするアニメーション 4種 | TIPS
For web developers. React, Next.js, TypeScript, JavaScript, CSS and Web Development.
CSSアニメーションがGPUで処理されているか確認する方法
CSSアニメーションによるGPU処理 昔はWebサイトでアニメーションを行う際はJavaScriptがよく使用されたが、現在はCSSアニメーションが使用されることが多い。 理由はJavaScriptは主にCPUで処理するが、CSSはGPUを併用して処理するため処理負荷が軽く、スマートフォンなどの低スペックな端末でもスムーズにアニメーションを行うことができるからだ。 ただし、CSSを使用してアニメーションを行っていても、正しく使用しないとGPUで効率的に処理することができない。 GPU処理の確認方法 Chromeの場合はまずChrome Developer Toolを開いて3点ボタンをクリックしてRenderingを選択する。 RenderingタブでPaint flashing、Layer borders、FPS meterにチェックを入れるとアニメーション部分に枠線が付き、fpsやGPU
【JavaScript・CSS】スクロールしたらフワッと要素を表示させるスクリプトの使い勝手を良くしてみる – ノーズブログ
HTML・CSS 基本のHTMLとCSSを用意 まず適当なHTMLとCSSを用意します。 <body> <header> <h1>ヘッダー</h1> </header> <section> <div>要素1</div> <div>要素2</div> <div>要素3</div> <div>要素4</div> <div>要素5</div> <div>要素6</div> <div>要素7</div> <div>要素8</div> </section> <section> <div>要素9</div> <div>要素10</div> <div>要素11</div> <div>要素12</div> <div>要素13</div> <div>要素14</div> <div>要素15</div> <div>要素16</div> </section> </body> body { margin: 0;
[フロントエンド] ブラウザレンダリングの仕組みを理解して、ブラウザに優しいJavaScriptを書こう - YoheiM .NET
[フロントエンド] ブラウザレンダリングの仕組みを理解して、ブラウザに優しいJavaScriptを書こう こんにちは、@yoheiMuneです。 ブラウザのレンダリングの仕組みはHTML5 RocksやHow browsers workで詳しく解説されてきました。しかしそれらはとても詳細で、読破して理解するのは大変です。 今回のブログでは手軽にレンダリングの概要を理解できるように心がけました。またより詳しく学べるようなリンクも記載しました。 そしてブラウザのレンダリングの仕組みを理解した上で、どのようなJavaScriptを書くべきかについても記載しました。 目次 ブラウザのレンダリングの仕組み この章では、HTMLとCSSが読み込まれてから画面に表示されるまでの間に、ブラウザがどのような処理を行っているかを説明します。 ファイル読み込みから表示までの一連の流れは以下図の通りです。 [1]
![[フロントエンド] ブラウザレンダリングの仕組みを理解して、ブラウザに優しいJavaScriptを書こう - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/705cdef7654f2f96a242f9a2834ce643b78de75c/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F336.jpg)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【Animate.css】アニメーションサンプル一覧 | なるほど。
CSS3 - html5のvideoタグで縦幅を指定したときに動画の中心を表示領域の中心にしたい｜teratail
CSSでスタイルをIEのみ・Firefoxのみ・Chromeのみ・Safariのみに適用する方法 | TechMemo
CSSアニメーションとjQueryで簡単に作れるローディング画面サンプル | 福岡のホームページ制作・SEO対策ならアイドットデザイン
CSSで中央寄せする9つの方法（縦・横にセンタリング）
