Galaxy S22 Ultraがドコモで80万円？ どういうことなのか調べてみたら……みなさん、こんにちは。 Galaxy S21使いのjdash2000です。本日はGalaxyネタです。 ドコモでGalaxy S22 Ultraが80万円！？？ そんな噂を聞いて早速Googleで調べてみました（野次馬）。 続きを読む
なぜSassが必要なの？
私は毎年Twitterで「SassなどのCSSプリプロセッサを使用していますか？」というアンケートをとっています。その際、「まだSassを使っていない方がいるのか」と驚く方がいる一方で、「なぜSassが必要なのかわからない」、あるいは「Sassを使ったけど必要性がわからないので使うのをやめた」という返信をいただくことがあります。 私自身、はじめてSassを知った時にはその必要性がよくわからず、すぐに自分の仕事に取り入れることができなかったのでそういう方の気持ちはよくわかります。 そこでこの記事では、私が最初にSassを必要ないと思ったのになぜ今はSassを使用しているのか、なぜ必要だと思ったのかということについてお話ししたいと思います。 Sassとは何か この記事を読んでいる方はすでにご存知の方も多いと思いますが、SassとはCSS拡張メタ言語と呼ばれるCSSを便利に記述するための言語のひ
文字詰めできる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
（2019年更新）【CSS】最新のclearfixがどんどん短く。Bootstrap 2/3/4のCSSを見て
概要 ▶ 回り込みを解除するCSSのclearfixはBootstrapのバージョンが上がる度に短く。対応ブラウザーの違いによって変わってきたようです。 みなさん、Bootstrapを使ってWeb制作していますか？ 私の勤めている会社もMovable Typeで管理しているサイトはほとんどBootstrapのフレームワークに移行して、制作とメンテナンスがかなり楽になりました。Bootstrapはドキュメントが豊富なので、参考になる情報が多く便利ですね。 さて、そんなBootstrapですが、Bootstrap 3.xのCSSとBootstrap 4（4.0.0-alpha.2）のCSSを見ていたら、float要素を解除するclearfixのCSSが「ああ、ここまで短くなったのか～」と感じたので、紹介します。 2019年5月のBootstrap 4の最新版がBootstrap 4.3.1がリ
Webフォントを滑らかに表示させるCSS 2016年版 IE 11/Edge/Chrome/Firefox（Windows）
目次 ブラウザーによってWebフォントの見え方が違う 各ブラウザーの実際の画面で見え方をチェック font-smooth -webkit-font-smoothing transform: rotate(0.001deg) text-shadow: 0 0 0.1px rgba(0,0,0,0.5) CSSを適用した状態で各ブラウザーの実際の画面でチェック このブログ内の関連ページ 参考にしたページ サンプル画面として使ったサイト この記事へのネットの反応まとめ ●ブラウザーによってWebフォントの見え方が違う 今更ですが、日本語のWebフォントを会社のサイトで使い始めました。 元来、Webブラウザは端末にインストールされているフォントを呼び出し文字を表示する。端末のフォント如何では、Webデザイナーが意図しないWeb表示がなされてしまい、またフォントに関するWebデザインに制約が生じてし
Bootstrap 4 alpha
The Bootstrap Blog News and announcements for all things Bootstrap, including new releases, Bootstrap Themes, and Bootstrap Icons. Today is a special day for Bootstrap. Not only is it our fourth birthday, but after a year of development, we’re finally shipping the first alpha release of Bootstrap 4. Hell yeah! Bootstrap 4 has been a massive undertaking that touches nearly every line of code. We’re
Webを読みやすくするEvernote Clearlyの表示フォントを游ゴシック体・游明朝体にする設定
概要 ▶ Clearlyの表示フォントはCSSで設定できます。これを游ゴシック体・游明朝体にすることで驚くほどWebの文章が読みやすくなります。 画像出典：Evernote Clearly（Evernote） みなさん、EvernoteのClearlyを使っていますか？ このClearlyはFirefox・Chromeで使用できるアドオン・機能拡張で、Webの文章を読みやすくするためのアドオン・機能拡張です。 Evernote Clearly（Evernote） このClearlyを使うと、本文にフォーカスした表示のされ方に切り替わって、文章がとても読みやすくなります。 ●ClearlyでWebの文章がこんなに読みやすくなる例を見てみましょう。 千葉県房総半島のいすみ市から大多喜町を走る路線のいすみ鉄道の社長さんのブログです。 元のブログの体裁はこんな感じ（今はスタイルが変わりました）。
均等分割されていないBootstrapの .nav-justified を均等分割（均等割）に修正するCSS
概要 ▶ Bootstrapで均等分割（均等割）されない.nav-justifiedを修正。table-layout: fixed;がポイント。 Bootstrapでナビバー（navbar）に、均等分割（均等割）にするクラスがあります。 それが「.nav-justified」です。navをjustifyするということで、そのまんまですね。 ●.nav-justifiedは均等分割していない便利なクラスが用意されているものだと、会社のサイトであまり気にせず適用していました。 以下の画像の線で囲った部分です。 でも、よく見ると、本当に均等分割しているのか？って思いませんか。 一番左と一番右はpaddingで15px付けているから少し大きく見えるにしても、一番左の項目がかなり長く見えます。 画像出典：これからのカタログ印刷のカタチ - 分割型カタログ印刷 Stock!&Fresh!（吉田印刷所）
ブラウザーでのフォント表示をキレイにする（Internet Explorer・Firefox）
CSSをいじっていたら、フォント表示を改善できて、キレイな表示になったので報告しておきます。 なお、かなり無理矢理ですので、場面に応じてお使い下さい。 対応ブラウザーはInternet Explorer・Firefoxです。（Internet Explorerは9以降かな？） ざっくり行きたいなら、以下の様に書きます。 body { transform:scaleX(0.9999); } Yahoo!のトップページのニュースの見出し部分で検証してみます。 ブラウザー内蔵の開発者ツールを使用してCSSを適用して、スクリーンショットを撮り、２倍に拡大して掲載しています。 ●Internet Explorer 11適用前 適用後 ※IE9だと「-ms-transform:scaleX(0.9999);」 ●Firefox適用前 適用後 ●Chrome 残念ながらChrome 39（64bit版）
動くCSSのためのメモ。
CSSでできる事がどんどん増えてます。JavaScriptを使って実装するようなレイアウトやUIも、CSSだけで作れちゃうほど、便利なプロパティがじゃんじゃか増えましたね。ここでは、要素にアニメーション効果をつけるためのCSSを使ったエフェクトについて、まとめてゆこうと思います:)。 CSSで動かす 「動く」といっても、自由自在にぐにゃぐにゃ動かせるわけではなくて、CSSアニメーションでは、プロパティの数値をスムーズに増減させることで、要素のスタイルを滑らかに変化させます。 例えば、下のサンプルでは、p要素にカーソルを合わせた時に、font-sizeの値を、1emから2emに、スムーズに変化するように指定しています。 p { transition: font-size 1s; } 動かすためのマストプロパティ CSSでアニメーションさせるために必要不可欠なのがtransitionプロパティ
px指定の次はコレ！フォントサイズやブレイクポイントに「rem」を使ったレスポンシブ対応のフレームワーク -Schema UI Framework | コリス
Webページでよく使用するさまざまなコンポーネントが簡単に利用できるフロントエンド用のフレームワークを紹介します。 最近は、フォントサイズやMedia Queriesのブレイクポイントなどの単位に「rem」を使用しているサイトが増えてきましたね。 Schema UI Framework Schema UI Framework -GitHub 「rem」の詳しい説明は、以前の記事をご覧ください。 フォントのサイズ指定はpx？ em？ 既存の再検討とこれからのテクニック Schemaの特徴 Schemaのデモ Schemaの特徴 Schema UI Frameworkの特徴 SchemaはMITライセンスのオープンソースのプロジェクトで、軽量でクリーンなフロントエンド用のフレームワークです。 セマンティックなマークアップ Web標準で、きれいなマークアップが使用されています。 LESSベース
CSS - Mozilla Developer Network
CSS チュートリアル CSS の基本 CSS の第一歩 CSS の第一歩の概要 CSS とは何か CSS 入門 CSS の全体像 CSS の働き 評価課題: 経歴ページのスタイル設定 CSS の構成要素 CSS の構成要素の概要 CSS セレクター Type, class, and ID selectors Attribute selectors Pseudo-classes and pseudo-elements Combinators カスケードと継承 Cascade layers ボックスモデル 背景と境界 書字方向の操作 内容のはみ出し CSS の値と単位 CSS における大きさの指定 画像、メディア、フォームの要素 表のスタイル付け CSS のデバッグ CSS の整理 評価課題: CSS の基本的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボック
三点リーダが真ん中に表示されない理由
三点リーダ「…」が「…」という風に真ん中に表示されない問題について調べてみました。 １．三点リーダとは 説明するまでもありませんが、点を3つ横に並べた形をした記号のことで、語尾を省略したり、言葉の余韻を残すときに使う「…」です。 ２．問題点 たとえばブログを書いているときに、記事編集画面のテキストエリアでは「…」と表示されているのに、公開したページでは「…」となることがあります。 ３．原因 三点リーダが真ん中に表示されないのはCSSの「font-family」の設定によるものです。 「font-family」の値には多くのフォントを並べているケースが多いと思いますが、その一番最初に記述しているフォントに依存します。 たとえば、このブログのfont-familyは以下のようになっています。 font-family: Verdana,Arial,"メイリオ",Meiryo,"ヒラギノ角ゴPro
Bootstrap
Introducing Google Bootstrap. Need reasons to love Google Bootstrap? Look no further. By nerds, for nerds. Forked from Twitter Bootstrap, built by todc, Google Bootstrap utilizes LESS CSS, is compiled via Node, and is managed through GitHub to help nerds do awesome stuff on the web. Made for everyone. Bootstrap was made to not only look and behave great in the latest desktop browsers (as well as I
[CSS]画像置換「-9999px」のパフォーマンスを改善した新しいテクニック
テキストで実装した見出しなどを画像に置換するテクニックで「-9999px」が有名ですが、そのパフォーマンスを改善するテクニックを紹介します。 Replacing the -9999px hack (new image replacement) [ad#ad-2] 画像置換：-9999px 改善したテクニック 画像置換：-9999px -9999pxを使った画像置換のテクニックは、下記のようになります。 HTMLは見出し要素で実装します。 HTML <h3 id="sample06">見出しのテキスト</h3> 「text-indent:-9999px;」でテキストを見えない位置にし、見出しとなる画像を背景画像として表示します。 #sample06{ width:300px; height:50px; background:url('bg-01.gif') no-repeat 0 -250p
『iPad 独特の CSS トラブルに javascript で対策してみました。』
iPad(MobileSafari) だとこんなことがトラブルんだな、という 珍しい問題を見つけたので 簡単に対策しつつ レポしたいと思います。 HTML + CSSデザインの話ですので Web に詳しくない方、以下はおもしろくありません。あしからず。 ------------------------------------------------ CSSデザインを行う際、 テキストを箱で囲み、 その背景画像の大きさとテキストをバランスよく配置しつつ しかしテキストの分量は可変で考えたい場合 こういう手法を取ることがあります。 （文字の分量が増減するテキストの背景を指定する方法） 文字列の箱にでかい背景画像を指定するのではなく 箱をあえて二つの div に小分けし 別々の背景画像を充当する方法です。 増減する部分を {background-repeat : repeat-y;} と指定すれ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【 content:attr() 】CSSでタグのdata属性やtitle属性を取得して表示する
新しいCSSの仕様を色々調べてみた
デザイニアン