ダウンロードの前に会員登録がおすすめです（無料） SHOEISHA iDへ会員登録いただくと、翔泳社が運営する様々なジャンルの専門メディアの利用、およびイベントへの参加、会員特典などのサービスを受けることができます。 詳細は、こちらを確認ください。なお、登録される場合、SE Book News,SEshop.com News が自動的に配信されます。メールマガジンが不要な方は登録後にいつでも解除できます。 会員登録（無料）

可視範囲になってから表示されたり動いたり、スクロールに応じてアニメーションさせる方法を紹介します。動きをつけて目を引くことで、効果的に伝えることができるかもしれません。 以前、「jQueryを使って、スクロールしてコンテンツが現れたときにアニメーションさせてみる｜Webpark」という記事で同じようなものを紹介したのですが、デモが気に入っていない、アニメーションが1度きりということで作り変えました。 まずはサンプルをご覧ください。スクロールするとアイコンとテキストが順番にフェードインします。 このサンプルで使われている、画面いっぱいに表示する方法と、上にスクロールしたときに現れるメニューは以前紹介しています。気になる方はどうぞ。 画面サイズに合わせて高さを指定する3つの方法｜Webpark jQueryで作る、下にスクロールで消えて、上にスクロールで現れる固定メニュー｜Webpark とい

HTML5でWebページを作成する時に役立つ、必要最小限のブランクのテンプレート、ナビゲーションを上部に固定配置、写真画像などの背景画像をブラウザいっぱいに表示させるシンプルなテンプレートを紹介します。 画像: Girly Drop HTML5で作成する時の必要最小限のテンプレート ナビゲーションを上部に固定配置 背景画像をブラウザいっぱいに表示 ※以前、当ブログで紹介したものもバージョンアップされています。 HTML5で作成する時の必要最小限のテンプレート まずは、HTML5でWebページを作成する時にのシンプルなブランクのテンプレート。 A Generic HTML5 Template -GitHub ライセンスはCC0 1.0で、個人でも商用でもクライアントの案件でも無料で利用できます。利用する際に、許可やコピーライトの明記などは必要ありません。 テンプレートはIE9や8以下への最低

HTML5は、ドキュメントを構造化する際に用いるセマンティックなコードです。あなたがどんなタグを使うかによって、ユーザエージェントにその意味を伝えます。 HTML5のタグにはさまざまなものがあり、中でもsectionとarticle要素は、div要素より有意義な方法でコンテンツを区分する手段として導入されました。これら3つをどのように使い分けるか確認しておきましょう。 Sectioning Content in HTML5 -Div or Section or Article 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 divとsectionとarticle、それぞれの特徴 divとsectionとarticle、どれを使う？ sectionとarticleの組み合わせ方 divとsectionとarticle、それぞれの特徴 d

Flusk is a Responsive Multipurpose Website Template brought to you by Themewagon. This is a one page template has an immaculate, sleek design and is modern and professional. Not only that, this template is FREE for personal and commercial use! Recommended Reading: Developer- Free Responsive SEO Friendly Online Portfolio HTML5 Template Video Demo of Flusk – The Multipurpose Bootstrap Template free

画像は使用せずにCSSだけでスタイリングしたタイトル（見出し）のデザインサンプルで、似たようなものやちょっとCSS追記した程度のものも多いですが全50種類です。 全体的にすごく手間がかかっているようなものはないのですが、似たようなタイトルデザインを使う場合はCSSコピペで実装できると思います。 また、一部複数行に向かないものもありますが、基本的には複数行のタイトルでも見栄えが崩れない感じのものになっており、余白やカラーなどを調整することでデザインを変更するのも容易です。 以下で紹介している内容は一部異なるものもありますが、基本的に下記のようなシンプルなHTMLを使用しています。 ただ、一部異なるものといってもいずれもspan要素を1つ追記する程度です。

画像リンクにカーソルを乗せると半透明になるようにしているサイトをよく見かけます。薄くなりすぎるのはあまり好きではないので半透明以外にいい方法がないか色々と考えてみました。 画像がリンクになっているか確認するためには当然カーソルを乗せる必要があります。カーソルを乗せたとき、画像が半透明になって見えにくい場合、カーソルを画像から外します。私はそんなひと手間が面倒に感じます。 確かに画像がリンクであることを示すために何か変化をつける必要があると思います。その変化は半透明ではない方がよいのではと私は思います。ひょっとしたら気付いていない大切なメリットがあるのかな。 画像リンクにカーソルを乗せると、何も指定しなくてもポインタになります。文字リンクと同じです。それだけで十分かもしれませんが、画像リンクにマウスを乗せたときの動きを考えてみました。 ちなみに、写真は和歌山市にある不老橋という橋です。 マウ

