タグ別アーカイブ: html

2014-01-10 勉強会

今年最初の勉強会はジェイコさん、キイさんが仕事で製作中のサイトやこれから取りかかるサイト制作の質問など。

あと、前からあるのに意外と知らないテーブルレイアウトについて。

今日ではサイトの見た目をいじるのはCSSでやるのが当たり前ですよね。テーブルでレイアウトした昔のサイトを見ると古くさく思いますよね。テーブルでレイアウトするのは、良くない！とされています。理由は「SEOに有効なマークアップが出来ない」「タグが入れ子になりすぎて見にくい」「面倒くさい」などなどです。

しかし、コンテンツに出てくる内容が表組の場合、テーブルはありです。
例えばhttp://juicyeyes.com/access.html（この場合はdl, dt, ddでも良いと思う）

そのテーブルのレイアウトについてです。

役職	氏名	所属
会長	山田　一郎	営業
副会長	山田　次郎	営業
幹事	野比　ノビタ	営業
幹事	小山　順三郎	営業
幹事	岸野　太郎	営業
幹事補佐	来如意	営業

以下のようにtheadとtbodyに分けると見やすいです。ちなみにtfootというのもあります。

<table>
      <thead>
        <tr>
          <th>役職</th><th>氏名</th><th>所属</th>
        </tr>
      </thead>
      <tbody>
        <tr><th>会長</th><td>山田　一郎</td><td>営業</td></tr>
        <tr><th>副会長</th><td>山田　次郎</td><td>営業</td></tr>
        <tr><th>幹事</th><td>野比　ノビタ</td><td>営業</td></tr>
        <tr><th>幹事</th><td>小山　順三郎</td><td>営業</td></tr>
        <tr><th>幹事</th><td>岸野　太郎</td><td>営業</td></tr>
        <tr><th>幹事補佐</th><td>来如意</td><td>営業</td></tr>
      </tbody>
    </table>

<table>

<thead>

<tr>

</tr>

</thead>

<tbody>

</tbody>

</table>

