web021 ヒーローヘッダー
ヒーローヘッダー
ヒーローヘッダー（Hero Header）とは、ウェブサイトのファーストビューに全画面の画像を使用するなど、巨大なイメージで構成されたウェブサイトのことを指します。（引用）
■考え方
・ビューポートの高さを考慮( E { height: [x%/100%]vh })
・backgroundは通常coverを利用する。場合によりcontain;
また、center centerで中央からの位置調整とする。
注意
・人が写っているようなかけて困るものは背景に向かない。
・画像のpxが小さい場合、ぼかしをあらかじめ入れる手もある。
■サンプル
... <body> <header> <h1>MONEY<br>REVOLUTION</h1> <p>あなたの年収は<span>200万</span>上がる。</p> </header> <nav> <li><a href="#">秒速で稼ぐ</a></li> <li><a href="#">音速で稼ぐ</a></li> <li><a href="#">高速で稼ぐ</a></li> </nav> </body> </html>
header{ background: url(../img/bg_header_comp.png) no-repeat center center; height: 90vh; background-size: cover; /*nav{height: 10vh;}としており都合100%になっている。*/ }
■参考
ヒーローヘッダーとは
ヒーローヘッダーを使った新デザイントレンド＆参考Webサイト、素材まとめ - PhotoshopVIP
web020 CSSシグネチャー
Illustrator004 文字をアーチに沿って描く
文字をアーチに沿って描く
■手番
1.楕円形ツールで円を描く
2.パス選択ツールで円の下を選択しdelete。(半月ができる)
3.パス上文字ツールで円の上にテキストを入力し、「cmd+shift+c」でセンタリングする。
※左寄せはL,右寄せはRをCの代わりに入力
4.選択ツールを選び、開始と終了の位置（白ボックスに棒がつきささってるもの）を、円の最初と最後までひっぱる。
※Caféのように円の内側に反転させたい場合、選択ツールで開始終了の中間にある線（白ボックス）を選択し、円の内側に入れる。
[補足]
Caféのé(アキュートアクセント)は、wikiペディアなどからテキスト入力時にコピペして貼り付ける。
スペルが間違っているのはご愛嬌。
jQuery001 セレクタ指定
セレクタ指定
あとで整理します。
^：〜から始まる
$：最後がvalueで終わる→[attribute$=’value’]
gt：greater than
attr：アターって読む。
・JavaScriptはhtml操作、jQueryはcssの操作、必要に応じincludeの中身いじって軽量化
// <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> $('li').css('color','red'); $('#first').css('color','red'); $('.second').css('color','blue'); $('#third strong').css('color','purple'); $('li *').css('color','red'); //★ $("#first,#third,#fifth").css('color','blue') $('li:not(:first-child)').css('color','purple');//★ $('#third>strong').css('color','blue'); $('li:nth-child(9)').css('color','blue'); $('#third+li').css('color','red');//★third以降のli $('#second ~ li').css('color','#ddd'); //★second以降 $('[id]').css('font-size','25px'); //★ $('li:empty').css('font-size','12px'); $('li:last-child').css('color','blue'); $('li small:only-child').css('color','#ff0'); //liの中に１個だけ指定した要素を含む場合。２個はだめ。★ $('li:nth-last-child(2)').css('color','#f0f'); $('dt:nth-of-type(2)').css('color','#ffa'); $('dd:nth-of-type(3)').css('color','#ffa'); $('li[id != first]').css('color','#222');//★ $('dt:nth-last-of-type(1)').css('color','purple'); $('dd:first-of-type').css('color','#ddd'); $('dd:last-of-type').css('color','blue'); $(':lang(en)').css('color','#ff0'); $('li[id^="f"]').css('color','purple'); $('[id]').css('color','#444'); $('[id *= "ir"]').css('color','purple'); $('li:gt(2)').css('color','green'); $('li[id^="f"]').css('color','purple'); $('dd:last-of-type').css('color','blue'); $('[id ^= "f"][id *= ir]').css('color','#ffa'); $('h1').prepend('<a>ppp</a>'); $('#six').removeClass('add1');
■参考（本）
Web制作の現場で使う jQueryデザイン入門［改訂新版] (Web Professional Books) | 西畑 一馬 | 工学 | Kindleストア | Amazon
PHP012 三項演算子
web019 リキッドデザイン(2カラム)で１カラムのみ横幅を固定（width:calc(XX% - YYpx)）
リキッドデザイン(2カラム)で１カラムのみ横幅を固定（width:calc(XX% - YYpx)）
width:calc(XX% - YYpx);
■利用シーン
リキッドデザインでサイドバーに広告を載せており幅を固定し、コンテンツだけリキッドとする場合。
※caniuseでほぼ全てのブラウザで利用可能
■コード
/* 左側のカラム 。幅：可変。*/ .wrap{ overflow:hidden; } .content { float: left; width: calc(100% - 300px); } /* 右側のカラム。幅：固定 */ .sidebar{ float:right; width:300px; }
■参考
calc - CSS | MDN
