SIの現場では、未だにテーブルでのレイアウトが多勢を占めてる気がします。フォントの色とかサイズとかも、CSS使わず書くことが多い気もしてます。 そんな訳で、少なくとも僕はモダンなHTMLやCSSがわかりません。で、お勉強しつつ、ここにアウトプットを残そうというのが今回の趣旨です。 HTMLの種類 昨今のメジャーどころでは、以下の様になるのかな　と。HTML5がすでに主流と言っても良い気がするので、お勉強もHTML5に則ってやっていこうと思ってます。 HTML4.01 ちょっと前までの主流。yahooはまだHTML4.01。Windows XP使い続けてるおじーちゃんおばーちゃんもターゲットだからなのかな？古いブラウザでも観れるように配慮するなら、このバージョンを選ぶことになる XHTML 若干空気。古いブラウザでもそれなりに対応している。XMLのように厳格に書きましょ　という企画。利用して

スマホのリンク付きのリスト一覧などでよく見る右側の とか のアイコンが付いたリスト。アイコンが丁度各リストの中央に来るようにする方法です。 擬似要素 :after を利用IE6 を対応させるなどの条件のために、これまでは直接 img 要素で入れたり background-image として入れることが多かったアイコンですが、スマホ対応だったりモダンブラウザのみの対応の場合は、擬似要素の :after が活用できるようになりました。 CSS2 で導入された時点ではコロンは１つでしたが、CSS3 ではコロンが2つの ::after も利用できるようになっています。擬似クラスが増えた際に擬似要素と擬似クラスを明確に分けるために、 after や before などの擬似要素はコロン２つとなりました。 現状では :after も ::after もどちらも利用できる状況のため、どちらを使っても大丈

Webアニメーションを高速化するために知っておくべき10のこと（前編） 斉藤 祐也（株式会社リッチメディア） アニメーション／トランジションは身の回りに当たり前にあるものです。 むしろ普段の生活では「0」が「1」に変化するものの方が珍しいでしょう。 アニメーション／トランジションはデジタルなWebに対して自然な変化を提供する大切なツールです。 今回はそんなアニメーション／トランジションをより自然にスムーズに動作させるために知っておきたいことを前・後編の2回に分けて紹介していきます。 アニメーションを高速化する理由 アニメーションは先ほど書いたように普段の生活にも存在しています。だからこそ、我々はスムーズではないアニメーションを見つけるのが得意です。 アニメーションに限定した話ではありませんが、FacebookのShane O’Sullivan氏が、ページロード後のレンダリングパフォーマンス

はじめに 前回はHTTPリクエスト数削減テクニック01「インラインイメージ編」でData URI Encodeを使ったインラインイメージについて紹介しました。この記事をより深く解説した記事をCodezineさまに寄稿したのでこちらも参考にしてください。 今回はHTTPリクエスト数削減テクニックの2つ目「CSS Sprite」について解説します。 すでに定番のテクニックとなっていますが何となく使っていることが多いと思うので復習と思って読んでみてはいかがでしょうか。これから覚える方にも向けて丁寧に解説したいと思います。 1，CSS Spriteとは CSS Spriteとは、アイコンやナビゲーションなどのいくつかの画像を1つにまとめた画像（以降Sprite画像とする）を用意し、CSSのbackgroundプロパティを使って一部分のイメージだけを見せるテクニックです。代表的なSprite画像の例

hr要素は罫線を表示させるもので、話題を変えるときの目印となる区切り線などとして用いられます。 どのブラウザでも完璧に同じ見栄えをとなると背景画像とかがやはり手っ取り早いし無難なんですが、やろうと思えばCSSだけでも結構いろいろとできるので、備忘録兼ねてhr要素をスタイリングしたものをまとめてみました。 ここで紹介しているものは、ブラウザによっては（特にCSS3を用いているもの）ちゃんと表示されません。 また、多用する人も多いと思う破線や点線もブラウザによっては多少見栄えが違ったりするので、使用する際はあらかじめ注意が必要になります。 はじめに ここで紹介しているものは、すべてHTMLは<hr />のみです。 また、それぞれのhr要素にはデフォルトスタイルとしてあらかじめ下記のようなスタイルを指定してあります。

サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。

先日書いたCSS小ネタまとめのようにCSS3も使えば使うほど味が出て、応用次第で色んなことできて楽しいですよね。私も大好きです、CSS3。 IE非対応云々のためハックがどーこーとかめんどくさいことはありますけど。 というわけでここらで初心者からパワーユーザーまでぜひおさえておきたいチートシートページやリファレンスサイトをまとめておきますので参考にどうぞ。 CSS3の困った/アレが知りたい、はここで調べよう 筆者選で7つほど。他にもいろいろあるんですが、読みやすいのメインに挙げてみました。 1.E BISUCOM TECH LAB : CSS3プロパティ＆ブラウザ対応一覧 恐ろしくまとまり過ぎているページ。もともと書籍の巻末付録だったものをWebで公開しているらしいです。各プロパティの対応ブラウザが一目でわかるのがありがたい。 ベンダープレフィックスの要・不要とかまで書いてます。時々更新され

基本的なことやちょっと変わった意外な使い方などCSSに関する小技テクニックをたくさん紹介していきます。知っていることも多いかと思いますが、新しい発見もあるかもしれませんので復習を兼ねてぜひご覧ください。

2020年2月25日 CSS どのサイトでも見かけるテキストリンク。リンクのついたテキストにマウスオーバーすると文字色を変更する、というシンプルかつわかりやすい効果を実装しているWebサイトが多いかと思います。この装飾をもう少し変更できないかな？と思いCSSのみでプラスすることができるエフェクトをいくつか紹介します。 ↑私が10年以上利用している会計ソフト！ 目次 ちょっと予備知識 文字色をふんわり変える 背景色をふんわり変える 文字をぼかす 光を放つグロー効果 背景を角丸に レインボーカラーに 拡大・縮小 角度を変える くるっと回転 1. ちょっと予備知識 今回はjQueryなどのJavaScriptを使わず、CSSのみで実装できる小技を集めています。その中でどの小技にも採用しているのが transition プロパティです。transitionプロパティは、時間の変化を操作するもので、

はじめに 昨日公開した「第一回 プログラマ向けデザイン勉強会の内容を参考にして妻のパン屋のWebサイトをリニューアルしてみた」の続編を書きます。 今回は僕が苦労したIE6〜8対応のお話です。 実はIE8ユーザーの割合はIE9に次いで第2位！ Mac万歳！Chrome万歳！な僕にとって、IEは「どうせ使うことないし、どうでもいいよね〜」という「心の中でサポート対象外なブラウザ」でした。 しかし、店のWebサイトのアクセス解析を見てみると、実はIE9とIE8が1位、2位を占めていることがわかりました。 よく見ると8位にはIE6がまだしぶとく生き残っています。 この結果を見ると、「うーん、こりゃ完全に無視するわけにはいかんな・・・」と考えざるを得ませんでした。 IE対応を全く考慮していないとこうなる まず最初に、IE対応を全く考慮していないと、いったいどんな表示になるか見てみましょう。 トップペ

最近はアニメーションをFlashではなく、CSSやJavaScriptで実装されているサイトをよく見るようになりました。 今回は復習も兼ねて、CSSで動きを付けられるanimationとtransitionのおさらいをしてみたいと思います。 ベンダープレフィックスをつけないと動かないブラウザもありますが、省略します。 animationとtransitionの違い どう違うのかなと思って調べたのですが、いまいちわからなかったので、違いを並べてみました。 animation ループ可能 keyframesで細かい設定が可能 ウインドウ読み込んで即実行が可能 transition ループがない 自然に最初の状態に戻る hoverなどのキッカケを与えてあげないと動かない JS使えば違うかもしれないですが、一応こんな印象です。違ったらすみません。 それぞれを翻訳すると、animationはそのまま