Windowsと游ゴシックとChromeとfont-family(画像追加)

Windowsと游ゴシックとChromeとfont-family(画像追加)

各ブラウザのレンダリングにほとんど差がなくなり、ベンダプレフィックスも必要なくなり、游ゴシックがWindowsでも採用され、Macとのフォントの違いに悩まされることもないと思いきや、Windows版Chromeの游ゴシックの問題がWebデザイナーを苦しめています。Webフォン...

投稿日:

font-sizeの指定はremで

font-sizeの指定はremで

文字の大きさ(font-size)の指定には悩ませられますが、 html { font-size: 62.5%; } body { font-size: 1.6em; } と、全体を指定しておいて、個々にサイズを変える箇所は、それぞれの要素やクラスにcss3から採用さ...

投稿日:

リセットCSSをやめてみる

リセットCSSをやめてみる

ブラウザにはデフォルトのスタイルがあります。そのため、ブラウザごとに微妙に異なる表示となり意図したデザインが得られないことからリセットCSSやノーマライズCSSを適用してきました。 しかし、緻密なデザインであれば、これからしばらく必要になるのかもしれませんが、個人のブログが中心...

投稿日:

inputやtextareaにスタイルが適応されないとき

inputやtextareaにスタイルが適応されないとき

フォームのinputやtextareaにfontのスタイルを適応させようとしても適応されないことがあります。 どうやら、一部のブラウザは親要素から font-family や font-size を継承せずにシステムのデフォルトのスタイルが使用されるようです。 そんな場合...

投稿日:

CSS3の否定擬似クラス :not() を使ってみる

CSS3の否定擬似クラス :not() を使ってみる

CSS3で採用された否定擬似クラス :not() を使ってみました。 jQueryを使用しないCSS3フルスクリーンスライドショーCSS3 Fullscreen Slideshowを書きましたが、その後暫くするとスライドショーが表示されなくなりました。 調べてみると、番号付き...

投稿日:

Font Awesomeを使ってみる

Font Awesomeを使ってみる

Webフォントにはまだ挑戦していないのですが、Webアイコンフォントのひとつである『Font Awesome』を試してみました。 1.読み込み方法 ダウンロードする方法もありますが、今回はCDNを使います。head要素内に次のコードで読み込ませます。 <link ...

番号付きリストをCSSとcounter()関数でデザインする

番号付きリストをCSSとcounter()関数でデザインする

番号付きリストをCSSとcounter()関数でデザインしてみます。 HTMLは次の通りです。 <ol> <li>ピリオドつき <ol> <li>括弧つき <ol>...

投稿日:

jQueryを使用しないCSS3フルスクリーンスライドショーCSS3 Fullscreen Slideshow

jQueryを使用しないCSS3フルスクリーンスライドショーCSS3 Fullscreen Slideshow

Image 01re·lax·a·tion Image 02qui·e·tude Image 03bal·ance Image 04e·qua·nim·i·ty Image 05com·po·sure Image 06se·ren·i·ty CSS...

投稿日:

重なり合うボックスのリンクやテキストが選択できない場合

重なり合うボックスのリンクやテキストが選択できない場合

重なり合うボックスのリンクやテキストが選択できないという事態が発生。 原因は、ネガティブマージン(marginにマイナス値を設定したり、positionプロパティでマイナス値を設定したりしてボックスを配置する手法)でした。 その場合は、リンクやテキストが選択できないボック...

投稿日:

Vegas2で背景画像のスライドアニメーション

Vegas2で背景画像のスライドアニメーション

背景画像のスライドアニメーションのため、Vegas2を導入してみました。 このブログではなく、富山市議会議員 しきだ博紀 公式ウェブサイトで導入しています。 必要なファイルは、次の通りです。 vegas.min.css vegas.min.js overlays...