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>
私がよく使っているWebサイト作成に役立つブックマークレット
ユーザーがウェブブラウザのお気に入りなどに設置されたブックマークレットをクリックすると、ブックマークレットに記述されたJavaScriptの小さなプログラムが、ウェブブラウザで起動する。プログラムはページの外観や表示を変更したり、他の場所にジャンプしたり、子ウィンドウを表示したり、ウェブブラウザで表示中のウェブサイトのURLを取得したり、ユーザーに追加情報の入力を促したりする。 - Wikipediaより ということで、プログラムを起動するボタンとしてブックマークを使う感じです。では、私が普段から使っているお勧めブックマークレットを紹介します。 XRAY クリックした要素の内容を表示してくれます。topやleftなどの位置関係、width、height、margin、paddingなどのボックスに関することなどが一目で分かります。 ColrGrabr そのサイトにどのような色が使われている
スマホ用サイトに便利！ リンクを表す矢印をCSSだけで作る方法
去年地元のイベントのホームページを作ったのですが、Google Analyticsで調べてみると、スマホからのアクセスが全体の3/4もありました。 スマホでも問題なく見れたのですが、小さくて見にくいので、スマホで見た場合に1カラムになるなど若干スマホに対応しました。 その際にリンクであることを表す矢印をCSSだけで作りました。スマホはマウスを乗せるという行為がないので、リンクであるということがすぐに分かるようにするのは大切ですね。 Webフォントでもいいのですが、矢印１つのためにWebフォントを読み込むのはパフォーマンス的にどうなのかと思うのでCSSにしました。 他のサイトでもよく紹介されていますが、とても便利なので解説します。 サンプルを用意していますのでご覧ください。 では解説していきます。 HTML まず、HTMLです。 <ul id="menu01"> <li><a href="#
犯してはいけない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属性を省略することができます。写真共有サイトにユーザーが画像を
サイト作成に欠かせないサイトやサービスなどを20個｜Webpark
私がサイトを作る際によくお世話になっているサイトやサービス、フリーソフトを紹介します。個人的に見ているものだけなのでまだまだあると思いますが、ご参考になればうれしいです。 週間ウェブデザイン 次の「あんじょうできてはる」が更新停止になっているのでこちらを。1ページあたりの表示数が多いので探しやすいですね。 あんじょうできてはる Webデザインのギャラリーはたくさんありますが、見やすさ探しやすさでこちらをよく見ます。更新は止まっちゃってますが。。 MephoBox ヘッダーやフッターなど部分的なものにこだわった海外のギャラリーです。404やナビゲーションなんかもあり参考になります。 ロゴストック 日本を中心にかなりの数のロゴが集められています。管理人さんや訪問者の評価も見ることができて参考になります。 フリーの素材集です。「ロイヤリティフリーなフリーフォト、無料写真素材サイトのまとめ」もご参
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
