CSS3も少し入れつつ自分流CSSプロパティの書き順を決めてみた
どの段階にあるかはCSS current work & how to participateで確認できます。 また、list-style、backgroundなどのように略せるものは略して書くようにしていますが、略さない場合も下に載せています。略し方については「まとめて書くことができるCSSプロパティの8つのパターン｜Webpark」をご参考に。 若干それましたが、試行錯誤して並べた結果がこちらです。普段よく使うプロパティのみ載せています。 表示に関するプロパティ まずは表示に関する内容です。見える見えないは一番大切なことということでしょうか。 display list-style list-style-type list-style-image list-style-position overflow clip visibility opacity 配置に関するプロパティ 次はどこに配置
今さら知った、IE9でIE7と8での表示を確認する方法
最近バタバタしていて更新が滞っています。そろそろFC2の広告が出そうなのでちょっとした小ネタを。 私のPCにはIE9が入っていて、IE7や8での表示確認には「IE Tester」というソフトを使っていました。ところが、IE9でIE7と8の表示を確認できることを先日知りました。 方法は簡単。まずは設定ボタンから開発者ツールを開きます。 するとブラウザの下の方に開発者ツールが現れます。Chromeでいうデベロッパーツールですね。 そこに、ブラウザーモードというのがあり、これでIE7や8での表示を確認することができます。IE6の確認はできませんがもういいです。 「今頃知ったのか」と笑われそうですが、個人的には結構便利だと思ったので紹介してみました。 いちいちバージョンごとで確認が必要なIEって本当に手のかかるブラウザです。IEがしっかりしていればCSS3ももっと浸透すると思うので残念です。
簡単、きれい！RGBaカラーを使って横メニューを作ってみる
RGBaカラーを使って全体に統一感のある横メニューを作ってみます。RGBaカラーといっても使うの色は白（rgba(255,255,255,0.4)など）と黒（rgba(0,0,0,0.1)など）だけで、その透明度を変えて様々なところで使っています。 先日書いた「カラーツール「0to255」で色を決めてメニューを作ってみる」がなかなか好評でしたが、今回も出来上がりは同じようなメニューになります。 RGBaカラーについては、以前書いた「透明度を表す「opacity」 と 「RGBa」の違いと使い分け」も参考になると思いますのでぜひご覧ください。 早速コードを見てみます。まずはHTMLですが、これは特に問題ないと思います。 <ul id="menu"> <li><a href="#">IE</a></li> <li><a href="#">Firefox</a></li> <li><a href
カラーツール「0to255」で色を決めてメニューを作ってみる
このブログで何回か紹介している0to255というオンラインツールですが、かなり便利だと思うので使い方を説明してみます。 色に関する知識が乏しい私ですが、0to255を使うとまとまった感じの配色になるので重宝しています。今回は0to255を使ってメニューを作る際の色選びをしてみます。 0to255の使い方 まず、0to255の使い方についてですが、下の画像のように「PICK A COLOR」をクリックしてカラーコードを入力します。 今回は「#ff7400」を指定してみます。 すると、指定した色より明るい色と暗い色がグラデーションになってたくさん表示されます。近い色がたくさん表示されますので、これらをうまく使うとまとまった感じのメニューが作れます。 メニューの配色を決める ということで、以下のような配色でメニューを作ってみます。 メニュー背景のグラデーションと境界線の1pxラインに使う色を選ん
CSSセレクタの効率的、効果的な使い方をいろいろ
CSSのセレクタって簡単そうで奥が深いと思います。ということで、個人的に使っている方法や意外な使い方などを紹介しますので参考になればと思います。 効率的なセレクタの使い方と読み込み速度を考えたときに効果的なセレクタの使い方に分けて紹介していきます。 CSSセレクタの効率的な使い方 同じ内容ならまとめる 例えばこんなCSSがあります。 h1 { color: black; } p { color: black; } カンマで区切ってまとめることができます。 h1, p { color: black; } !importantがある場合 続いて、!importantがある場合。 h1, h2, h3 { font-weight: normal; } a strong { font-weight: normal !important; } strong { font-style: italic;
Webデザインの配色について学ぶときに読んでおきたい14の記事
このブログをみてお分かりのように、私は思い切った色使いがなかなかできません。どうせセンスがないしと諦めても仕方ないし、恐らくセンスがないのではなく勉強していないだけですし、言い訳はせず勉強することにしました。 ということでWebデザインの配色について学べる記事を集めてみました。 基礎的なものから並べてみましたので、順番に読んでいけば色についての知識は深まると思います。「センスがない」という言い訳をして、実は勉強していなかっただけだということに気付く人もいるかも。 色彩センスのいらない配色講座 基本から分かりやすくまとめられているスライドです。サブタイトルの「色は理論的に説明できる」っていうのがなんかかっこいい。 絶対に覚えておきたいwebデザインの配色・カラー3つの基本と基礎 | 秋田県webデザイナー【weblog】 基本的な内容を親切に分かりやすく説明してくれていますので、これから勉強
CSS3のanimationを使ったWebKit系対応の画像スライドの作り方
CSS3で追加されたanimationを使って何かしてみたかったので、画像を次々入れ替わって表示されるスライドを作ってみました。 まだまだ実用的ではないので、今回ChromeやSafariのWebKit系のみになりますのでご了承ください。 こういうのを何と呼べばいいのかよく分からなかったので、皆さんがイメージしているものと違ったらごめんなさい。 今回は別サーバーにサンプルを用意しました。 HTMLは非常にシンプルです。 <div id="img-slide"> <a href="#"><img src="img1.png" id="img1" /></a> <a href="#"><img src="img2.png" id="img2" /></a> <a href="#"><img src="img3.png" id="img3" /></a> <a href="#"><img src
画像の代わりに使えるアイコンタイプのWebフォントのまとめ
アイコン形式になったWebフォントを集めてみました。これだけ色々揃うと画像を使う場面も減ってくるかもしれませんね。 @font-face { font-family: 'MyWebFont'; src: url('webfont.eot'); /* IE9 Compat Modes */ src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfont.woff') format('woff'), /* Modern Browsers */ url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ url('webfont.svg#svgFontName') format('svg'); /* Legacy i
復習にぜひ！WebparkのCSS3に関する記事のまとめ
このブログではCSS3に関する記事がなかなか人気です。個人的にも力を入れているところですのでうれしい限りです。そんな記事をもっと知ってもらいたいということでまとめてみました。単なるまとめですが、新しい発見などあればうれしいです。 CSS3のはじめ まずは基本的な内容から。 CSS3について知っておきたいことのまとめ CSSの構造やベンダープレフィックスなど基本的な内容を幅広く載せています。CSS3は初めてという方はこれから見ていただければと思います。 保存版！CSS3セレクタの説明書 CSS3はセレクタとプロパティに分かれます。セレクタはこれで網羅できていると思います。 CSS3プロパティの勉強になるジェネレータ16個 プロパティは全部説明しきれないので、習うより慣れろということでジェネレータを使って慣れるのもいいかと思います。 CSS3プロパティの説明 数は少ないですが間違いやすいところ
スペースを有効に、jQueryでスクロールすれば現れるコンテンツ
このブログのように2カラムのレイアウトでメインコンテンツが長いと、スクロールしたときにサイドのスペースがなくなってしまいもったいないですよね。 サイドのコンテンツが終わった時点で固定されたコンテンツが現れたら無駄なくスペースを使えるのではないでしょうか。 ということで、サイドのコンテンツが終わったら固定されたコンテンツが現れるようにする方法を紹介します。 説明が下手で、イメージしにくい方もおられると思いますので、サンプルを用意しました。 イメージできましたでしょうか？ HTML 現れるボックスに何を表示するかによって中身も違ってくるので、とりあえず外枠だけ載せておきます。 <div id="fixed-box"> この中に表示したいコンテンツの内容を記述します。 </div> 挿入場所はサイドのコンテンツと同じ場所にします。 私は、はてブやツイートのボタン、ページ上部までスクロールするボタ
私がウェブサイト作成時にお世話になっているサイトをご紹介
こういうのを集めだすときりがないのですが、個人的に本当によくお世話になっているサイトに絞って紹介してみます。 有名なサイトばかりですがサイトを作るにあたってお世話になる順に紹介していきます。参考になればうれしいです。 Webデザインギャラリー | I/O 3000 まず、ギャラリーサイトでサイトのイメージを膨らませます。カテゴリ、タグ、カラーで整理されており、とても探しやすいです。 このようなギャラリーサイトは他にもありますが、ページ変遷なしで次を読み込むのでとても見やすいです。 他にはこんなサイトをよく見ます。 WEBデザインの見本帳 Web Design Clip 【Webデザインクリップ】 【HTMLタグの簡単検索】TAG index - ホームページ作成情報 プロの方はPhotoshopで描いてからコードを書いていくみたいですが、私は最初からHTMLを書いていきます。 一応Drea
コードの圧縮や外部ファイル化とページの読み込み速度について
なぜ、ごちゃごちゃしてるのか？ぱっと気づくのがこの2点です。 改行やスペースがほとんど使われていない CSSやJavascriptが外部化ファイル化されていない Googleとしてはソースがきれいなことよりも、読み込み速度を速くすることでユーザーのストレスを軽減したり、ファイルサイズ小さくすることでサーバーへの負荷を減らしたりすることの方が重要だと思います。 もちろんアップする前にこのような状態にしているだけで、それまではきれいに書かれているはずですが。 ということで、「コードの軽量化」と「外部ファイル化」の2点について考えてみます。 コードの軽量化について HTML、CSS、JavaScriptなどのコードは、改行やスペースを使わずサイズを小さくした方が読み込みは速くなります。 これは当然ですね。 コードの見やすさよりも読み込み速度やサーバーの負担軽減を優先するなら、できるだけファイルを
アクセスアップに効果的かも!?Facebookコメントの設置方法
最近色んなブログで見られるようになってきたので、FC2ブログについているコメントをFacebookコメントに代えました。 とはいっても、今までいただいたコメントがなくなるのはもったいないので、FC2ブログ側は過去のコメントは残して投稿をできないようにしました。 Facebookコメントにはメリットとデメリットがあると思いますが、個人的にはメリットのほうが大きいかなと思い設置しました。 メリット Facebookコメントだと、コメントした人のウォールに記事が表示されるのでアクセスアップにつながるかも 実名なので心無いコメントも減るかも（このブログではあまりありませんが） Facebookにログインしていれば簡単にコメントできる デメリット レイアウトが限られる Facebookのアカウントを持っていないとコメントできない Facebookコメントをやめたときに過去のコメントが台無しになる で
スクロール時の動きがおもしろい！パララックス効果を使ったサイト｜Webpark
最近よく見かけるようになったスクロールをしたときの動きが変わったサイトを集めてみました。パララックスやら多重スクロールなんて呼ばれているのですかね。見ていて楽しいです。 Mario Kart Wii Experience マリオカートの歴史などが道に沿って紹介されていきます。とても滑らかで走っているような感じがうまく表現されています。 東京タワーズ | Tokyo Towers 東京タワーをテーマにした写真集のサイトで、当然ですが美しい写真の数々です。最初の文字がばらけるところが好きです。 adidas x サッカー日本代表 アディダスとサッカー日本代表のページです。スクロールと関係ないけど、このフォント結構好きかも。 Nike Better World - The Journey - Intro Nikeのサイトってかなり手の込んだものが多いです。 Air Jordan 2012 - A
美しい横メニューの作り方
<ul id="menu"> <li><a href="#">html</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JavaScript</a></li> <li><a href="#">PHP</a></li> <li><a href="#">Perl</a></li> </ul> HTMLは最後まで変更しません。 #menu { width:530px; padding:0; margin:0; list-style-type: none; } #menu li { width:20%; float:left; padding:0; margin:0; text-align:center; } #menu li a { width:auto; color:#fff; font-size:12px; font-weight:
Media Queriesを使ったレスポンシブなサイトのまとめ
Media Queriesを使ったレスポンシブなサイトを個人的な好みで集めてみました。今回は変化のパターンが多くて、最終的にスマートフォンでもうまく見られそうなサイトを中心に集めています。 Media Queriesを使っているサイトは、Webフォントなど他にも新しい技術がたくさん使われており見ているだけで楽しいですね。 CSS-Tricks Smashing Magazine Where's My Sofa? | I ordered it. I paid for it. I'm still waiting for it. Breaking news, latest news, and current events - breakingnews.com London & Partners - The Official Promotional Organisation for London
CSS3 IE対策まとめ
CSS3を使うにあたっていつも問題になるのが Internet Explorer（IE）です。CSS3への対応が遅い上に、旧バージョンを使い続けているユーザーも結構いますので、CSS3を使うことに躊躇する人も多いのではないでしょうか？ ということでCSS3を使うにあたって知っておきたいIE対策を紹介します。 1. CSS3の対応状況を確認する まず、IEのバージョンごとでCSS3にどこまで対応しているか知っておく必要があります。個人的によく使っているのはこのサイトです。 CSS3 & HTML5 Browser Support CSS3で追加されたプロパティ、セレクタについてブラウザごとの対応状況が分かりやすく表示されています。 2. CSS3セレクタに対応する セレクタはSelectivizr.jsだけあれば簡単に対応できます。「CSSセレクタって何？」「CSS3セレクタってどういうもの
CSS3のtransition-timing-functionの動きをサンプルで理解しよう
<div id="transition">マウスを乗せてみてください <div id="ease">ease</div> <div id="linear">linear</div> <div id="ease-in">ease-in</div> <div id="ease-out">ease-out</div> <div id="ease-in-out">ease-in-out</div> </div> transitionはまとめて指定しています。transition-propertyとtransition-delayは省略しています。省略した場合、transition-propertyは「all」、transition-delayは「0s」になります。 #transition{ width:510px; padding:10px 20px; background:#f1f6fc; bo
IEでもそこそこできる！CSSで作る画像のようなボタン
#button { width:320px; color:#e4eef8; background:#337fcc; font-size:28px; font-weight:bold; text-shadow:0 -1px 1px #143352; text-align:center; display:block; text-decoration:none; border:1px solid #225588; padding:12px 0 8px 0; border-radius:12px; background:-moz-linear-gradient(rgba(34,85,136,0.5), rgba(34,85,136,1)); background:-webkit-gradient(linear, 100% 0%, 100% 100%, from(rgba(34,85,136,0.5
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
まとめて書くことができるCSSプロパティの8つのパターン