縦長のサイトなどで、1つのセクションが画面の大きさと同じになっていることがよくあります。横幅はwidth: 100%;でいいわけですが、高さを画面サイズに合わすにはちょっと工夫が必要です。今回、画面サイズに合わせて高さを指定する方法を3つ紹介します。 画像は背景で指定していて、最初と最後は固定しています。固定している部分は難しいことをしているように見えますが、CSSだけで簡単にできます。 section { background: url(image.jpg) no-repeat fixed; background-size: cover; } では、高さの指定方法を100%を例に3つ紹介します。 jQueryを使う まずは、jQueryを使う方法です。個人的には１番なじみがあります。 $(document).ready(function () { hsize = $(window).he

こんにちは、さち です。 今回は、Firefox で アドオンを使わずにウェブサイトの色を抽出（スポイト）する方法について 書いていきます。 アドオンなしでウェブサイトの色を抽出（スポイト機能） メニューの「ツール」→「Web開発」→「スポイト」と進みます。 （メニューがない場合は「Alt」キーを押して表示） 拡大鏡が表示されます。 色を抽出したい部分にカーソルを合わせましょう。 クリックすると色がコピーされます。 ペーストで色コードを貼り付けられます。 色を抽出する時の形式を変更する 「Ctrl + Shift + I」で開発ツールを表示。 「歯車」ボタンをクリックします。 「既定の色単位」で色の表示形式を変更できます。 形式は「16進数」「HSL(A)」「RGB(A)」「色の名前」の4種類。 （「色の名前」を選んだ場合、色名がない時は「16進数」で表示） CSS に用いるなら「16進数

2012年7月12日のGoogle ウェブマスター向け公式ブログの記事「HTML と CSS のコーディングガイドライン」で紹介されていた「Google HTML/CSS Style Guide」に書いてあるコーディング方法と感想を紹介します。 Google HTML/CSS Style Guideの日本語翻訳 Google HTML/CSS Style Guideは英語なのでGoogle Chromeで翻訳して確認していたんですが、すでに翻訳してあるサイトがあったのでこちらも参考に両方を見て確認していきました。 Google HTML/CSS Style Guideを翻訳してある記事「Google HTML/CSS Style Guide」を適当に和訳してみたは、かなり助かり参考になりました。 それではGoogle HTML/CSS Style Guideに書いてあるHTMLとCSSのコ

閲覧ページの先頭まで移動できるように設置しているところも多い「ページトップ」や「ページの先頭へ」といったページ内リンクで、移動する際の動きにjQueryを使ってエフェクトをつけたサンプルです。 よく見かける単純なスムーススクロールを含めた全5種類で、少しいじればその他の場所へのページ内リンクの動きとしても実装できます。 紹介している方法はいずれもjQueryを使用しており、サンプルによってはjQuery Easingも使用しているので予め読み込ませてください。 jQueryの記述はいずれもセレクタにa要素を指定しているため、特定の要素にのみ適用させたい場合などはidやclassを用いるなどして指定してください。 使用するHTML・デモ サンプルで使用しているHTMLは下記のようなa要素のhrefには#を記述したシンプルなものになっています。

HTML5では、セクションを入れ子にすることで文書の階層構造を表せるようになりました。 このページでは、セクションがどのように生成されるのかを簡単に説明しています。 h1-h6要素を配置すると、そこに暗黙的なセクションが生成されることになります。 次の例では、bodyセクションの中にランク2のセクションを（暗黙的に）配置しています。（ランク1はbodyセクションの見出しとなります） <body> <h1>ランク1</h1> <h2>ランク2</h2> </body> 直前の見出しよりも低いランクを配置した場合は、子セクションが生成されます。次の例では、ランク2のセクション内にランク3のセクションが配置されていることになります。 <h2>ランク2</h2> <h3>ランク3</h3> 直前の見出しと同じランクを配置した場合は、新規のセクションが生成されます。次の例では、同じ階層に2つのセクシ

Generates a navigable page outline with heading and sectioning elements This extension is using the HTML5 outline algorithm to create a table of contents. Should also work well with HTML4 (and older?) pages, that have structured headings. The table of contents is clickable and tries to highlight the heading/section in question after the jump. The extension should prove useful to people who find th

A Responsive Design Approach for Complex, Multicolumn Data Tables Posted by Maggie Wachs 12/29/2011 April 2020 note: Hi! Just a quick note to say that this post is pretty old, and might contain outdated advice or links. We're keeping it online, but recommend that you check newer posts to see if there's a better approach. In responsive web design, one of the toughest design problems to solve is how

と呪文のように書いてきたが、いい加減ちゃんと整理して理解しよう。 いろいろ調査した結果、以下の考え方で理解できると思う。 まず、実際の液晶の解像度は一旦忘れろ。 <meta name="viewport" content="width=480">と指定したとする。 するとそこに幅480pxの仮想的なウインドウが作られる。幅480pxの液晶モニターがあることをイメージして欲しい。これをviewportと呼ぶ。 ブラウザはviewportにレンダリングする。viewportの中では、あたかも本当に480pxのモニターを使っているかのような環境になっている。なので、JSのdocument.documentElement.clientWidthなんかも480を返すし、media queryの条件判定でも480pxの画面幅が使われる。 次にviewportを実際の液晶画面に表示する。この時、view

The past, present, and future of personal expression through fonts