CSSの知識をもっと深める30+2の小技テクニック集｜Webpark基本的なことやちょっと変わった意外な使い方など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属性を省略することができます。写真共有サイトにユーザーが画像を
ゴーストボタンにマウスを乗せたときの動きいろいろ16個
昨年くらいから流行っているらしいゴーストボタンというもののサンプルをいくつか作ってみました。皆さん色々作られていて、今さら感もありますがぜひご覧ください。 今回、以下のルールに沿って16個サンプルを作りました。 HTMLは全て同じ マウスを乗せる前は同じ状態 擬似要素は使っても1つだけ 擬似要素を2つ使ったり、spanなんかをはさんでやるともっと色々できると思いますが、今回はシンプルにマウスを乗せたときに動きをつけるサンプルを紹介します。 サンプルはこのページで全て載せていますが、まとめて見たいという方はこちらをどうぞ。 ということで、HTMLはこんな感じになります。 <a href="#" class="btn sample1">sample 1</a> 普通のリンクですね。btnは共通部分、sample1はサンプルごとで違ってくる部分になります。 では、共通部分のCSSです。 a.bt
CSS3プロパティの勉強になるジェネレータ16個
CSS3のジェネレータを紹介します。海外サイトがほとんどですが簡単に使えると思います。それぞれ特徴があって面白いので、試しに色々作ってみればCSS3プロパティの勉強にもなります。 CSS3プロパティ全般 ボックスやテキストなど広範囲にわたって設定可能なジェネレータです。比較的有名なものが多いです。 CSS3.0 Maker テキストまわりから、角丸やシャドウ、回転など色々作れます。指定できる要素は以下のとおりです。 CSS Transform Box Shadow Text Shadow Text Rotation RGBA @Font Face Outline Offset Transition CSS Gradient CSS3 Generator これも指定できる要素はかなり多いです。レイアウトがシンプルで見やすいです。 Border Radius Box Shadow Text S
配色、デザイン、文章、写真、センスがないとあきらめる前に勉強しよう！｜Webpark
自分が作ったウェブサイトを見て、「センスないな」とへこむことはありませんか？ 私はよくあります。色使い、レイアウト、写真、文章などなど、どれをとってもセンスないなとへこんでいました。 けど、センスがないのではなく、単に基礎を勉強していないだけということに最近気づきました。センスはもっと高い次元の話でした。 ということで、センスを言い訳にしてしまいがちな分野の基礎を学べるすばらしい記事を集めました。この記事自体単なるまとめ記事ですが、できるだけ厳選し、読んでほしい順に並べました。皆さん、あきらめずに一緒に勉強しましょう。 配色 アクセントになる色を使うのが苦手で、同色系の色ばかり使ってしまうのですが、これらを読めば恐れずに使えそう。 色彩センスのいらない配色講座 ベースカラー、メインカラー、アクセントカラーに分類してどのような色を選ぶべきか分かりやすく解説してくれています。具体例もあって分か
CSSセレクタ20個のおさらい
CSSセレクタって意外と分かっていなかったりするので勉強ついでにまとめてみました。比較的実用的かなと思うものを20個紹介していきます。いい復習になればと思います。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 また、IEが対応しきれていないCSS3のセレクタもありますが、IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」 で紹介したようにCSS3セレクタはie対策も容易なのでぜひお試しください。 SelectivizrはCSSを外部ファイルで指定した方がいいのですが、今回のサンプルはCSSを外部ファイル
CSSだけで作る「多階層」なドロップダウンメニュー
以前書いた「CSSだけで作る動きのあるドロップダウンメニュー｜Webpark」という記事が検索エンジン経由でそこそこアクセスがあり、よく質問をいただきます。そのなかで多階層にできないのかという質問があったので作ってみました。 IE7の場合擬似要素が使えませんので、次の階層があることを示す矢印が表示されません。ドロップダウンの機能はIE7でも問題ありませんので、IE7に対応させる場合は矢印を画像にするなどすればよいと思います。 それではHTMLからいきます。 HTML かなり長くなるのでメニュー1の部分だけ載せています。 <ul id="dropmenu"> <li><a href="#">メニュー1</a> <ul> <li><a href="#">子メニュー</a> <ul> <li><a href="#">孫メニュー</a></li> <li><a href="#">孫メニュー</a>
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webpark