CSSのこの新機能、すごく楽しみ！ UI要素にさまざまなアニメーションを簡単に実装できるようになります
朗報です！！！ 今までJavaScriptや複雑なCSSを使用しないと実装できなかったアニメーションが、簡単なCSSだけで実装できるようなります！ たとえば現在のCSSではtransitionでdisplayは機能しませんが、CSSの新機能を使用すると、下記のようなCSSで表示・非表示のアニメーションを実装できるようになります。 このCSSの新機能により、UI要素にさまざまなアニメーションを簡単に実装できるようになります。 Google ChromeのデベロッパーUna氏（@Una）によると、transitionプロパティでdisplayが使用できるようになり、要素の表示・非表示、ポップオーバーなどのアニメーションが簡単なCSSで実装できるようになるとのことです。 👀 An early look at transitioning to and from display: none in
CSSのfont-familyの書き方のまとめ、スマホ・デスクトップの各最新OSにインストールされているフォントを使用 -Modern Font Stacks
iOS, Android, macOS, Windows, Linuxの各最新OSにデフォルトでインストールされているフォントをCSSで使用するときに、font-familyにどのように定義するとよいのかが分かるModern Font Stacksを紹介します。 日本語フォントには残念ながら対応していませんが、英語フォントを使用する際のfont-familyの書き方がまとめられています。 Modern Font Stacks Modern Font Stacks -GitHub Modern Font Stacksの特徴 Modern Font Stacksは、スマホ・デスクトップ用のOSにデフォルトでインストールされているフォントを確認できるサイトです。CSSのfont-familyに定義すると、フォントは各OSで利用可能な最速のフォントで、フォントがダウンロードされる必要はなし、レイア
Adobe Illustrator 初期設定の塗りと線の変更方法 - by Takumi Hirashima
Adobe Illustrator 初期設定の塗りと線の変更方法を紹介します。 例えば、ドキュメントのカラーモードを「CMYKカラー」から「RGBカラー」に変更した後に便利な方法です。 グラフィックスタイルウィンドウで変更 グラフィックスタイルウィンドウで変更 「初期設定の塗りと線」はグラフィックスタイルの「初期設定のグラフィックスタイル」が適用されます。 ドキュメントのカラーモードを「RGBカラー」に変更後、「初期設定の塗りと線」がCMYK値になっているのは、このスタイルがCMYK値から更新されていないためです。 そこで、任意の設定に変更するためには、「メニューバー」＞「ウィンドウ」から「グラフィックスタイル」ウィンドウを表示。 次に、塗りと線を任意の色に変更後、この色を「新規グラフィックスタイル」として登録します。 最後に、作成したグラフィックスタイルを掴んだ状態で、option キー
select で初期値を追加する方法 - by Takumi Hirashima
select（セレクトボックス） で値を持たない初期値を追加する方法を紹介します。 例えば、初期値を「選択してください」などにする時に便利な方法です。 option に selected と disabled を指定する方法 option に hidden を指定する方法 option に selected と disabled を指定する方法 セレクトボックスの最初に、値を持たない「選択してください」を追加する場合は、以下のコードを追加してください。 <select name="select"> <option selected disabled>選択してください</option> <option value="項目1">項目1</option> <option value="項目2">項目2</option> <option value="項目3">項目3</option> </sel
2024年に最適なfont-familyの書き方 - ICS MEDIA
ウェブサイトのフォントは何を指定すればよいのでしょうか？ CSSのfont-familyプロパティーに指定可能なフォントは選択肢が多く、HTMLコーダーなら誰もが一度は迷ったことがあるはずです。 font-familyの組み合わせを紹介している記事は多々あります。しかし、必要のない指定や、考察不足なまま紹介している記事を見かけることは少なくありません。それもそのはず、フォント事情は日々変化するもので、古い情報は役立たないことが多いためです。 本記事ではフォントに関わるここ最近のビッグニュースを取り上げつつ、教訓から学んだ変化に強い「無難」なフォント指定を紹介します。 結論 いきなり結論ですが、以下のフォントの組み合わせがオススメです。CSSのbodyセレクターなどにコピー＆ペーストして利用ください。 body { font-family: "Helvetica Neue", Arial,
各ブラウザごとのデフォルトのスタイルシート、user agent stylesheetのまとめ -Chrome, Safari, Firefox, Edge
Webページを実装する際、そのページを表示するブラウザが各HTML要素にデフォルトでどのようなスタイルが適用されているか知っておくのは大切なことです。 Chrome, Safari, Firefox, Edge 各ブラウザごとのデフォルトのスタイルシート、user agent stylesheetを紹介します。 例えば、p要素にはdisplay: block;が定義されており各ブラウザでmarginの数値が異なります。また、h1要素は単独で使用した場合とsection要素などの子要素で使用した場合ではmarginの数値が異なります。 /* * The default style sheet used to render HTML. * * Copyright (C) 2000 Lars Knoll (knoll@kde.org) * Copyright (C) 2003, 2004, 20
Windows, macOS, Android, iOSなど、各OSの各バージョンにプリインストールされているフォントリストのまとめ
Windows, macOS, Android, iOSなど、各OSの各バージョンにプリインストールされているフォントリストを紹介します。 CSSでフォントを指定する時、また自分が使用しているOSでこんなフォントを利用できるという発見もあるかもしれません。 Windows 10 font list Windows 7, 8などのフォントリストも揃っています。 Windows 7 font list Windows 8 font list Windows 8.1 font list 不要なフォントを削除したいけどソフトウェアで使用されていると困るから削除できない、という人はFonts and supported productsを参考にすると、どのフォントがどのソフトウェアに使用されているのか分かります。 Windows 2000用のフォント、IE 5用のフォントなど、使わないですね。 Wi
initialとautoでmin-width,max-width(height)をリセット – webdev
スタイルシートの、最大の幅や高さ、最小の幅や高さを指定する max-width、max-height、min-width、min-height をリセットするときは initialとautoを併用します。 アスペクト比（縦横比）を維持したまま200×200の枠内に収まるよう画像を縮小する設定と それをリセットするスタイルのサンプルです。 .thumbnail img { max-width: 200px; max-height: 200px; width: auto; height: auto; } .free .thumbnail img { max-width: initial; max-width: auto; max-height: initial; max-height: auto; } initialはスタイル適用前の状態へ設定するための値で、CSS3世代の比較的新しいものです
reset.cssとnormalize.cssに続く新しいリセット用CSS、モバイル対応・最近の実装スタイルを考慮したスタイルシート -sanitize.css
HTMLの各要素のブラウザごとに異なる差異をなくし、スタイルをリセットするスタイルシート「sanitize.css」を紹介します。 「Normalize.css」の共同開発者：Jonathan Nealの新しいプロジェクトで、最近の実装スタイルにあったアプローチがとられており、スマホなどのモバイルにも対応しています。 sanitize.css sanitize.css -GitHub sanitize.cssとは sanitize.cssの対応ブラウザ sanitize.cssのスタイル sanitize.cssの注目すべきスタイル sanitize.cssの適用 sanitize.cssとは sanitize.cssはHTMLのあらゆる要素を各ブラウザでの差異をなくし、整合性をもたせてレンダリングさせるスタイルシートで、ライセンスはCC 0で利用できます。 有用なデフォルトはそのまま 多
Sassの!defaultフラグの使い方と使われ方
Sassを書く時には変数を多用することと思います。それら変数は自分で定義して自分で使うので、同じプロジェクト内で再定義する必要はあまりありません。しかし他人や自分の作ったSassファイルを流用する場合、その中で使われている変数の値を最適化する必要が出てきます。もしその変数がハード・コーディングされているだけだとしたらどうでしょうか？ その場合変数を直接書き換えることになるでしょう。こういったSassファイルの再利用における問題を解決するためにSassには!defaultというフラグが用意されています。 Less & Sass Advent Calendar 2011もついに18日目ですね。ゴールまであと少しです。 まずはSassリファレンスの!defaultを扱っている部分を読んでみましょう。参考にざっと以下に訳してみました。 変数の値を指定する時、!defaultというフラグを付けておく
WordPressのアイキャッチ画像に任意のデフォルト画像を登録する方法
WordPressのアイキャッチ画像は とても便利ですけど、全ての方 が毎回登録するとは限りません。 クライアントさんの中でもやはり 毎回登録するのは面倒だ、という 方もいます。 確かに毎回アイキャッチを登録するのも、慣れていないと面倒です。しかし、何もしないとレイアウトが崩れてしまう場合もあります。その為、テーマファイル内で条件分岐して、レイアウトを調整して・・・というのも面倒ですよね。 なので、アイキャッチを設定しない際は自動でデフォルト画像が表示されるようにしましょう、というのが今日の内容です。 よく使われる方法if (has_post_thumbnail()) { the_post_thumbnail(); }else { echo '<img src="' . get_bloginfo('template_directory') . '/images/default.png' .
Global Variables « WordPress Codex
Interested in functions, hooks, classes, or methods? Check out the new WordPress Code Reference! Introduction WordPress-specific global variables are used throughout WordPress code for various reasons. Almost all data that WordPress generates can be found in a global variable. Note that it's best to use the appropriate API functions when available, instead of modifying globals directly. To access
placeholder 属性と jQuery で IE にもプレースホルダを
フォームの入力コントロール （input とか textarea） に対して、初期値として入力例などをうっすら表示し、ユーザーへのガイドとして使用するプレースホルダ。HTML5 では、placeholder 属性が新たに追加され、プレースホルダの提供が簡単に行えますが、この属性の値を活かして、未対応環境にもプレースホルダを提供する jQuery プラグインを紹介します。 フォームの入力コントロール （input とか textarea） に対して、初期値として入力例などをうっすら表示し、ユーザーへのガイドとして使用する （プレースホルダ） なんてことはよくやります。 HTML5 では、プレースホルダを指定する属性として、まさにそのままの名前が付いた、placeholder 属性が新たに追加され、ブラウザさえ対応していればとても簡単に実現可能になっていますが、今のところ IE が対応していな
DefaultValueSetterプラグイン v0.20
Movable Type（MT）でブログ記事の入力フィールドに初期値を設定する「DefaultValueSetterプラグイン」をバージョンアップしました。 １．機能概要 このプラグインを利用すれば、次のようにブログ記事のタイトル・本文・追記・タグ・概要・キーワードに初期値を設定できます。 プラグイン設定画面 ブログ記事編集画面 ２．修正内容 v0.20では次の修正を行いました。 hetemlの自動インストール版MTOSで、プラグインに設定した値がブログ記事に反映されない不具合を修正 MT5.1対応（MT5.0xにも対応可能） 管理画面の修正 ３．プラグインのダウンロード 最新版のプラグインは以下のリンクからダウンロードできます。 ブログ記事の入力フィールドに初期値を設定する「DefaultValueSetterプラグイン」
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
System Font CSS - OSネイティブのフォントを利用するCSS設定