flexboxもこれで完璧にマスター！HTMLとCSSの最新の知識とテクニックが詳しくまとめられたオススメの本 | コリス

2017/08/25 26 users Flexbox コリス CSS サポ 見出し

レイアウトはflexboxが標準になり、HTML5.1でsection要素や見出しの使い方が変更され、Web制作の現場で新しい知識の必要性が求められています。多様化するWebページを実装する最新の知識とテクニックが詳しくまとめられたオススメの本を紹介します。 モバイルファースト・オンリーでデスクトップからスマホが主流になり、ブラウザのシェアはChromeが頭一つ抜け、IE9などの古いブラウザはサポ... 続きを読む

HTML 5.1で変更されたsection要素の使い方、header要素とfooter要素のネストについて解説 | コリス

2016/12/13 112 users コリス HTML ネスト アウトライン 事例

2016年11月1日に、 HTML 5.1 が勧告されました。HTML 5から新しく加えられた点、削除された点、変更された点がいろいろあります。 その中から、ページのアウトラインを組み立てる上で重要なsection要素の使い方、header要素とfooter要素のネストについて具体的な事例を添えて紹介します。 Document Outlines in HTML 5.1 下記は各ポイントを意訳したも... 続きを読む

各コンテンツがカーテンを上げるように表示される縦長ページを簡単に実装できるシンプルなテンプレート -OnePageR | コリス

2014/12/19 65 users Onepager コリス div Step スクリプト

div, section要素で配置したパネルをブラウザいっぱいに表示にし、スクロールするとカーテンを上げるようにパネルを次々に表示させるスクリプトを使ったテンプレートを紹介します。 キーボード操作、タッチ・スワイプ操作対応、ナビゲーション装備、コードが非常にシンプルなので縦長ページのテンプレートとして活躍する優れ物です。 デモページ：スマホで表示 OnePageRの使い方 Step 1: 外部ファ... 続きを読む

[JS]縦長ページで構造に合わせて水平コンテンツをうまくレイアウトするスクリプト -gridscrolling.js | コリス

2014/06/27 50 users コリス jQuery 垂直 ウェブページ スクリプト

メインコンテンツとなる垂直に配置されたsection要素に、それぞれのサブコンテンツとなるaside要素を水平に自動配置するjQueryのプラグインを紹介します。 垂直・水平スクロールを使ったウェブページだけでなく、プレゼン用のスライドなどにも利用できそうですね。 gridscrolling.js gridscrolling.js -GitHub gridscrolling.jsのデモ grids... 続きを読む

[JS]実装は簡単でスマフォにも対応、縦長ページをスクロールする時にちょうどいい位置にスナップさせるスクリプト -Scrollify | コリス

2014/06/16 188 users jQuery コリス div要素 スクリプト デス

section要素やdiv要素でパネルを垂直に配置した縦長ページをスクロールする時に、各パネルをちょうどいい位置にスナップさせるjQueryのプラグインを紹介します。 デスクトップのホイール操作、スマフォやタブレットなどのタッチ操作にも対応しています。 Scrollify Scrollify -GitHub Scrollifyのデモ Scrollifyの使い方 Scrollifyのデモ デモはデス... 続きを読む

MdN Design Interactiveにて連載した「ゼロからはじめるHTML5でのサイト制作」全12回まとめ | Webデザインクリップ｜Web制作に便利な情報を集めたまとめサイト

2012/05/30 963 users MdN Design Interactive Web制作

以前MdN Design Interactiveに連載させていただいた『HTML5でサイトをつくろう！ゼロからはじめるHTML5でのサイト制作』が12回で完結しました。 この連載ではHTML5でのマークアップが初めての方向けにHTML5で変更になった点や新要素の使い方、使い方がわかりにくいといわれていたsection要素やarticle要素の使い方、ブロックレベルやインラインの変わりとなるカテゴリ... 続きを読む

[CSS]ハッシュリンク先がどのエリアなのかを分かりやすくするスタイルシート | コリス

2012/04/10 36 users コリス NAV Hoge CSS One

ハッシュリンク（#hoge）をクリックすると、その先頭はページ上部に表示されるので分かりますが、どこまでがそのエリアなのか分かりやすくするスタイルシートのテクニックを紹介します。 実装 HTML HTMLはシンプルで、ナビゲーションをnav要素、コンテンツをsection要素、各ハッシュリンク先はdiv要素で実装します。 <nav> <a href="#one">1</a> <a href="#t... 続きを読む

HTML5の勉強を始めた際に使い方に迷う新要素「article要素」の基本と使い方をまとめてみました【MdN連載第5回目】 | HTML5でサイトをつくろう

2012/01/11 143 users article要素 MdN連載第5回目 勉強 HTML5 定義

前回はセクショニング・コンテンツの要素の中で定義が漠然としていて使い方がわかりにくいとよく言われている「section要素」についての基本とサンプルをまとめました。 今回はもうひとつわかりにくい要素の「article要素」の要素をまとめてみたいと思います。 section要素についてのまとめた前回の記事はこちら HTML5の勉強を始めた際に使い方に迷う新要素「section要素」の基本と使い方をま... 続きを読む

HTML5の勉強を始めた際に使い方に迷う新要素「section要素」の基本と使い方をまとめてみました【MdN連載第4回目】 | HTML5でサイトをつくろう

2011/12/27 539 users article要素 原稿 要素 段階 疑問

HTML5の勉強を始める際に新要素の使い方などを勉強すると思いますが、その際にまず迷うのが「secion要素」と「article要素」はどういうときに使うのだろか？使い分けはどういうようにするのか？という疑問にほとんどの人が行きつくとおもいます。 しかしこれはコンテンツの原稿によっても変わるものなので何もない段階で要素だけ見て「secion要素」はこうする、「article要素」はこうするという絶... 続きを読む

[CSS]スクリプト無しで、高さがバラバラの画像を隙間無く配置するスタイルシートのテクニック | コリス

2011/07/26 256 users コリス Alt Photos グリッド CSS

ブラウザのサイズを変更してもそれに合わせて、高さがバラバラの画像をグリッドに沿って隙間無く配置するスタイルシートのテクニックを紹介します。 下記は各ポイントを意訳したものです。 画像を隙間無く配置する実装方法 HTML HTMLはimg要素をsection要素で内包したシンプルなものです。 <section id="photos"> <img src="images/dog-1.jpg" alt=... 続きを読む