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

manakadesign

府中でホームページ制作

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

manakadesign

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

sm2014

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

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

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

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

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

toysrus

chanel

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

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

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

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

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

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

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

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

pankuzu

パンくずリスト mark up

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

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

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

sm2014

2014-01-10 勉強会

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

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

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

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

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

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

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

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

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

wordpress

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

貴如意さんサイトのトップページ。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

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

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

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

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

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

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

手順

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

今回はこれ。

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

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


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

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

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

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

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

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

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

cssで装飾する

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

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

screenshot-html5-popcorn-package

cssはこんな感じ。

実装は以下のリンクから開けます。
html5-popcorn-package
SEVEN&iのロゴマークや、VALUE PRICE 100 YENのマークは、本来なら画像にすべき所ですが、練習でcssだけで描いています。

study

2013-3-8勉強会

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

議題は以下の通り

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

です。 続きを読む

2012-9-21勉強会

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

概要

講師
高橋 圭介
場所
柴崎学習館 第二和室
日時
  • 「マークアップとcssの筋トレ」
  • teamviewerで講師の画面を共有
  • 10月分の予約と会費の集金
  • 真中さんの黄金比講座ミニ
  • 「cssだけでスライドショー」

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

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

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

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

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

cssだけでスライドショー

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