HTML5&CSS3 TIPS サポタント 株 式 会 社
HTML5 TIPS HTML5のTipsご 紹 介
HTML5での 主 要 なマークアップ HTML5から 新 しく 追 加 された 要 素 を 使 ってマークアップした サンプルコード 1 <!DOCTYPE html> <head> <meta charset="utf-8"> <title>web モバイル 専 門 人 材 派 遣 紹 介 ウェブタント</title> <meta name="description" content="web モバイル 専 門 人 材 派 遣 紹 介 "> <meta name="keywords" content=" 人 材 派 遣,WEB"> <style>/* CSS */</style> <script>/* JavaScriptコード */</script> <! [if lt IE 9 ]> <script src=" /js/ ie/ html5shiv.js"></script> <![endif] > </head> <body> <!-- ヘッダ --> <header> <h1>html5 Tips 集 プレゼント<h1> <nav> <ul> <li><a href="../index.html">トップページ</a></li> <li><a href=../html/ >CSS3 Tips 集 プレゼント</a></li> </ul> </nav> </header> まずはhead 部 分 から DOCTYPE 宣 や 字 コードの 指 定 scriptの 記 述 など ずいぶんとスッキリしましたね! IE9 未 満 の 対 応 は 2012 年 5 中 旬 からはzipファ イルをダウンロードし 分 のサーバーへアップ してheadに 組 み 込 みます 1 https://github.com/afarkas/html5shiv へ き ZIPを 解 凍 し dist フォルダにある JavaScriptファイルを 分 のサーバーへUPして 読 み 込 みます <body> 以 下 の<header>はHTML5から 追 加 され た 新 しい 要 素
HTML5での 主 要 なマークアップ HTML5から 新 しく 追 加 された 要 素 を 使 ってマークアップした サンプルコード < 較 してみよう> これまでのHTML <html> <body> <header> <div id="header">...</div> <div id="nav">...</div> <div id="container"><h1>...</h1></div> <div id="footer">...</div> </body> </html> HTML5 <html> <body> <header>...</header> <nav>...</nav> <article> <section> <h1>...</h1> </section> </article> <footer>...</footer> </body> </html> <footer> <article>や <section> <article>は 独 立 しても 成 り 立 つような コンテンツを 囲 う <section>は テキストや 文 章 はここです!という マークアップ 見 出 しタグを 含 むような 内 容 を 括 る 従 来 のHTMLでは<div>にidやclassで 構 造 名 をつけ ここからはヘッダ ここからはメインコンテンツ~ といったよう に 分 類 していた 人 が 多 いのではないかと 思 います HTML5では 構 造 化 タグと 呼 ばれる 新 しい 要 素 (タグ)が 追 加 され ヘッダは<header>で 囲 み フッタは<footer>で 囲 む など 文 章 構 造 としてそれぞれをマークアップするようになりました <article> 要 素 は コンテンツとして 独 立 しても 成 り 立 つ 部 分 をくくり たいときに 使 用 します Blogの 記 事 や テキストコンテンツなど <section> 要 素 は パーツや 要 素 を 囲 うもので 文 書 のアウトラインを 明 確 にする ために 使 用 します sectionの 中 には<h1><h2>のような 見 出 しタグが 入 っていることが 推 奨 されています コンテンツをぐるっと<article>で 囲 み その 中 の 文 書 パーツは <section>でマークアップ <section> 内 に<h1>など 見 出 しから 始 まるコ ンテンツが 入 っている というような 構 造 になります
HTML5での 主 要 なマークアップ HTML5から 新 しく 追 加 された 要 素 を 使 って マークアップした サンプルコード <body> <div id="wrapper"> <! header > <header><h1>header 本 文 </h1></header> <! nav > <nav> <ul><li><a href= # >link1</a></li><li><a ref= # >link2</a></li></ul> </nav> <article> <section> <h1><h2>など 見 出 しが 続 いたら <hgroup>で 括 ってあげます <hgroup><h1>html5</h1><h2>header 要 素 とは</h2></hgroup> <p> 本 文 </p> </section> <section> <h2>footerの 書 き 方 </h2><p> 本 文 </p><p> 本 文 </p><p> 本 文 </p> </section> </article> < footer > <footer><small><p>コピーライトなど</p></small></footer> <! /#wrapper > </div> </body> レイアウトスタイルを 適 用 するための wrapper として 使 っていた div 要 素 を section 要 素 に 置 き 換 える 間 違 いをやってしまいがちですので 気 を 付 けま しょう でも<div>を 使 わない というわけではありません 文 書 構 造 ではなく あくまでも レイアウトを 決 める ためのボックス はdivを 使 用 します <div>はcssで 装 飾 (レイアウト)するため <section> や<article>はHTML 内 でコンテンツの 構 造 をマークアッ プするためとして 使 い 分 けましょう 見 出 しタグを 置 くとそこからsectionが 始 まる そのsectionが 独 立 コンテンツとしても 成 り 立 つよう な 内 容 を 満 たしているなら articleで 囲 う と 覚 えま しょう Blogに 例 えると 記 事 全 体 をarticleで 囲 い 記 事 の 中 の 章 分 けはsectionでパーツわけする といっ たようになります
HTML5での 主 要 なマークアップ HTML5から 新 しく 追 加 された 要 素 を 使 って マークアップした サンプルコード <! フッタ > <footer> <p> <small> By <a href= http://webtant.net > お 仕 事 情 報 サイト ウェブタ ント</a><br > 2014 <ahref="htt p://webtant.net/" >webtant.net</a> </small> </p> </footer> footerエリアで 使 われている smallタグは さい 字 で 表 すときに 使 するのではなく ライセンス 関 連 の 記 述 や 免 責 規 約 を 表 すると きに 使 されるタグです
HTML5で 変 更 された 要 素 ご 紹 介 HTML5から 変 更 された 要 素 はいろいろありますが 部 をピックアップしてみました ブロック 要 素 全 体 を a で 囲 んでリンクにできる <a href="http://google.com"><p> Googleページに 飛 びます</p></a> <a name=""> のところへジャンプしていたアンカーリンク HTML5では id 指 定 で 飛 ばします <a href="#anchor">アンカーリンクへ 移 動 </a> ~~~ <h1 id="anchor">ここに 移 動 </h1> <b>は 強 調 や 重 要 性 という 役 割 はなくなりました 文 章 の 中 に 出 てくる 商 品 名 など 重 要 性 を 与 えるわけではなく 注 目 させたい 部 分 に 使 用 します *ぶっちゃけあんまり 使 わないかも <i>はイタリック( 斜 体 )じゃない 文 章 の 会 話 こんな 鍵 カッコの 中 など をマークアップ 考 えや 雰 囲 気 を 表 している 部 分 専 門 用 語 など 強 調 でもありません ( 例 ) <p><i> 明 日 は 休 みだー</i> 私 は 大 声 で 叫 んだ </p>
HTML5で 変 更 された 要 素 ご 紹 介 HTML5から 変 更 された 要 素 はいろいろありますが 部 をピックアップしてみました <hr>は 段 落 レベルの 変 わり 目 を 意 味 する 水 平 線 を 引 く 役 割 のあったhrは テーマの 変 わり 目 区 切 る 役 割 に ただし section 要 素 で 文 章 をマークアップするので sectionとsectionの 間 にhrを 入 れる 必 要 はありません 話 が 変 わるけど 見 出 しをつけるほどでもないな というときに 出 番 となります ( 例 ) <p> 今 日 から そのノウハウを 活 かして かけだしネットショップ 担 当 者 に 役 立 つ ECまわりのtipsをこのコラムスペースでお 伝 えしていきたいと 思 います </p> <hr> <p>セミナー 事 務 局 として 年 間 100 名 以 上 のかけだし 運 営 者 担 当 者 さんと 出 会 ってきましたが~~~ 続 く</p> <strong>は 入 れ 子 にしてさらに 重 要 度 をあげられる ( 例 ) <p> 1 社 2 社 だけではなく <strong> 商 材 やサービスが 異 なるショップなど<strong> 多 くのショップを 利 用 する</strong>こと でとても 勉 強 になります </strong></p> <お 軽 メモ 帳?!> 仕 事 中 に 急 にメモしたくなったとき 元 に 紙 とペンがない! そんなときに 便 利?な 技 data:text/html,<html contenteditable> このタグをブラウザのアドレスバーにいれると あら 不 思 議 ブラウザがメモ 帳 にへんし ん
HTML5で 背 景 に 動 画 を 置 いたサイトを 作 ろう 本 ではまだ 少 ないかもしれませんが 海 外 サイトでは 結 構 にしますね サイトイメージのブランディングや 具 体 的 な 内 容 を 背 景 で 動 画 再 することでより 視 覚 的 なインパクトを 与 えられます プロフィールサイトやポートフォリオサイトにも 良 いかもしれません 分 で 撮 影 してももちろんOKですが 無 料 有 料 で 様 々な 動 画 素 材 がありますのでそれらを 利 してみては 参 考 : 写 真 素 材 屋 さんの Fotolia では 動 画 も 販 売 されています 無 料 動 画 なら YouTubeのクリエイティブ コモンズ 検 索 で できます *ライセンスはしっかり 確 認 必 須 また ネットショップさんなどコンテンツが 多 いサイトには 向 いてません メインサイトの 他 に1つのサービスや 商 品 を 紹 介 するためのランディングページなどには 活 できそうですね 背 景 に 動 画 を 置 く 場 合 に 気 を 付 けたいこと 楽 はながさない 短 すぎず すぎない 動 画 20 30 秒 くらいが 適 当 ファイル 容 量 を 出 来 る 限 り 軽 くする 代 替 え 画 像 を 必 ず 意 しておく (モバイルなど 表 されない 環 境 ユーザーのために) <p>green</p> <video src="http://webtant.net/sample/sample.mov" autoplay loop> <img src="http://webtant.net/sample/images/sample.jpg" alt="greenphoto"> </video>
HTML5で 背 景 に 動 画 を 置 いたサイトを 作 ろう 動 画 とコンテンツを 重 ねあわせ レイヤーにして 表 する 容 量 を 軽 くすると どうしても 荒 くなってしまいますよね その 対 策 として 動 画 に 画 像 を 組 み 合 わせて 表 するとおしゃれが 感 アップします 装 飾 の 部 としてストライプなどの 背 景 画 像 を 使 うのも 良 いですが 細 かいドット 画 像 などを 使 うことで 違 和 感 なく 動 画 を 表 現 できます さらに 画 像 を 使 わずに 動 画 の 荒 さを 気 にさせないようにするためには background を rgba で 半 透 明 を 重 ねることで 溶 け 込 みます body { background: #000; video { position: fixed; right: 0; top: 0; z-index: 1; p { font-family: serif; color: #fff; font-size: 400%; margin: 50px; position: relative ; z-index: 2;
HTML5でのパンくずリスト Google 推 奨 HTML5のマイクロデータを 使 して 検 索 エンジンに 正 しくサイト 構 造 を 伝 えることでSEO 効 果 がアップします *マイクロデータは もちろんパンくずだけではなくコンテンツの 中 でのマークアップにも 使 できます <div itemscope itemtype="http://data vocabulary.org/breadcrumb"> <a href=" " itemprop="url"> <span itemprop="title">メニュー</span> </a> </div> <div itemscope itemtype="http://data vocabulary.org/breadcrumb"> <a href=" " itemprop="url"> <span itemprop="title">フードメニュー</span> </a> </div> <div itemscope itemtype="http://data vocabulary.org/breadcrumb"> <a href=" " itemprop="url"> <span itemprop="title"> 串 メニュー</span> </a> </div> マイクロデータをコンテンツにも 使 ってみたい! という 方 は こちらの 記 事 がオススメです http://hypertext.org/archives/2012/12/html5_microdata_getstarted.shtml
CSS3 TIPS CSS3のTipsご 紹 介
CSSを 書 くときに 気 を 付 けたいこと CSS3だから というわけではないですが 改 めて 気 を 付 けたいこと3 点! 1 2 3 スタイルを 指 定 している 要 素 を 先 にくっつけておくと 後 から 見 たときにわかりやすい 下 層 ページからコーディングしよう! 下 層 ページからコーディングしていくと TOPページは 差 分 だけコーディングでOK! CSSの 記 述 を 統 一 する div#content { margin-left:10px; margin-bottom:20px; div#main { margin:0 10px 10px 0; #content.error { margin-left:10px; ではなく div#content p.error { margin-left:10px; とか div#header h1 { font-size:12px; のように 記 述 しよう! 担 当 者 が 変 わると こんな 風 に 改 行 ルールがまちまちになっていたり 最 後 の 方 で あら?CSSが 効 かない! の 原 因 の1つになっていたりします
CSS3 コピペで 使 える! 役 つTips 先 頭 文 字 だけを 大 きくする(ドロップキャップ) #sample-text:first-letter{ font-size: 3em; float: left; スモールキャップス(スモールキャピタル) 大 文 字 を 小 文 字 と 同 じ 大 きさにできる #sample-text{ font-variant: small-caps; ぶら 下 げインデント 2 行 目 からは1 文 字 下 げたい 場 合 #sample-text{ padding-left: 1em; text-indent: -1em; liに 付 けたborder-topだけ 消 したい html <ul> <li> list01</li> <li> list02</li> <li> list03</li> <li> list04</li> </ul> css ul { _zoom: 1; overflow: hidden; ul li { margin-top: -1px; padding: 5px; border-top: 1px solid #333;
CSS3 コピペで 使 える! 役 つTips 見 出 しに 折 り 返 したフセンをデザイン *IE 用 にhtml head 内 に 記 述 必 要 * <! [if IE]> <style>.arrow { top: 100%; </style> <![endif] > html <div id="container01"> <h1> 見 出 しとかいれる<span class="arrow"></span> </h1> css h1 { background: #e3e3e3; background: moz linear gradient(top, #e3e3e3, #c8c8c8); background: webkit gradient(linear, left top, left bottom, from(#e3e3e3), to(#c8c8c8)); padding: 10px 20px; margin left: 20px; margin top: 0; position: relative; width: 70%; moz box shadow: 1px 1px 3px #292929; webkit box shadow: 1px 1px 3px #292929; box shadow: 1px 1px 3px #292929; color: #454545; text shadow: 0 1px 0 white; css.arrow { width : 0; height: 0; line height: 0; borde left: 20px solid transparent; border top: 10px solid #c8c8c8; top: 104%; left: 0; position: absolute;
CSS3 コピペで 使 える! 役 つTips ios Safariでも 使 えるテキスト 装 飾 (CSS3) *Androidでは ほぼ 表 現 可 能 一 部 非 対 応 グラデーション p{ font weight: bold; webkit background clip: text; webkit text fill color: transparent; background image: webkit gradient(linear, left top, left bottom, color stop(0%,#ff5db1), colorstop(48%,#f2b526), color stop(100%,#28c5ff)); 背 景 画 像 p{ font weight: bold; webkit background clip: text; webkit text fill color: transparent; background image: url(./bk.jpg); リフレクト p{ font weight: bold; webkit box reflect: below 10px webkit lineargradient(top,rgba(0,0,0,0),rgba(0,0,0,0) 20%,rgba(0,0,0,0.4)) ルビ *これはhtmlで 指 定 できます <p>casemobile:スマホコンテンツ<ruby> 開 <rt>かい</rt> 発 <rt>はつ </rt></ruby>ブログ</p> 縦 書 き p{ font weight: bold; webkit writing mode:vertical rl;
CSS3 コピペで 使 える! 役 つTips ios Safariでも 使 えるテキスト 装 飾 (CSS3) *Androidでは ほぼ 表 現 可 能 部 対 応 グロー p{ font weight: bold; color: rgba(0,0,0,0); text shadow: 0px 0px 1px rgba(0,0,0,0.6), 0px 0px 10px rgba(0,0,0,0.4), 0px 0px 10px rgba(0,0,0,0.3), 0px 0px 10px rgba(0,0,0,0.3); //<div class="loading"></div>を 回 転 させる.loading{ width:50px;height:50px;background:red; webkit animation: spin 1.5s linear infinite; moz animation: spin 1.5s linear infinite; @ webkit keyframes spin{0% { webkit transform: rotate(0deg);100%{ webkit transform: rotate(360deg); @ moz keyframes spin{0% { moz transform: rotate(0deg);100%{ moz transform: rotate(360deg); 要 素 を 回 転 (くるくる 回 ります ) ローディング 中 のアニメーションにも 利 できそう
CSS3 コピペで 使 える! 役 つTips 落 書 き 風 にボーダーをデザイン div { border:solid 5px #0ff; width:200px; margin:25px auto; border radius: 255px 15px 225px 15px/15px 225px 15px 255px; padding:10px; リストをカフェメニュー 風 にデザイン <ul> <li><strong>css Design</strong> <em>250<sup>95</sup></em></li> </ul>.menu { width: 500px; list style: none; margin: 0 0 2em; padding: 0; font: 150%/100% Arial, Helvetica, sans serif;.menu li { clear: both; margin: 0; padding: 0 0 1.8em 0; position: relative; border bottom: dotted 2px #999;.menu strong { background: #fff; padding: 0 10px 0 0; font weight: normal; position: absolute; bottom:.3em; left: 0;.menu em { background: #fff; padding: 0 0 0 5px; font: 110%/100% Georgia, "Times New Roman", Times, serif; position: absolute; bottom:.2em; right: 0;.menu sup { font size: 60%; color: #666; margin left: 3px; IE6 用 のCSSもあり!コチラ http://webdesignerwall.com/tutorials/cssmenu list design
CSS3 コピペで 使 える! 役 つTips CSSジェネレーターを 使 ってみよう! 海 外 では 素 晴 らしいCSSジェネレーターをいくつも 見 かけます ハイセンスなデザインコードは 勉 強 にもなり カスタマイズして 自 分 好 みにデザインにするのも 良 いでしょう いくつかピックアップしてご 紹 介 します 枠 線 から 背 景 をずらして おしゃれにデザイン http://codepen.io/dope/pen/fksco div 要 素 だけでギザギザのボーダー( 太 め) http://codepen.io/somestuffer/pen/uwstc レスポンシブ 対 応! 対 角 線 を 用 いた 半 透 明 のパネルでセンスアップ http://codepen.io/hartless/pen/bnnjod/
CSS3 コピペで 使 える! 役 つTips CSSジェネレーターを 使 ってみよう! hr 要 素 でセクションごとに 背 景 に を 付 ける スマホなどにも 章 を 読 みやすく 出 来 そう! http://codepen.io/michaelarestad/pen/wbabxz 透 過 されたボックスでおしゃれに 演 出 http://codepen.io/znak/pen/ntsdy レスポンシブにも 対 応! 半 透 明 のパネル http://codepen.io/hartless/pen/bnnjod/ 罫 線 が ったキャンパスノートをCSSだけで http://codepen.io/murtaugh/pen/vxaap
CSS3 コピペで 使 える! 役 つTips CSSジェネレーターを 使 ってみよう! h1 部 分 をCSS3だけでロゴ に 仕 上 げる! 中 にテキストを れて 紙 とかにもカワイイですね http://codepen.io/yoksel/pen/mgakb divの 下 部 分 だけに グラデも 効 かせたハイセンスなシャドウ http://codepen.io/martinwolf/pen/aylso 紙 の 端 っこを 折 り 曲 げたようなデザイン http://codepen.io/ravinthranath/pen/xjjwbr ちょっとクラシックなボックス http://codepen.io/diegopardo/pen/jauib
CSS3 コピペで 使 える! 役 つTips CSS 3だけでアニメーション 要 素 が 飛 び 出 たり スライドインしてきたり ユラユラ 動 いたり ぐ~んと 伸 びたり ( 棒 グラフ 表 示 で 棒 の 部 分 がぐい~んと 伸 びる 演 出 など 見 かけますね!アレです ) ランディングページの 購 入 ボタンや 申 し 込 みボタンを 目 立 たせたい 時 や webページの 装 飾 でよく 使 えそうな 単 純 だけどインパクトを 与 えられる アニメーションをCSS3だけで 表 現 できちゃいます 動 き 方 もページ 上 で 確 認 できて 必 要 なものだけをコピペして 使 えるのでとっても 役 立 ちそう 沢 山 の アニメーション 動 作 をCSS3だけで 実 現 したソースを 公 開 してくれています アニメーションの 動 作 とソースはコチラから http://www.justinaguilar.com/animations/
WEB モバイル 専 お 仕 事 情 報 サイト http://webtant.net/ ウェブタント WEB デザイナー ディレクター ネットショップ 運 営 スタッフなど WEB/スマホ 業 務 専 の 求 情 報 サイト ウェブタント HTMLやCSS ネットショップ 担 当 者 に 役 つコラムも 掲 載 中 です! 新 着 コラム スタッフブログ をぜひ 覗 いてみてくださいね!! また 当 社 は お 仕 事 紹 介 だけでなく 充 実 した 研 修 制 度 をご 意 し しっかりスキルUPできる 場 を 提 供 することにも 努 めています HTML5やCSS3などの 技 術 研 修 から WEB マーケティングまで 実 践 アップセミナー 開 催 中! 当 社 就 業 中 のスタッフさんは ナント 無 料 受 講 です セミナー 情 報 はコチラ http://www.webtant-seminar.jp/ 正 社 員 で 働 きたいあなたへ!キャリアアップして 働 きませんか? WEB 業 界 出 のエージェントがあなたを 徹 底 サポート ウェブタントキャリアはコチラ http://webtant-career.jp/