Nedia What's up!

ネディアのエンジニアによるIT技術やサービスの紹介・検証などをお届け!

HTML5とCSS3

Webサイト担当の竹内です。

CS6の使用感について・・・書きたいところですが、
会社のPCに入れて仕事で実際に使ってみるのがベスト
という訳で今のプロジェクトがひと区切りする来月あたりから
本格的に使っていこうかと思っております。

今日は、『コーディングを行う上で工夫している事』についてです。

1.テキストでいけるところはなるべくテキスト
2.HTML5でも過去のブラウザに対応
3.ソースはシンプルに
すごくありきたり・・・

1について
スマホやタブレットで拡大してもキレイにみえるのがテキストの利点ですが、
画像を使ったほうが華やかできれいなボタンになるのも事実です。
そこでWebフォントを使ったり、テキストに対してシャドウを使ったり背景にグラデーション(非画像)borderの色を工夫してハイライト風に・・・
と色々工夫して画像に負けないきれいなグローバルナビを作るのがちょっとした目標です。
さらに、マウスオーバーで位置をずらしたり、色を変えたり、テキストそのものを別のテキストに
差替えたりといろいろできるように日々努力しています。
appleのサイトはとても参考になるのですが、最近はフラットデザインに移行しつつもあるので悩みどころ。。

2と3について
HTML5、CSS3はサイトの装飾に関わることはすべてCSSでやろうと言う観点から
擬似クラスなど新しめの技術を使いつつ、ソースをキレイにするととても気持ちが良いです。
classやidなど極力記述せずにマークアップできちゃうのがとても良い所。

ですが、それも最近のブラウザでしか使えないので。。。
古いブラウザの場合は「レイアウトが崩れない」「見にくくない」サイト作りを目指しています。
これがまぁ手間のかかることかかること。。(とあるブラウザの6とか7とか8とか)
手間を惜しまず、妥協をせず、見やすいサイトを目指します。

今後の課題については今のところ『HTML5のタグの特性を深く理解すること』かなと思います。
使っているテキストエディタから
「そんなところにそのタグ使えねーから!」
って怒られることも多々あり、
sectionやarticle、ヘディングタグの使い方をもうちょっと学習していきたいところです。

それでは今日はこの辺で。