CSS(スタイルシート)の基本、小技、テクニック総まとめ
CSSの基本や使える小技テクニックなどを幅広くまとめました。以前書いて今もそこそこアクセスがある「CSSの知識をもっと深める30+2の小技テクニック集｜Webpark」という記事があるのですが、2年近く前の記事ですしパワーアップさせて作り直しました。 恐らく過去最長の記事ですので目次を作りました。クリックするとするりと移動します。基本的な内容が多いですが、お役に立つ項目があればうれしいです。 ということで順番に説明していきます。 1. 全般的なこと 1-1. CSSリセット ブラウザごとでデフォルトのスタイルは異なっています。その違いをそのままにしておくと、後でブラウザ間の表示の違いに悩むことになり、どこが原因か分からないとイライラしてしまいます。 そんなことのないように、いったんデフォルトのスタイルをリセットしてしまおうというのがリセットCSSです。 方法は色々ありますが、個人的には一番
私がウェブサイト作成時にお世話になっているサイトをご紹介
こういうのを集めだすときりがないのですが、個人的に本当によくお世話になっているサイトに絞って紹介してみます。 有名なサイトばかりですがサイトを作るにあたってお世話になる順に紹介していきます。参考になればうれしいです。 Webデザインギャラリー | I/O 3000 まず、ギャラリーサイトでサイトのイメージを膨らませます。カテゴリ、タグ、カラーで整理されており、とても探しやすいです。 このようなギャラリーサイトは他にもありますが、ページ変遷なしで次を読み込むのでとても見やすいです。 他にはこんなサイトをよく見ます。 WEBデザインの見本帳 Web Design Clip 【Webデザインクリップ】 【HTMLタグの簡単検索】TAG index - ホームページ作成情報 プロの方はPhotoshopで描いてからコードを書いていくみたいですが、私は最初からHTMLを書いていきます。 一応Drea
ウェブサイト作成に役立つ35のwebサービス｜Webpark
ウェブサイトを作成する際に個人的に使っているWebサービスを紹介します。幅広く35個紹介しますので、新しい発見があれば幸いです。 フォント関係 wordmark.it パソコンに入っているフォントを一覧で見ることができます。フォントサイズも調整できます。 日本語フォント252種類を表示確認できます！フォントを探すならfonthack.jp。 日本語フォントの表示が確認できます。現在252種類あります。 PXtoEM.com: PX to EM conversion made simple. ベースのサイズ（px）を決めると、em, pt, %の値が表示されます。 カラー関連 ウェブ配色ツール Ver2.0 配色ツールは色々ありますが、日本語ですし、あまり考えなくても感覚的に使えるので楽しいです。 Color Scheme Designer 3 カラーパレットジェネレーターです。海外サイトで
サイトの「色」選びに役立つ20のツール
色選びに困ったときに助けてくれるウェブツールを20個紹介します。具体的な配色アイデアが紹介されているもの、選んだ色と関連する色が表示されるもの、画像から色を抽出するもの、という感じに分けてみました。 配色アイデア タイプ 投稿された配色アイデアが紹介されているサイトです。アイデアから編集できるサイトもあり、取っ付きやすいと思います。 Color Trends + Palettes :: COLOURlovers kuler ColoRotate: Colors come to life in 3D. Color Theory @ ColorJack カラーピッカータイプ 好きな色を選ぶと、その色と相性のよい色や関係性の高い色などが表示されます。 ウェブ配色ツール Ver2.0 Color Scheme Designer 3 [ws] Color Scheme Generator 2 Col
CSSセレクタ20個のおさらい
CSSセレクタって意外と分かっていなかったりするので勉強ついでにまとめてみました。比較的実用的かなと思うものを20個紹介していきます。いい復習になればと思います。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 また、IEが対応しきれていないCSS3のセレクタもありますが、IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」 で紹介したようにCSS3セレクタはie対策も容易なのでぜひお試しください。 SelectivizrはCSSを外部ファイルで指定した方がいいのですが、今回のサンプルはCSSを外部ファイル
犯してはいけないHTMLタグの過ち10個
【追記】 HTML5ではインラインとブロックの要素分類がなくなり、代わりに、メタデータ、フロー、セクション、ヘッディング、フレージング、エンベッディッド、インタラクティブというコンテンツの種類が定義されています。 2. 画像に代替テキストのalt属性が入っていない <img src="sample.gif" /> alt属性は、Webページに表示されるすべての画像に必須の要素ですので、必ず使用する必要があります。 <img src="sample.gif" alt="サンプル" /> 必須の要素ですので、特にテキストで表示する必要がない場合でも、alt=""としておく必要があります。 【追記】 HTML5では「Images whose contents are not known(どのような内容かわからない画像)」に限り、alt属性を省略することができます。写真共有サイトにユーザーが画像を
今なおブラウザシェア10.1%もあるIE6とどう向き合えばいいのか
登場から10年以上経つにもかかわらず、亡霊のようにいき続けているIE6（Internet Explorer 6）ですが、日本でのシェアは10.1%もあるようです。 見過ごせない数字ですので、そんなIE6について考えてみます。 Internet Explorerの歴史 Internet Explorerは1995年8月24日に公開され、現在はIE9まで公開されています。 IE1 - 1995年 8月24日 IE2 - 1995年11月27日 IE3 - 1996年 8月16日 IE4 - 1997年 9月30日 IE5 - 1999年 3月18日 IE6 - 2001年 9月19日 IE7 - 2006年11月 2日 IE8 - 2009年 3月20日 IE9 - 2011年 3月15日 今回のテーマであるIE6は2001年に公開され、5年以上も最新バージョンとして提供されていたことになりま
ロゴ、背景、アイコンなどの画像ジェネレータ厳選20個｜Webpark
背景、ロゴ、favicon、Ajaxローディングなどの画像をオンラインで作成できるサイトを集めました。まだまだありますが、多すぎるとかえって不便だと思うので各ジャンルごとで3個または5個で厳選しています。 背景関連 1. Stripe Generator ストライプの模様を作るならここ。ストライプの幅はもちろん、影や柄なども自由自在です。グラデーションもつけることもできます。 2. bgMaker 背景パターン作成サイトです。サイズは自由に変更できて、リアルタイムで背景に提要されて確認できるので便利です。 3. BgPatterns ― Background Patterns Maker こちらも画像の背景パターン作成サイトです。背景画像の組み合わせからサイズや色まで詳細にカスタマイズすることができます。 4. Dotted Background Generator 水玉模様の背景画像が作
サイト作成に欠かせないサイトやサービスなどを20個｜Webpark
私がサイトを作る際によくお世話になっているサイトやサービス、フリーソフトを紹介します。個人的に見ているものだけなのでまだまだあると思いますが、ご参考になればうれしいです。 週間ウェブデザイン 次の「あんじょうできてはる」が更新停止になっているのでこちらを。1ページあたりの表示数が多いので探しやすいですね。 あんじょうできてはる Webデザインのギャラリーはたくさんありますが、見やすさ探しやすさでこちらをよく見ます。更新は止まっちゃってますが。。 MephoBox ヘッダーやフッターなど部分的なものにこだわった海外のギャラリーです。404やナビゲーションなんかもあり参考になります。 ロゴストック 日本を中心にかなりの数のロゴが集められています。管理人さんや訪問者の評価も見ることができて参考になります。 フリーの素材集です。「ロイヤリティフリーなフリーフォト、無料写真素材サイトのまとめ」もご参
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSの知識をもっと深める30+2の小技テクニック集｜Webpark