タグ別アーカイブ: マークアップ

府中でホームページ制作

コメントをどうぞ

自分のサイトができました。キャッチコピーやいろいろと手直ししたいですが、完璧にできるまでをまっていてもその時は来ない（上を見ている以上）なので、一応これで完成です。紙媒体と違い後から何度でも修正、変更できるのがweb siteのいい所。

http://manakaa.com/
http://blog.livedoor.jp/happygolucky1969/archives/52401162.html

2014-02-21 勉強会　デザインとしてのマークアップ

コメントをどうぞ

この日の勉強会は、マークアップについてぼんやりなメンバーがいるので基本からやりました。

少々話がそれますが、デザイナーとはなんでしょうか？……..デザインする人のことです。そんなの知ってますよね（笑）

では、デザインとはなんでしょうか？….かっこいいのや可愛いいのを作るのもデザインですが、それだけではありません。便利で使いやすいや伝わりやすいを作るのもデザインです。ユニバーサルデザイン（できるだけ多くの人が利用可能であるようなデザインにすること）なんていうのもありますよね。

意外と前者だけがデザインと思ってしがいがちですが、後者あっての前者な訳です。簡単な例ですが、大人の高級感を出したいなら黒と白を基調にするのがいいでしょう（シャネルとか）。子供の元気さを出したいなら原色をたくさん使うといいですよね（トイザラスとか）。何を伝えたいかによってデザインは変わってきます。なので伝えたい事がないのであればデザインは存在しません。伝えたい事などはさておき、自分が可愛いやカッコいいと思ったものを表現するのもアリですが、それはデザインではなくアートです。（まあ、デザインとアートについて話すと長くなるのでここではそうしておきます。）

使いやすいや伝わりやすいを作るのがデザインという事なら、正しいマークアップでサイトを作るというのは絶対必要な事です。検索エンジンGoogleにサイトの内容を伝わりやすくすることでGoogleの評価は上がります。評価が上がるという事は検索が上位に来るという事です。検索が上位に来るという事は、ユーザーにこちらの伝えたい情報が伝わりやすくなるのです。

今度は見に来てくれたユーザーの気を引く為に見やすいや使いやすいを考慮しながらカッコいいや可愛いを表現していくのです。

ウェブデザイナーとはそんな仕事だと思います。僕もまだまだ未熟ですが、以上の事を知っているのと知っていないのとでは、だいぶ差が出てくるのではないでしょうか。というわけで見た目のデザインだけではなく中身のデザインも頑張りましょう。文字色を赤にしようかピンクにしようか悩むように、ここのマークアップはpかな？それともh2？などと悩んでいきましょう。文字色に答えはありませんが、マークアップには答えがあるので頑張りましょう。

あと、この記事を読んでいて何か違和感を感じませんでしたか？文才がないので読みにくいというのは無しで！（笑）
写真のサイズもそうですが順番が問題です。シャネル、トイザラスの順番で説明がされているのに、写真の順番が逆です。（こういうのはもともと人間工学という分野で研究されてきました。）使いやすさや見やすさを考えるのであれば、説明と写真の順番は同じでなければなりません。

footerで見かける「copyright©hogehoge.com all rights reserved.」のマークアップ

pでやったりaddressでやったりしてましたが、pの方が正しいみたいです。でも、そこが連絡先なのであればaddressがベター。下記サイト参照↓

http://www.html5.jp/tag/elements/address.html

以上勉強会まとめです。（というか僕なりのデザインの考え方かな　w）

パンくずリスト mark up

コメントをどうぞ

みなさん、パンくずリストは何でマークアップしますか？

html5ならこんな方法もあるということで、現在製作中のサイトはこれにしてみました。

<nav>
 <p>
  <a href="/" rel="index up up up">第一階層</a> >
  <a href="/products/" rel="up up">第二階層</a> >
  <a href="/products/dishwashers/" rel="up">第三階層</a> >
  <a>現在位置</a>
 </p>
</nav>

<nav>

<p>

</p>

</nav>

参考にさせて頂いたサイト
coliss.com

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

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

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

2013-7-5 勉強会

コメントをどうぞ

勉強会の概要は

