はてなブックマーク

HTML5が2014年10月28日に正式勧告されましたが、見出しのマークアップについて曖昧に理解されている方も多いようなので改めて書いてみました。 2016年11月1日に勧告されたHTML5.1で仕様が変更されました。「HTML5.1におけるh1（見出し）の使い方」はこちら。 以前のマークアップ HTML5より前のHTML4.01やXHTMLでは、h1はページ内で1回しか使用できず、順次h2からh6まで見出しのレベルに応じてマークアップしていました。 例えば、この本の目次を例にマークアップしてみます。 <h1>HTML5&辞典</h1> <h2>第1部 第1章 HTML5の基礎知識</h2> <h3>01 HTML5とは</h3> <h3>02 HTMLの基本的な構造</h3> <h3>03 文法上の注意点</h3> ： <h2>第1部 第2章 HTML5リファレンス</h2> <h3>0

jQueryのanimate()メソッドを使えば文字や画像などのオブジェクトを簡単に動かしてアニメーションさせることができます。この animate()メソッドは奥が深くて、オプションを指定することで動作をカスタマイズすることができます。 オプションの指定なし（.box1） まずは、オプションの指定をせず単純にクリックしたら leftプロパティで右に動かしてみます。 ↓ クリックすると動きます。 （再確認は再読み込みしてください） .box1 <span class="box1">WEB-LABO</span> .box1{ position: relative; font-weight: bold; font-size: 32px; font-family: impact; color: #333; background-color: #eee; display: inline; pad

HTMLはこうなってます このブログのCSSとかぶらないように、今回は敢えてdiv要素を使っていますが、この辺は自由に変更してください。 <div id="a">AAAAAAAAAA</div> <div id="wrap_a"> <p>A1</p> <p>A2</p> <p>A3</p> <p>A4</p> <p>A5</p> </div> <div id="b">BBBBBBBBBB</div> <div id="wrap_b"> <p>B1</p> <p>B2</p> <p>B3</p> </div> <div id="c">CCCCCCCCCC</div> <div id="wrap_c"> <p>C1</p> <p>C2</p> <p>C3</p> <p>C4</p> </div> 次はCSSです 大項目メニューを太字にして、マウスが重なった時にカーソルを変更しています。 中項目

list-style-imageで指定したリストマークがズレる時があります。そんな時は、背景画像にして対処すると簡単です。 list-style-imageで指定した場合 画像を作って、list-style-imageでリストマークを付けてみます。 <ul id="list1"> <li>リストアイテム１</li> <li>リストアイテム２</li> <li>リストアイテム３</li> <li>リストアイテム４</li> <li>リストアイテム５</li> </ul> #list1 li{ list-style-image:url("list_mark_arrow.png"); } この様に画像のサイズによってはズレることがあります。 文字の中央より下側にずれています。 リストアイテム１ リストアイテム２ リストアイテム３ リストアイテム４ リストアイテム５ background-imag

先週、金曜日に問い合せフォームから問い合わせしていたところ、今日の午後に「はてブ」からメールが来ました。 早速確認したところ、反映されてました！ 「faviconを変更したのに、はてブに反映されない！」という場合の対処法です。 先週、「はてブに掲載された！でも、ファビコンが表示されてないよ？という時は」でも書きましたが、サイトのfaviconを変更しても下の画像の様に「はてブ」には反映されません。 そこで、はてブのfaviconを更新したい場合は、フォームから問い合わせしましょう。 はてなブックマーク – お問い合わせ で、問合せしたら、次のような自動返信メールが送ってきました。 こちらは、はてなサポート窓口です。このたびは、お問い合わせありがとうございました。 内容を確認し、はてなスタッフがメールにてご返信いたします。 お問い合わせの内容によっては数日から1週間程度お時間をいただく場合が

Webデザイン上達の秘訣はナニか？ それは、たくさん作ること。 現在どのレベルなのかで、やるべきことも変わってくるけど、まずは「沢山作ること」が上達の近道だと思います。 真似して作ることも出来ないのに、頭の中のイメージをカタチにできるはずがない。 真似して作れるということは、頭に浮かんだイメージもカタチにできるということ。逆にいえば、真似して作ることもできなければ、頭に浮かんだイメージもカタチに出来ないということ。 既にあるページは、ハッキリと目で見れるので作りやすい。 頭の中のイメージは、ぼんやりとした形のないものだから既存のサイトを真似するよりも難しい。 なので、最初は既存のページを真似して作ることで、デザインやレイアウト、画像の作り方からコーディングまで全て学べます。そうやってWeb制作の基礎体力を身につけましょう！ 「WEBデザインの大原則」は、授業で使ってました。これが良かったの

専門学校の授業でやっている課題で学生作品にリンクする為のページを作りました。写真をベースにしたフルHD対応のページにしたかったけど、フルHDではないPCやタブレット、スマホでアクセスしてもメニューをクリックできるように、ウインドウサイズによりメニューの位置を変更するようにしました。 作ったのは↓このページ。 ※サーバの契約が終わったのでリンクは外しました。 以前、スクロールの時にうまくいかないことがあったので、リサイズが終わった時だけ処理するようにしたいと思い今回は粘って検索したら次のページを発見しました。 [jQuery] ウインドウのリサイズ操作が終わった時にだけ処理を実行する var timer = false; $(window).resize(function() { if (timer !== false) { clearTimeout(timer); } timer = se