table{border:1px solid #999;border-collapse: collapse;}
th{background:#999;}
thead th{background:#fcc;}
td{background:#ccc;}

table{border:1px solid #999;border-collapse: collapse;}

th{background:#999;}

thead th{background:#fcc;}

td{background:#ccc;}

こちらのサイトに詳しく解説してあります。

——————————–
ご覧の皆様、今年もよろしくお願いします！

iflameで動画をhtmlに埋め込む

3件の返信

http://phussa.net/index.html
こちらのサイトの作業をしています。トップページのニュース欄にYouTubeの動画をiflameタグで貼付けていました（これをAとします）。今回の依頼はトップページにUSTREAMを埋め込むという事ですので、配信停止中はクロスフェード画像表示にして埋め込みました（これをBとします）。YouTubeもUSTREAMも各サイトの自動埋め込みタグ生成機能を利用しました。

？？？？？？？？
ustreamを埋め込んだらAもBも、もともと最初にあったAが表示されました。２カ所同じものになってしまいました。あれれ？と思い、Aを削除してBだけにしました。そしたら今度はBの部分にはustreamが表示されるはずなのにAのYouTubeの内容が表示されています。

一回タブを閉じて新しいタブで開いたら直りました。

他のPCでも確認しました。ブックマークからサイトに入ると、やはりBにはA(YouTube)が表示されてました。タブを閉じて新しいタブでブックマークから入らずにアドレスを打ち込んで入ると直りました。（Bには、ちゃんとUSTREAMが表示された）

これは、どういう事がおきているのでしょうか？
１つのhtmlファイルにはiflameは１つしかいれられないのでしょうか？そんなわけないですよね。

どうぞよろしくお願いします。

文字参照で htmlタグを htmlファイルに表示させる。

コメントをどうぞ

2013-10-25の勉強会で、僕がタカハシ先生に質問をして解決した事の1つを説明します。

htmlタグをhtmlファイルに表示させたい場合は、このサイト(WordPress)だったら「crayon」というプラグインを使えばいいのですが、そういうシステムが無い場合の対処法です。
jQueryや自動生成サービスなどもありますが、ほんの数行なら自分でどうにかしたいものです。（例えば議事録に１行書きたいとか）

文字実体参照で解決！

上記の「<」と「>」は文字参照で表示させていて、htmlタグではないので<section >と表示されているわけです。
WPプラグインの「crayon」はそれを自動生成してくれているわけです。

サイト制作で、&とか©など使った事ありますよね。

文字参照でググるとたくさん出てきます。

サイトリニューアルについての注意点（.htaccessと404.html）

2件の返信

お仕事で、あるお店のサイトリニューアルをしました。サーバー・ドメインは昔のままでということで。

そこで１つ問題があり、解決したのでメモしておきます。

【問題となった事】
サーバーはそのままなので、昔のサイトのデータ（色んなフォルダやhtmlやcssファイルなど全部）をサーバー上から削除します。次に新しいサイトのデータ一式をサーバーにアップロードします。初めてサイトにアクセスするユーザーは問題なくリニューアルしたサイトを見る事が出来ます。しかし昔のサイトをブックマークしているユーザーがブックマークをクリックするとどうなるでしょう。サーバーが昔のページを開こうとして、その結果ページが無い事が判明して以下のような画面が表示されます。（ロリポの場合）

これは、そんページないよ～！というロリポのデフォルトのページです。これでは、困ってしまいますよね。昔からのユーザーに「あれ～、サイトなくなっちゃったの？！」「何かあったのかな?!」と思われてしまいます。指定されたページ（ＵＲＬ）が見つから無い場合、「この度リニューアルしました！新しいサイトはこちらでーす！」と言った感じでリンクを貼ってあるページが表示されると親切＆安心ですよね。

２ステップで問題解決！

【①オリジナルのNot Foundページを作る】
404.htmlというファイルを作ります。そこにリンクを貼ったり、リニューアルの説明を載せます。デザインはcssで好きに出来ます。これをサーバーにアップロードします。index.htmlとかがあると思われる一番上の階層に。このファイルは、ユーザーが指定したページが無い場合に表示されるようになります。

【②.htaccess】
404.htmlというファイルを作ってサーバーにアップロードしただけでは、機能しません。「指定されたページ（url）がサーバーになかったら404.htmlを表示する事！」という命令をしなければいけません。テキストエディタで新規ファイルを作成して下さい。名前は「htaccess.txt」で、中身は　ErrorDocument 404 /404.html　と書きます。それを一番上の階層にアップロードします。アップしたら右クリックでファイルの名前を変更して下さい。
htaccess.txt　→　.htaccess（.から始まる。拡張子なし。）名前を変更したら属性を「604」にして下さい。これも右クリック。

以上です。

参考サイトhttp://oxynotes.com/?p=159
この他にも、ロリポ404やredirect htaccess　で検索するといろいろ出てきますよ。

タカハシ先生、ありがとうございました。

ちなみに制作したサイトはこれです。http://juicyeyes.com/
試しにhttp://juicyeyes.com/boyoboyo.htmlという、ありもしないアドレスを入力すると440.htmlが表示されます。

htmlファイルにfaviconの設定しよう

コメントをどうぞ

WPでは簡単にファビコンの設定ができます。以前、記事にも書きました。
WP Twenty Twelve 簡単にファビコンを設置出来るプラグイン”All in one Favicon”

WPではなく普通にhtmlで作成した場合は、上記の様に簡単ではありません。（とは言っても簡単です）

イラレ等で作成したイラストを自動でファビコン用のファイルに生成してくれる無料のサービスがあります。僕はいつも、こちらにお世話になっております。
http://ao-system.net/favicon/index.php

是非チャレンジしてみて下さい！

hoverした時に疑似要素で画像やテキストを出現させる。

9件の返信

↑アイキャッチ画像の様に、hoverした時に画像や文字が出現するようにしたいのですが、どんなやり方がありますでしょうか？

ぱっと思いついたのはcssで疑似要素です。これでいけますでしょうか？
あとは、jQueryで適当なのがあるのかなあ。

よろしくお願いします。

2013-06-21の勉強会で「hoverした時に疑似要素で画像やテキストを出現させる。」が出来ました！

僕のサーバーにアップしました。タカハシ先生ありがとうございました！

http://nobu-69.com/study/after_201306/after.html

IE8対策

いろんなブラウザで確認しましたが、ie8は、ホバーもしてないのに↓こうなって（全部見えている）しまいます。（ちなみにie7はホバーしても疑似要素が出現しませんが、今回は切り捨てます。ie9はtransformが効きませんが、ホバーで疑似要素が出現するのでOKとします。）

ie8だけが読み込むie8.cssを作り以下を指定。

もとがこんな感じ

nav ul li a:after{
	content:url(img/nav_menu/price.png);
	position:absolute;
	left:-1em;
	top:-2em;
	transform:scale(1,0) translate(0,-1em);
	transform-origin:left bottom;
	transition:0.3s;
	z-index:-1;
	opacity:0;
}
nav ul li a:hover:after{
	transform:scale(1,1) translate(0,0);
	opacity:1;
}

nav ul li a:after{

content:url(img/nav_menu/price.png);

position:absolute;

left:-1em;

top:-2em;

transform:scale(1,0) translate(0,-1em);

transform-origin:left bottom;

transition:0.3s;

z-index:-1;

opacity:0;

}

nav ul li a:hover:after{

transform:scale(1,1) translate(0,0);

opacity:1;

}

ie8用css

nav ul li a:after{
}
nav ul li a:hover:after{
	content:url(../img/nav_menu/price.png);
	position:absolute;
	left:-1em;
	top:-2em;
}

nav ul li a:after{

}

nav ul li a:hover:after{

content:url(../img/nav_menu/price.png);

position:absolute;

left:-1em;

top:-2em;

}

nav ul li a:hover:afterは上書きされますが、nav ul li a:afterの方は何にも指定がないので上書きされません。この場合どうしたらよいでしょうか？
気持ち的にはnav ul li a:after{all-clear}こんなのあったらいいなあ。

以下を追加することで無事解決！

firefox等に悪影響とかはありません

nav ul li a:after{height:0;overflow:hidden;}
nav ul li a:hover:after{height:auto;}

1 2	nav ul li a:after{height:0;overflow:hidden;} nav ul li a:hover:after{height:auto;}

というわけで、ie8用にcssを作成して、それでどうにか問題解決するという作戦は無しになりました。そんな事をしなくても上記のコードを追加するだけで、解決したからで～す。

css3で簡単横並びレスポンシヴデザイン

1件のフィードバック

2013-06-14の勉強会で、やりました。
width:calcとsizing:border-boxという新しいものであります。
こんな感じ↓

width:calc(100% / 3 - 10px);
/* --------
100%を３で割って10px引くという意味。
+（たす） -（ひく） *（かける）も使える。
演算子の前後は、必ず半角あける。
---------- */
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
/* --------
borderの幅、paddingの幅もwidthのうちに入れてくれる。
---------- */

width:calc(100% / 3 - 10px);

/* --------

100%を３で割って10px引くという意味。

+（たす） -（ひく） *（かける）も使える。

演算子の前後は、必ず半角あける。

---------- */

-moz-box-sizing:border-box;

-webkit-box-sizing:border-box;

box-sizing:border-box;

/* --------

borderの幅、paddingの幅もwidthのうちに入れてくれる。

---------- */

僕のサイトにサンプルと説明をアップしました。
http://nobu-69.com/study/cluc_201306/cluc.html

IEの印刷プレビューについて

13件の返信

現在仕事で制作中のサイト。２年前に制作したサイトを部分的にリニューアルしています。
自分のサイトにテストでアップしてクライアントさんに確認してもらっています。

１つ指摘された事があります。
IEでの、下記のページの印刷プレビューが出来ないそうです。他のページは問題ありません。ちなみにクライアントさんはwindows7です。
http://nobu-69.com/test_site/nolimits201304/nyukaigo.html

僕も確認してみました.
windows xp でモードをie7にするとプレビューが出来ません。
windows7 でモードをie7にするとプレビューが出来ません。
その他（ie8,ie9）は問題ありません。どうやらie7で見た時だけ印刷プレビューが出来なくなるようです。

原因の検討がつきません。何が考えられるでしょうか？

よろしくお願い致します。

—————————————-
説明不足でしたので追記します。

上記画像のように真っ白で何も表示されません。そして画面下の赤マル内の数字（ページ数を表す）の分母の部分が1,2,3,4,…….止まらなく増え続けます。
という状態です。

—————————————-
タカハシ先生のアドバイスを基に作業してみました。

①>1.他のサイトのページを印刷プレビューしようとしたらどうなるか？
　制作中のサイトの他のページは問題ありませんでした。
　問題があるのはhttp://nobu-69.com/test_site/nolimits201304/nyukaigo.htmlのページのie7で見た時のみです。

②>2.cssのmedia typeををscreenに限定したらprint時にcssは適用されなくなるはず。
　それでどうなるか確認。
cssが切れた状態でプレビューされましたので、指摘にある通りcssのどこかに問題があるのかと思い調査しましたが、おかしな所は見当たりません。

③対策としてhtmlのheadの中のcssのリンクを以下の様にしてみました。

<link href="css/nyukaigo.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/nyukaigo.css" rel="stylesheet" type="text/css" media="print" />

1 2	<link href="css/nyukaigo.css" rel="stylesheet" type="text/css" media="all" /> <link href="css/nyukaigo.css" rel="stylesheet" type="text/css" media="print" />

そしたら上記の「説明不足でしたので追記します。」の真っ白で分母が止まらない状態に逆戻り。

本日の勉強リクエスト(シンタックスハイライターとWPに動画を貼りつける）

6件の返信

■①シンタックスハイライトされたソースコードを手軽に実装できるWebサービス・syntaxhighlight.inの使い方がいまいちわかりません。
参考サイトhttp://kachibito.net/web-service/syntaxhighlight-in.html

一応やってみました。デザインを選んで、それのcssもダウンロードしてリンクさせたのに効いていない。？！
http://nobu-69.com/study/css_packman/css-packman.html

■■②youtubeをwpに貼りつける。http://kuulei90.com/?page_id=20
　５枚貼りつけてます。上の３つはプラグインで下の２つはプラグインではなく、youtubeのサービスの埋め込みコードをコピペ。
プラグインはPCで問題なしですが、スマホ(iphone4s)で縦長の変な表示になる。これを解消したい！
youtubeのサービスの埋め込みコードをコピペの方はpcで再生＆表示、問題なしですが、スマホ(iphone4s)の表示は縦長にならないでちゃんとしてるけど、
再生が出来ない。

ちゃんと表示させて再生するようにしたいです。

—-↓—↓—-↓——勉強会で解決しました。——-↓—–↓—–↓—–

■シンタックスハイライターについて。

①自動で生成されたhtmlのコードをコピーしてhtmlのbodyの中に貼り付けます。
②自動で生成されたjqueryとcssをコピーして自分で作ったファイルに貼り①のhtmlファイルにリンクさせます。
注）jQuery本体を忘れずに！

以上です。

それと、左横の行数を示す番号が必要でなければ、表示させたいコードをpreタグで囲むのが一番簡単です。
preタグはコードを書いたとおりに表示してくれるのでbrとかいりません。
こんな感じ↓。これはpreで囲んだだけです。

body{
background-color:#333;
color:#fff;
}

body{

background-color:#333;

color:#fff;

}

■■youtubeをwpに貼りつけたい！について。
wpのプラグインを使ったりyoutubeのサービスの埋め込みコードを使ったりと試してみましたが、どちらも多少の不具合があるので、一番いいのが
シンプルに動画のアドレス（動画観覧の際に表示されてるアドレス↓）をコピーしてテキストに貼り付ければOKという事になりました。

http://www.youtube.com/watch?v=KCLXy-vSu3o

1	http://www.youtube.com/watch?v=KCLXy-vSu3o

注）動画のアドレスは独立した行に貼りつけて下さい。

と、ここまで議事録を書いてびっくり！確認の為、僕のiphone4sで貼りつけた動画を見ようとしたら、見れません！（デスクトップでは問題ないです）
プラグインで貼りつけたやつはみれるのに。
なぜだ～！アンテナも最高状態です。はあ～。みなさんのスマホで上記の画像再生できますか？

html5で作るWPオリジナルテーマ：1

コメントをどうぞ

以下の構想で5/31から開始しました。一回、1.5時間で、全4回くらいを目処にやる予定。

目的

WordPressのオリジナルテーマを作成することで、WordPressのテーマ、テンプレートの理解を深める。

内容（予定）

index.htmlをhtml5とcssで作成する。
モバイルファースト＆フラットデザインでindex.htmlをレイアウト＆デザイン
index.htmlを最小の構成でWPテンプレート化する
メニュー、ウィジェットなどWPの機能を使えるように拡張

必要な心構え

WPへの理解を深める他にも、

html5、css、phpのコーディングの練習
レスポンシブWebデザインの練習
フラットデザインの練習

などの練習にもなります。各自、自分の目的に照らし合わせて、何か利用できる事があるはずです。その事を常に頭の隅に置いておきましょう。

必要な環境

個人で使えるWordPressを用意しておいて下さい。個人で使えるサーバをロリポップなどで契約してWPをインストールしておくか、XAMPPやMAMPなど、ローカル環境でWPをインストールしておいて下さい。

html5で作るWPオリジナルテーマ:1

5/30の勉強会から全4回の予定でWPオリジナルテーマを作成します。今回の参加者のスキルレベルは個人でWeb制作を仕事にする人から、html要素やcssをリファレンスを見ながらタイプする人までいますが、まあ何とかなるでしょう。各自、自分の現時点の課題を意識して勉強に望んで下さい。

1-1：ドットインストールの動画を見る

学習を始める前に、ドットインストールさんを見て、作業の概要をつかみました。
#07 ゼロからテーマを作ってみよう
次回の予習としてドットインストールを7回目以降くらいから見ておきましょう。初心者の人は最初からどうぞ。

1-2：作業用のフォルダとindex.htmlファイルを作成

新規フォルダ「wptest」を作って、新規に　index.html　を作成します。文字コードはutf-8にしましょう。
ドットインストールさんの手順を参考にindex.htmlを書いていきましょう。ただし、この授業ではマークアップにhtml5の要素も使います。

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>はじめてのWordPress</title>
</head>
<body>
<div id="top">
	<header>
		<h1><a href="/">はじめてのWordPress</a></h1>
		<nav>
			<ul>
				<li><a href="/">menu</a></li>
				<li><a href="/">menu</a></li>
				<li><a href="/">menu</a></li>
				<li><a href="/">menu</a></li>
			</ul>
		</nav>
	</header>
	<div id="main">
		main
	</div>
	<aside>
		sidebor
	</aside>
	<footer>
		footer
	</footer>
</div>
</body>
</html>

<!doctype html>

<html>

<head>

<title>はじめてのWordPress</title>

</head>

<body>

<h1><a href="/">はじめてのWordPress</a></h1>

<nav>

<ul>

</ul>

</nav>

</header>

main

</div>

<aside>

sidebor

</aside>

footer

</footer>

</div>

</body>

</html>

1-2：ブラウザ間の差異をなくす為にnormalize.cssを設置

今回はreset cssを書かずに、normalize.cssを利用します。Downloadをクリックして、開いたページを「wptest」フォルダに”別名でページを保存”しましょう。
normalize.cssについてはコリスさんの記事が分かり易いので、読んでおきましょう。
head要素の最下部に、normalize.cssを読み込んでおきます。

<head>
    <meta charset="UTF-8">
    <title>はじめてのWordPress</title>
    <link rel="stylesheet" href="normalize.css">
</head>

<head>

<title>はじめてのWordPress</title>

</head>

1-3：style.cssを設置

「wptest」フォルダにstyle.cssを作成します。文字コードはutf-8にしましょう。後で、ちゃんと読み込まれているかを確認し易いように、bodyのcolorを変えてあります。

@charset "UTF-8";
body {
    color:red;
}

@charset "UTF-8";

body {

color:red;

}

head要素の最下部に、style.cssを追加します。

<head>
    <meta charset="UTF-8">
    <title>はじめてのWordPress</title>
    <link rel="stylesheet" href="normalize.css">
    <link rel="stylesheet" href="style.css">
</head>

<head>

<title>はじめてのWordPress</title>

</head>

index.htmlをブラウザで表示して、Firebugなどの開発ツールでnormalize.cssとstyle.cssが読み込まれているか、確認しましょう。

1-4：今回のまとめ

テキストエディタの操作に慣れておこう

学習の際にはテキストエディタを使いこなす事が大事です。Dreamweaver、TeraPad、真魚、mi（Mac）など、なんでも良いのですが、初期文字コードはUTF-8Nにしておきましょう。また、普段から学習に使うテキストエディタをどんどん使って、操作に馴れておくのが良いです。自転車の運転と同じで、どうしても一定の練習時間が必要ですから、それは覚悟しておくように。

高性能な開発環境について

EclipseやAptana Studioなど、高性能な開発環境は、基礎が身に付いた人が効率を上げるために使うものです。html要素やcssプロパティがスラスラ書けるようになってから使うのをお勧めします。

便利なWebサービスについて

また、便利なWebサービスの中には「簡単なドラッグ＆ドロップ操作でWebサイトを構築できる」というものがありますが、これはhtmlやcssを勉強したくない人や、基礎が身に付いた人が仕事などのカンプ制作目的で使うツールです。学習中の人は無視しましょう。
例えば、カップ麺はおいしいくて便利ですが、料理が上手になりたいなら、カップ麺は排除すべきです。食材や味付けの知識や、調理道具の使い方を学ぶ機会を自ら逃してしまうだけです。

キャラメルメープルポップコーンのパッケージをhtml5とcssで再現

コメントをどうぞ

2013-3-8勉強会で行った「マークアップとcssの筋トレ」は、キャラメルメープルポップコーンのパッケージを取り上げました。

マークアップとcssの筋トレとは？

チラシ、パッケージ、書籍などの印刷物や、看板などをhtmlとcssで再構築することで、マークアップとcssのスキルをアップする為の練習です。

手順

まず、題材を用意します。

今回はこれ。

セブンイレブンで買いました

選ぶ題材は、文書量があまり多くないものが良いでしょう。

文字要素を抜き出します。

SEVEN&amp;i PREMIUM
キャラメルメープルポップコーン
キャラメルの甘さとメープルの風味豊かなポップコーンです。
50g
1袋50g当たり272kcal
写真はイメージです
メープル香料使用
VALUE PRICE 100YEN

SEVEN&i PREMIUM

キャラメルメープルポップコーン

キャラメルの甘さとメープルの風味豊かなポップコーンです。

50g

1袋50g当たり272kcal

写真はイメージです

メープル香料使用

VALUE PRICE 100YEN

お好きなエディタでマークアップする

この段階では以下に留意して下さい。

印刷物をWeb上に再現するつもりで、SEOを考慮すること。
マークアップに不要な要素（div,span,br）や、属性(id,class)は使わない。これらはcssで装飾する段階で使う
doctypeを指定する。html5推奨。
title要素も忘れずに

ここで、メンバー同士で、各自のメークアップを発表します。比較・検討すると面白いです。
マークアップには、厳密な意味での正解はありません（明らかな間違いはあるでしょうが）。
例えばこの題材では次の様なパターンがありました。

<section>
<p>SEVEN&i PREMIUM</p>
<p>キャラメルメープル</p>
<h1>ポップコーン</h1>
</section>

<p>SEVEN&i PREMIUM</p>

<p>キャラメルメープル</p>

<h1>ポップコーン</h1>

</section>

<section>
<hgroup>
<h3>SEVEN&i PREMIUM</h3>
<h2>キャラメルメープル</h2>
<h1>ポップコーン</h1>
</hgoup>
</section>

<h3>SEVEN&i PREMIUM</h3>

<h2>キャラメルメープル</h2>

<h1>ポップコーン</h1>

</hgoup>

</section>

<hgroup>
<h3>SEVEN&i PREMIUM</h3>
<h1>キャラメルメープルポップコーン</h1>
</hgoup>

<h3>SEVEN&i PREMIUM</h3>

<h1>キャラメルメープルポップコーン</h1>

</hgoup>

この場合は、パターン3の方が妥当性が高いです。hgroup内の見出し要素は、最も数字の小さいものがアウトラインとして採用され、その他は省略されてしまいます。
「キャラメルメープルポップコーン」は、一つながりの商品名で、要素としても「キャラメルメープル」と「ポップコーン」で分けるべきではありません。「ポップコーン」の方が大きい文字になっているのは、cssで調整しましょう。

cssで装飾する

まずは題材を出来るだけ再現してみます。
その上で、Webならではの工夫を加えると、より良いです。
ここで、必要ならば、divやspanを追加したり、idやclassなどの属性を追加しましょう。

こんな感じにしてみました

screenshot-html5-popcorn-package

<body>
<hgroup>
<h3 class="logo"><span class="si">SEVEN&amp;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>

<body>

<h3 class="logo"><span class="si">SEVEN&i</span><span class="pr">PREMIUM</span></h3>

<h1>キャラメルメープル<span>ポップコーン</span></h1>

<h2>キャラメルの甘さとメープルの風味豊かなポップコーンです。</h2>

</hgroup>

<ul>

<li>写真はイメージです</li>

<li>メープル香料使用</li>

</ul>

<p>

</body>

cssはこんな感じ。

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);}

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だけで描いています。

サイト制作

8件の返信

ただいま制作中のサイトです。
http://nobu-69.com/manakaa/sample2/

全体的にまだ大まかな状態です。ちいさい突っ込みはいれないように！w

試しに全文モリサワWEBフォントにしてみました。

検索よけのメタタグ

コメントをどうぞ

作成中のサイトをお客さんに確認てもらうのにサイトをサーバーに仮アップするんだけど、
まだ一般に公開したくない場合の技です。続きを読む →

スクロールバーカスタマイズ

1件のフィードバック

パソコンのデフォルトのスクロールバーってダサいですよね。変な青いやつ。
コンテンツ内にoverflow-y:scroll;などとしてスクロールバーを表示させた時
あの青いのが出てくるとデザインが台無しです～。

jQでいいのがないか探してみたら
http://kachibito.net/web-design/tiny-scrollbar.html
が良さそうなんですが、使い方がいまいちわかりません。
本サイトのダウンロードボタン押しても？？？？だし。
http://baijs.nl/tinyscrollbar/

今度の新年会の授業でお願いしまーす。続きを読む →

2012-9-21勉強会

コメントをどうぞ

2012-9-21と2012-9-28の二回にわたって「cssだけでスライドショー」を勉強しました。まとめを以下にアップしましたので、ご確認下さい。
2012-9-21は「マークアップとcssの筋トレ」も行いました。これについてのまとめは後日、アップします。

パソコン倶楽部りんご

Webデザイン脱初心者の勉強会

タグ別アーカイブ: html

2014-01-10 勉強会

iflameで動画をhtmlに埋め込む

文字参照で htmlタグを htmlファイルに表示させる。

サイトリニューアルについての注意点（.htaccessと404.html）

htmlファイルにfaviconの設定しよう

hoverした時に疑似要素で画像やテキストを出現させる。

2013-06-21の勉強会で「hoverした時に疑似要素で画像やテキストを出現させる。」が出来ました！

以下を追加することで無事解決！

css3で簡単横並びレスポンシヴデザイン

IEの印刷プレビューについて

本日の勉強リクエスト(シンタックスハイライターとWPに動画を貼りつける）

html5で作るWPオリジナルテーマ：1

目的

内容（予定）

必要な心構え

必要な環境

html5で作るWPオリジナルテーマ:1

1-1：ドットインストールの動画を見る

1-2：作業用のフォルダとindex.htmlファイルを作成

1-2：ブラウザ間の差異をなくす為にnormalize.cssを設置

1-3：style.cssを設置

1-4：今回のまとめ

テキストエディタの操作に慣れておこう

高性能な開発環境について

便利なWebサービスについて

キャラメルメープルポップコーンのパッケージをhtml5とcssで再現

マークアップとcssの筋トレとは？

手順

まず、題材を用意します。

文字要素を抜き出します。

お好きなエディタでマークアップする

cssで装飾する

こんな感じにしてみました

サイト制作

検索よけのメタタグ

スクロールバーカスタマイズ

2012-9-21勉強会

2024年4月
月	火	水	木	金	土	日
« 8月
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

2013-06-21の勉強会で「hoverした時に疑似要素で画像やテキストを出現させる。」が出来ました！

以下を追加することで無事解決！

目的

内容（予定）

必要な心構え

必要な環境

html5で作るWPオリジナルテーマ:1

1-1：ドットインストールの動画を見る

1-2：作業用のフォルダとindex.htmlファイルを作成

1-2：ブラウザ間の差異をなくす為にnormalize.cssを設置

1-3：style.cssを設置

1-4：今回のまとめ

テキストエディタの操作に慣れておこう

高性能な開発環境について

便利なWebサービスについて

マークアップとcssの筋トレ とは？

手順

まず、題材を用意します。

文字要素を抜き出します。

お好きなエディタでマークアップする

cssで装飾する

こんな感じにしてみました

マークアップとcssの筋トレとは？