フォームの入力不備があった時、入力済みの内容を残しつつ入力画面に戻るには？
display:table-cellで隙間をあけるには？
フォームのボタンはinput？button?

でした。続きを読む →

WP テキストの背景に写真を表示させる

6件の返信

貴如意さんサイトのトップページ。http://kiraku07.info/
あいさつ文の背景に朝日の写真が表示されています。
WPで、このように固定ページに写真の上にテキストを表示させるには、どうしたらよいのでしょうか？

通常のHTML,CSSの場合はcssのbackground-imgで指定すれば良いのですが、
貴如意さんサイトを見ると写真とテキストは、それぞれdivで囲まれています。

それと、写真はレスポンシブになっています。それには何か指定が必要でしょうか？

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

真中のぶ備忘録

コメントをどうぞ

2013.03.22の勉強会にて

①グローバルメニューを横並びする際にliにフロートしないでli aにフロートしてしまうので、liをフロートする事！これは癖で何度もやってしまうので注意する事！

②バナーサイズに国際標準規格というのがあるのを知りました。
　http://www.bana-wave.com/banner/info/bannersize.html

③メディアクエリでスマホやタブレットの大きさに対応する際にブレイクポイントは、横幅６００pxだけでいいかも。たくさんやるときりがない。あと、やるなら800。８００以下は、横幅％指定。８００以上はpx指定。

④cssアニメーション
　タブレット、モバイルはie10,firefox,safari,chromeなので問題ない。
　デスクトップは、ie9以下は効かないから、ヘッドにif ieでjQueryを実装、または静止画を一枚表示。

キャラメルメープルポップコーンのパッケージを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だけで描いています。

2013-3-8勉強会

1件のフィードバック

今日は、新メンバーのKIKOさんが参加されました。
お菓子が今回も更に充実!!　KIKOさんからもたくさんいただきました!
KIKOさんは元漫画家さんという事で、イラスト作品も拝見させていただきました。さすがプロ!!

議題は以下の通り

KIKOさんのマッサージ治療院のチラシデザインについて
キャラメルメープルポップコーンのパッケージでマークアップとCSSの筋トレ
サイトのTOPページをWwordPressにしたい
WwordPressのユーザー一覧ページを作る

です。続きを読む →

2012-9-21勉強会

コメントをどうぞ

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

2012-9-21勉強会

コメントをどうぞ

第３回勉強会のほうこくです。

概要

講師

高橋圭介

場所

柴崎学習館第二和室

日時

2012年9月21日18時-22時

「マークアップとcssの筋トレ」
teamviewerで講師の画面を共有
10月分の予約と会費の集金
真中さんの黄金比講座ミニ
「cssだけでスライドショー」

マークアップとcssの筋トレ・teamviewerで講師の画面を共有

“びゅう”の”紅葉めぐり”のパンフレットをマークアップしました。

teamviewerで高橋先生の画面を共有しながら各自のマークアップを確認しました。

真中さんの黄金比講座ミニ

詳しくは真中さんに聞いてくださいね

cssだけでスライドショー

詳しくはこちらをご覧ください。

パソコン倶楽部りんご

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

タグ別アーカイブ: マークアップ

府中でホームページ制作

2014-02-21 勉強会　デザインとしてのマークアップ

footerで見かける「copyright©hogehoge.com all rights reserved.」のマークアップ

パンくずリスト mark up

2014-01-10 勉強会

2013-7-5 勉強会

WP テキストの背景に写真を表示させる

真中のぶ備忘録

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

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

手順

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

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

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

cssで装飾する

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

2013-3-8勉強会

2012-9-21勉強会

2012-9-21勉強会

概要

マークアップとcssの筋トレ・teamviewerで講師の画面を共有

真中さんの黄金比講座ミニ

cssだけでスライドショー

月	火	水	木	金	土	日
« 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	31

footerで見かける「copyright©hogehoge.com all rights reserved.」のマークアップ

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

手順

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

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

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

cssで装飾する

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

概要

マークアップとcssの筋トレ・teamviewerで講師の画面を共有

真中さんの黄金比講座ミニ

cssだけでスライドショー

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