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）

---

欅舎のひろさんとパソコンレッスンをしてきました。
ひろさんのアトリエがレッスンの場所です。
糸、布、機織機に囲まれている温かな芸術的な空間の中に、パソコンが２台。

ホームページの更新作業を一緒にやる為のレッスンをずっと続けていただいています。使っていただいているところを直接見てアドバイスをしたり、一緒にデザインを考えたり等…制作側としてもとても有意義な時間です。

---

「パソコンレッスン」の続きを読む

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

a-blog cms v1.3.0を試してみた

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

a-blog cms v1.3.0をインストールして、色々と試してみました。

設置先URLは、
http://mihha.heteml.jp/ablogcmstest/

です。

最初は、このブログ（http://www.mihha.com）をアップデートしたので、ここで色々試そうと思ったんですが、いきなりテーマ変えていじるのも怖いな〜…（＾＾；）と思ってしまい、テスト用で別の場所にインストールして、試してみることにしました！

v1.3.0で新しく追加された「company3」のテーマを色々とカスタマイズしてみました。また、「iPhone」のテーマも使ってみました☆

以下に感想など書いています。

---

「a-blog cms v1.3.0を試してみた」の続きを読む

関連タグ：a-blogcms CMS 

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