2013-3-22勉強会で、収まらなかった内容をパソコン倶楽部りんご：TOPページに実装しました。
WordPressのヘッダー画像に複数の画像をアップしておいて、fornt_pageの時は、header.phpでそれらを取得してcssのanimationで動かします。front_pageでない時は、Twenty Twelveの設定のまま（任意の画像に固定か、ランダムかを選択）です。animationの動作はFirefox16+、Google Chrome21+、Safari6+で確認しました。 続きを読む
2013-3-8勉強会で行った「マークアップとcssの筋トレ」は、キャラメルメープルポップコーンのパッケージを取り上げました。
チラシ、パッケージ、書籍などの印刷物や、看板などをhtmlとcssで再構築することで、マークアップとcssのスキルをアップする為の練習です。
今回はこれ。
セブンイレブンで買いました
|
1 2 3 4 5 6 7 8 |
SEVEN&i PREMIUM キャラメルメープルポップコーン キャラメルの甘さとメープルの風味豊かなポップコーンです。 50g 1袋50g当たり272kcal 写真はイメージです メープル香料使用 VALUE PRICE 100YEN |
この段階では以下に留意して下さい。
ここで、メンバー同士で、各自のメークアップを発表します。比較・検討すると面白いです。
マークアップには、厳密な意味での正解はありません（明らかな間違いはあるでしょうが）。
例えばこの題材では次の様なパターンがありました。
|
1 2 3 4 5 |
<section> <p>SEVEN&i PREMIUM</p> <p>キャラメルメープル</p> <h1>ポップコーン</h1> </section> |
|
1 2 3 4 5 6 7 |
<section> <hgroup> <h3>SEVEN&i PREMIUM</h3> <h2>キャラメルメープル</h2> <h1>ポップコーン</h1> </hgoup> </section> |
|
1 2 3 4 |
<hgroup> <h3>SEVEN&i PREMIUM</h3> <h1>キャラメルメープルポップコーン</h1> </hgoup> |
この場合は、パターン3の方が妥当性が高いです。hgroup内の見出し要素は、最も数字の小さいものがアウトラインとして採用され、その他は省略されてしまいます。
「キャラメルメープルポップコーン」は、一つながりの商品名で、要素としても「キャラメルメープル」と「ポップコーン」で分けるべきではありません。「ポップコーン」の方が大きい文字になっているのは、cssで調整しましょう。
まずは題材を出来るだけ再現してみます。
その上で、Webならではの工夫を加えると、より良いです。
ここで、必要ならば、divやspanを追加したり、idやclassなどの属性を追加しましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<body> <hgroup> <h3 class="logo"><span class="si">SEVEN&i</span><span class="pr">PREMIUM</span></h3> <h1>キャラメルメープル<span>ポップコーン</span></h1> <h2>キャラメルの甘さとメープルの風味豊かなポップコーンです。</h2> </hgroup> <ul> <li>50g</li> <li>1袋50g当たり<strong>272kcal</strong></li> <li>写真はイメージです</li> <li>メープル香料使用</li> </ul> <p> <span class="vp"><span>V</span><span>A</span><span>L</span><span>U</span><span>E</span><span> </span><span>P</span><span>R</span><span>I</span><span>C</span><span>E</span></span> <span class="vp"><span>V</span><span>A</span><span>L</span><span>U</span><span>E</span><span> </span><span>P</span><span>R</span><span>I</span><span>C</span><span>E</span></span> <span class="vp"><span>V</span><span>A</span><span>L</span><span>U</span><span>E</span><span> </span><span>P</span><span>R</span><span>I</span><span>C</span><span>E</span></span> <span class="hyaku">100<small>YEN</small></span></p> </body> |
cssはこんな感じ。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 |
html,body,hgroup,h1,h2,h3,p,ul,li{ margin:0;padding:0; } body { text-align: center; background:url(popcorn.jpg) 0 0 no-repeat; background-size:cover; } hgroup{ width:20em; margin:5em auto; padding:1em; background:rgba(255,255,255,0.8); font-family:'Hiragino Mincho ProN',serif; font-size:1.5em; } h1{line-height:1.2;font-size:2.6em;letter-spacing:-0.15em; } h1 span{display:block;font-size:1.55em;letter-spacing:-0.2em;} h2{line-height:1.2;font-size:1.4em;} /*ロゴマーク*/ .logo{ font-size:0.6em; margin:1em auto; width:4em; height:5em; position:relative; overflow: hidden; border-radius:0 0.5em 0 0; } .logo span { position:absolute; display:block; text-align:center; font-size:0.9em; z-index:8; background:#fff; line-height: 1; } .logo .si { color: green; font-family: Arial; font-size: 0.88em; left: 0.1em; top: 2.4em; z-index: 9; } .logo .pr { bottom: 0; color: #32d; font-family: Georgia; font-size: 0.7em; left: 0.1em; z-index: 8; } .logo:before, .logo:after, .pr:before, .pr:after { content:""; display:block; position:absolute; font-size:1em; } .logo:before{ font-size:0.8em; display:block; background:orange; top:0; left:0.2em; width:4em; height:1.2em; z-index:2; } .logo:after { font-size:0.8em; display:block; border:1.1em solid transparent; border-color:red #fff #fff red; border-radius: 90% 0 0; box-shadow:0 0 0 0.3em #fff; height: 4.2em; width: 2.8em; left: 1.2em; top:-0.3em; z-index:3; } .pr:before{ background:green; height:4.2em; right: 0.2em; top: -4.2em; width: 1.1em; z-index: 3; } .pr:after { background:green; border-radius: 50%; box-shadow: 0 0 0 0.3em #fff; height: 1.3em; right: 0; top: -6em; width: 1.3em; z-index: 6; } ul{padding:1em;display:inline-block;font-size: 1.2em;} li{display:inline-block;line-height:1.2;} li:first-of-type {font-size:2em;padding:0.2em;} li:nth-of-type(2) {font-size:0.7em;width:8em;position:relative;} li:nth-of-type(2):before { border-left: 2px solid #000; content: ""; font-size: 2.3em; width: 1em; height: 1em; left: -0.3em; top: 0.2em; position: absolute; } li:nth-of-type(2) strong {display: block;font-size:1.5em;} p{display:inline-block; width:4em; height:4em;padding:1em;text-align:center;background:#fff;border-radius:50%;border:2px solid #000;position:relative;} .hyaku {display:block;font-size:2em;line-height:1;font-weight: bold;position:relative;top:0.3em;left:-0.1em;} .hyaku small {display:block;font-size:0.5em;} .vp { display: block; font-size: 0.6em; height: 50%; left: 4.5em; position: absolute; top: 0; width: 1em; -webkit-transform-origin:center bottom; -moz-transform-origin:center bottom; transform-origin:center bottom; } .vp:nth-of-type(2){ -webkit-transform:rotateZ(120deg); -moz-transform:rotateZ(120deg); transform:rotateZ(120deg); } .vp:nth-of-type(3){ -webkit-transform:rotateZ(240deg); -moz-transform:rotateZ(240deg); transform:rotateZ(240deg); } .vp span{ position: absolute; display:block; width: 1em; height: 100%; left: 0; top: 0; -webkit-transform-origin:center bottom; -moz-transform-origin:center bottom; transform-origin:center bottom; } .vp span:nth-of-type(1){-webkit-transform:rotateZ(-50deg);-moz-transform:rotateZ(-50deg);transform:rotateZ(-50deg);} .vp span:nth-of-type(2){-webkit-transform:rotateZ(-40deg);-moz-transform:rotateZ(-40deg);transform:rotateZ(-40deg);} .vp span:nth-of-type(3){-webkit-transform:rotateZ(-30deg);-moz-transform:rotateZ(-30deg);transform:rotateZ(-30deg);} .vp span:nth-of-type(4){-webkit-transform:rotateZ(-20deg);-moz-transform:rotateZ(-20deg);transform:rotateZ(-20deg);} .vp span:nth-of-type(5){-webkit-transform:rotateZ(-10deg);-moz-transform:rotateZ(-10deg);transform:rotateZ(-10deg);} .vp span:nth-of-type(6){-webkit-transform:rotateZ(0deg);-moz-transform:rotateZ(0deg);transform:rotateZ(0deg);} .vp span:nth-of-type(7){-webkit-transform:rotateZ(10deg);-moz-transform:rotateZ(10deg);transform:rotateZ(10deg);} .vp span:nth-of-type(8){-webkit-transform:rotateZ(20deg);-moz-transform:rotateZ(20deg);transform:rotateZ(20deg);} .vp span:nth-of-type(9){-webkit-transform:rotateZ(30deg);-moz-transform:rotateZ(30deg);transform:rotateZ(30deg);} .vp span:nth-of-type(10){-webkit-transform:rotateZ(40deg);-moz-transform:rotateZ(40deg);transform:rotateZ(40deg);} .vp span:nth-of-type(11){-webkit-transform:rotateZ(50deg);-moz-transform:rotateZ(50deg);transform:rotateZ(50deg);} |
実装は以下のリンクから開けます。
html5-popcorn-package
SEVEN&iのロゴマークや、VALUE PRICE 100 YENのマークは、本来なら画像にすべき所ですが、練習でcssだけで描いています。
ただいま制作中のサイトです。
http://nobu-69.com/manakaa/sample2/
全体的にまだ大まかな状態です。ちいさい突っ込みはいれないように！w
試しに全文モリサワWEBフォントにしてみました。
今日は、新メンバーのKIKOさんが参加されました。
お菓子が今回も更に充実!! KIKOさんからもたくさんいただきました!
KIKOさんは元漫画家さんという事で、イラスト作品も拝見させていただきました。さすがプロ!!
議題は以下の通り
です。 続きを読む
「Pure CSS3 Cycle Slider」をお手本にして、css3のanimationで永久ループするスライドショーを作ります。 続きを読む
姪の結婚式の写真を材料にフォトギャラリー作成しました。
画面幅対応のjQueryのanimateでスムーズに整列し、個別写真はlightBoxで拡大します。
PC、タブレット、スマホ等の異なる画面の大きさに対応して、写真の横並び枚数が変わります。
なお。式場は白金八方園で、二人ともホンダの新卒同期です。お幸せに！
12月15日（土）の活動報告・改訂版です。
ファイルをダウンロード出来ましたら、mq1とmq2それぞれをブラウザで開いて下さい。
開きましたら、それぞれの画面の幅を小さくしてみて下さい。
いかがでしょうか？
mq2の方はある大きさまで狭まると、レイアウトが変わります。
今回の授業では、mq1を元に、
画面の大きさによってレイアウトが変わるmq2を作成しました。
それでは、どうやって作るのか？を説明してまいります。
元ファイルであるmq1のソースをコピーしてテキストエディタで開き、動作を確認してみて下さい。
手を加えるのは<head>内の<style></style>の中とhtmlの一部です。
続きを読む
11/23の部活動で学習した軽量負荷の TinySlidershow のサンプルを作成しました。
人物名画を素敵なギャラリーにてご鑑賞ください。（後半は少し遊んでしまいました。）
#7ジェイ子
Web Designing 2012 ４月号よりレポートします。
これは先週、高橋先生に借りたのですが、気になるtransform:rotateの記事があったので、
応用してサンプルを作ってみました。
記事は以下からアクセスしてください。
http://shoji.main.jp/log_20121122yarita.html
11月9日（金）の活動報告です。CSS、WordPress、PHPを学習しました。
http://shoji.main.jp/log_20121109.html
私のサーバーにアップしました、上記URLからご覧ください。
2012-9-21と2012-9-28の二回にわたって「cssだけでスライドショー」を勉強しました。まとめを以下にアップしましたので、ご確認下さい。
2012-9-21は「マークアップとcssの筋トレ」も行いました。これについてのまとめは後日、アップします。
第３回勉強会のほうこくです。
“びゅう”の”紅葉めぐり”のパンフレットをマークアップしました。
teamviewerで高橋先生の画面を共有しながら各自のマークアップを確認しました。
詳しくは真中さんに聞いてくださいね
