Get affordable and hassle-free WordPress hosting plans with Cloudways — start your free trial today. A surprisingly common response when asking people about things they’d fix about anything in CSS, is to improve the handling of viewport units. One thing that comes up often is how they relate to scrollbars. For example, if an element is sized to 100vw and stretches edge-to-edge, that’s fine so long
序 ウェブをブラウジングしていると、嫌というほど見る 無意味にひたすらシステムフォントを列挙している 同じシステム上に存在すると予想される和文フォントのあとに欧文フォントを指定する という苦痛極まりないフォント指定をしているCSSをよく見かける。 ひどい思考停止だと思うのだが、実際には行われているばかりか、ウェブデザイナーを自称する者が平気でそのような指定を推奨していたりする。 それについては散々言及したつもりでいたのだが、実際にChienomiでそのこと全体を指摘した記事はなかったので、ここでしっかりと述べておこうと思う。 ここではそれがなぜ、どのように問題なのか、どのようにすべきかということを述べていこう。 起 話の大本としては、MSNのフォント指定がひどくて、Linux上で見るために気を遣ったaliasを書かねばならないが、それ以上に無意味な指定である、ということを指摘した。 それ以
font-feature-sttingsプロパティは便利だけど、値の意図しない上書きが発生しやすいという扱いづらさがある。たとえば「ページ全体でloclを有効にした上で、h1要素ではpaltを有効にしたい」というようなとき、以下のようなCSSを書いてしまいがちだ。 body { font-feature-settings: "locl" 1; } h1 { font-feature-settings: "palt" 1; } しかしこのときh1のpalt機能タグはbodyから継承されたlocl機能タグに追加されるのではなく、これを上書きしてしまう。つまりh1ではloclが無効になる。これは正しくは以下のように書かないといけない。 body { font-feature-settings: "locl" 1; } h1 { font-feature-settings: "locl" 1, "
サイトのデザインによっては、ふりがなをもうちょっと小さめにしたい場合もあるかもしれませんね。タイトルとかのふりがなでは、 頭揃えにしたり、お尻揃えにしたいかもしれません。そんなふりがなのスタイルを調整したい時のためのまとめです。 文字サイズと文字間 ルビテキストの文字サイズは、デフォルトだとルビベースの半分の文字サイズ（50%）になってる（下サンプル上段）んですけれど、このサイズは、普段のテキストと同様に、font-sizeプロパティを使って調整することができます。 下のサンプル（下段）では、ルビベースの30%の文字サイズになるように、指定しています:)。 rt { font-size: 30%; } 一方、ふりがなの文字間を調整する場合はというと、普段のテキストと同様にletter-spacingプロパティで調整しようとしても、上手くいきません…。下のサンプルでは、ルビテキストの文字間を
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに CSSアニメーションに関して説明する機会があったため、それらに関してまとめました。 「CSSは書けるがCSSアニメーションがよくわからん!」といった人達向けに書いた記事であり、 CSSアニメーションに関するプロパティを理解できるようになることを目的としています。 デモはCodePen上に置いてあります。編集して変化を見てみると理解が深まると思います。 デモのJavaScriptはjQueryを読み込んでいないと動かないため、ローカル環境でデモを実行する場合はご注意ください。 CSSアニメーションとは 要素をアニメーションさせる
.circle { position: relative; width: 120px; height: 120px; background: #333; border-radius: 50%; text-align: center; overflow: hidden; z-index: 1; } .circle::before { content: ""; display: block; position: absolute; top: 0; left: -60px; width: 120px; height: 120px; background: #999; transform-origin: right 60px; z-index: 2; animation: rotate-circle-left 2s linear forwards; } .circle::after { conte
これはDMM.com #2 Advent Calendar 2017 - Qiita 23日目の記事です。 昨日は @norinity1103 さんの 「パターン・ランゲージ」のワークショップを社内で実施した件 でした。 カレンダーのURLはこちら DMM.com #1 Advent Calendar 2017 - Qiita DMM.com #2 Advent Calendar 2017 - Qiita 自己紹介 はじめまして。DMM.com LaboのÉcouffesと申します。最近のマイブームは吉岡里帆のどんぎつねクリアファイルを30分毎に眺める事です。そのマイブームも、あれです、自動化したいです。はい。 はじめに 今回 Advent Calendar 参加にあたり、当初は勢い余って**『超マイナーなCSSヲタク知識を晒してみる』と宣言しました。 ヲタク知識たるもの、実務に即役立つ有
はいどうも！ バーチャル Youtuber ではない面白法人カヤックのごんです。 CSS Transform の Tips をやっていきます。 1. CSS Transform は後ろから適用される transform: rotate(45deg) translateX(100px); は、45度回転してから X 方向に 100px 移動、ではなく X 方向に 100px 移動してから、45度回転 です。 これは百聞は一見にしかずなので、下にデモを貼ります。 なんで逆にしちゃったんですかね。 2. CSS Transform のパーセント表記は要素の幅に依存する CSS Transform Translate のパーセント表記は、 DOM 要素とは異なり、親要素ではなく、自身の幅に対する割合を指します。 これも百聞は一見にしかずなので、デモを貼ります。 これは、特に要素の中央寄せする際に非
CSS Talk vol.2に登壇しました。とても雰囲気のいい勉強会で、話す側としてもとても楽しい時間を過ごせました。 今回は、CSSネタということで、私自身がCMSを作っている会社に所属しているので、自己紹介ついでに動的コンテンツに対応したレイアウトを提供できる「Quantity Queries」についてご紹介しました。 ざっくりどんなことができるのかというと、たとえば、li要素の幅を25%幅にしていて、要素が4つしか入らないCSSの設計になっていたとします。そんな場合にCMSからお客さんが5つめのコンテンツを投入すれば普段であれば当然レイアウトが崩れてしまいますが、Quantity Queriesは解決することができます。どうやって解決できるのかというと、たとえば要素が5つ以上になったときにli要素の幅をautoにして、さらにdisplay:inline-block;を追加し、レイアウ
僕は三点リーダー「…」が好きで、ついつい使ってしまいます……。この三点リーダーですが、日本語では（仮想ボディの）中央に並び、欧文ではベースライン上に並べるのが一般的です。一方で昨今のWeb媒体などでは、日本語の文章であっても三点リーダーがベースライン上に並んでいる場合も多くみられます。どちらかといえばベースライン上に並んでいるのに慣れてしまった諸氏も少なくないのではないでしょうか……。 基本的に、コンピュータ上で三点リーダーがどの位置に表示されるかは、フォントによって決まっています。三点リーダーのUnicodeにおける名前は “HORIZONTAL ELLIPSIS” といって、U+2026 のコードポイントに割り当てられています。このコードポイントに対応するグリフがどのようにデザインされているかが問題になります*1。実際に複数のフォントを見比べてみるとわかりますが、“HORIZONTAL
Update この検証から 2 年程のちに、First Paint/First Contentful Paint を重視するため、全ての display プロパティは swap に統一した。 その他 WebFont に関連する検証は web font タグにまとまっている。 Intro Web Font 読み込み中の HTML 表示については、ブラウザデフォルトの挙動に依存していた。 フォントファイルサイズが大きい場合は、FOIT/FOUT の問題が顕著になり、JS を用いた回避策が利用されることも多かった。 これを解決するため、CSS に font-display プロパティが作成され、実装が進んでいる。 各プロパティの違いと挙動、そして本サイトへの適用について解説する。 Loading Web Font Web Font は、特に日本語のように文字数が多い場合、ファイルが大きくなる。
WebKit公式サイトを含め、多くのWebサイトで解説されている「iPhone X対応のWebページの作り方」はiOS 11.11系まで、またはiOS 11.12以上のどちらか一方にしか対応していないため、その両方に対応する書き方について解説します。 この記事の内容は「スマートフォン時代のWebコーディングスクール」の授業資料の一部です。 iPhone X対応していないWebページはどう見えるのか 縦持ちでは特に問題ありませんが、横持ちの場合画面の左右に空白ができてしまいます。 たとえば、このブログの記事ページを横持ちで観ると以下の画像のように見えます。 このブログの場合、bodyの背景色は濃い茶色、ページ全体を包んでいるwrapper要素に背景画像が設定されています。 iPhone Xのセーフエリアについて iPhone Xのディスプレイを横向きにした時、センサーハウジングや角丸の部分を
CSS frameworks are pre-written CSS files that help web designers and developers create websites faster and more efficiently. They are perfect for those looking to launch projects without getting bogged down in the details of coding CSS from scratch. In this collection, we’re focusing on smaller, lightweight frameworks. These minimalist frameworks all offer a simpler alternative to more comprehensi
ブラウザは、フォーカスされた要素を可視化するためにフォーカスリングを実装している。青や黒のフォーカスされた要素を囲う枠線のことだ。outlineプロパティで表現される。これは主に、ウェブページをキーボードで操作可能にするためにある。 例として、ウェブページ上のボタンをクリックするという場面を想定する。キーボードによる操作では、まず、Tabキーなどによってフォーカスの位置を移動させながら、フォーカスを目的の要素まで辿り着かせる必要がある。その上で、スペースキーやエンターキーによってクリックに相当するアクションを実行する、というような流れになる。このような操作を行うためには、どの要素がフォーカスされているかを、ユーザーが視覚的に認識できることが前提になる。フォーカスリングが実装されているおかげで、開発者は適切なマークアップを行うだけでフォーカスを可視化することができる。 しかしながら、マウス操
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
