mihha.com

HTML5でマークアップに挑戦

カテゴリー： web制作関連 < mihhaの日記（blog）

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

---

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

---

---

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

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

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

まだ疑問は多々あります。（＾_＾；）

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

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


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

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

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

---

↑Safariで見た場合

---

---

↑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/


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

---

関連タグ：HTML5 CSS3 サイト制作 

Posted by mihha at :  パーマリンク トラックバック ( 0 ) コメント ( 0 )

制作を終えて感じたこと

カテゴリー： web制作関連 < mihhaの日記（blog）

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

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

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

---

「制作を終えて感じたこと」の続きを読む

関連タグ：a-blogcms サイト制作 リニューアル 

Posted by mihha at :  パーマリンク トラックバック ( 0 ) コメント ( 0 )

リニューアルしました。

カテゴリー： web制作関連 < mihhaの日記（blog）

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

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

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

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

---

関連タグ：サイト制作 a-blogcms 

Posted by mihha at :  パーマリンク トラックバック ( 0 ) コメント ( 1 )