選択されているタグ : サイト制作

HTML5でマークアップに挑戦

最近、色々なセミナーでHTML5の話を聞いていたものの、行動できていなかったので、実際にサイトを組んでみよう!と思い、HTML5で組んでみました。




こいけやクリエイト」のサイトをマークアップしてみました。



これまで<div id="header">としてた部分を<header>にしたり。

<section>と<article>のマークアップに迷ったり。

<ul id="nav">ってしてた部分を<nav>にしたものの、やっぱり<li>使いたいから<ul id="nav">ってもう一回書いてみたりなど。

まだ疑問は多々あります。(^_^;)

ソースはスッキリした様な…
しない様な…?

宣言文が短くなってスッキリしたかなあ?という感じでしょうか?


CSS3も少しだけ取り入れました。
「border-radius」(角丸)
「box-shadow」(シャドウ)
だけですが。

段組みでカラムレイアウトを使おうか迷ったんですが、結局はフロートで組んでしまいました。IEで崩れたらどうしよう…っていう気持ちが…

角丸がカクカク四角になるくらいならOKかな?


Safariで見ると…

↑Safariで見た場合


IE8で見ると…


↑IE8で見た場合

HTML5でマークアップする為に
参考にさせていただいたサイト
■HTML5.JP
http://www.html5.jp/

■今からハジメるHTML5マークアップ(羽田野さんのスライド)
http://www.slideshare.net/swapskills/futomi

■HTML5でサイトを作ろう
http://www.html5-memo.com/

マークアップのお手本にさせていただいたサイト
(どの情報をarticleに?sectionに?と迷った時に、お手本にさせていただきました。)
■無印良品
http://www.muji.net/


次はスマートフォン用のサイトを作ることが目標です。


制作を終えて感じたこと

 
今日は、染織ひろば「欅舍」さんのウェブサイトのリニューアルの日でした。欅舍さんは、家から徒歩15分ほど、車だと5分ほどのご近所さんです。

縁あって、サイト制作をすることになり、2007年…つまり、私が社会人になって1年目の頃からずっとお世話になっています。

欅舍のhiroさんは、とても熱心な方で、感心することがたくさんです。
まず、パソコンを覚え始めたのは60代以降からというのに、ウェブ、インターネットにどんどん興味をもって吸収がとても早い!ということ。そして、学ぶ気持ちがいつも前向きだということ。


リニューアルしました。

サイトをリニューアルしました。

個人サイトは、ずっとGallery MIHHAという名前でやってたんですが、今回は心機一転、mihha.comって名前にしました。

自分自身の履歴書であり、ポートフォリオであり、日記帳でもある……。ここを見たら、あ、mihhaてこういう人ね。みたいなのがすぐ分かる様な…。そんなサイトを目指してみました。

更新システムは最近仕事でよくお世話になっているa-blog cmsを利用しました。Oneライセンスで作っています。