June 20181 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

デザイン | マークアップその3

JUGEMテーマ:写真


【WEBデザイン】

本サイトのリニューアルについて、
やっぱりHTML5で作業を進めようとマークアップのし直しをしました。

IEについてはまだHTML5が対応ではないため、
JavaScriptで埋め込みました。

<参考サイト様>
http://www.html5.jp/html5doctor/how-to-get-html5-working-in-ie-and-firefox-2.html

上記サイト内ですべてを言ってくれていますが、
今までのコーディングとほとんど変わらないものの
HTML5ではさらに意味のあるコーディングができます。

制作者がどのようにページを組んでいくのか
デザインと一言で言っても表面上ではなく
意味のあるデザインとして作業をしなくてはいけなく
なっていくのかな?と改めて感じます。

・・・いやあ、楽しい(笑

個人的にマークアップが好きだったのは
表面上のかっこよさというよりも
どのような意味合いで作っていこうと段落をおって
考えていく事に楽しさを感じていたのでHTML5の
マークアップは比較的すんなりと入っていきました。

表面上はまったく変わっていない本家サイトですが
HTML5対応に変更しました。

headの部分は今の所、
<!DOCTYPE html>
<html lang="ja"> 
<head>
<meta charset="UTF-8"> 
<!--[if lte IE 8]>
<script src="shared/js/html5.js" type="text/javascript"></script>
<![endif]-->
<meta name="Description" content="写真・WEBデザイン・愛犬への愛が詰まったお家です=Photos-Homeです。" />
<meta name="Keywords" content="写真,静岡,Webデザイン,Photos-Home,CONTAXAria,NikonD-80,ポラロイド" />
<title>Photos-Home | 写真・WEBデザイン・愛犬への愛が詰まったお家です。</title>
<link href="shared/style/reset.css" rel="stylesheet" type="text/css" />
</head>

↑ああ。すっきりと今までXHTMLで慣れている人は
思うのではないでしょうか…

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta name="Description" content="写真・WEBデザイン・愛犬への愛が詰まったお家です=Photos-Homeです。" /> <meta name="Keywords" content="写真,静岡,Webデザイン,Photos-Home,CONTAXAria,NikonD-80,ポラロイド" /> <title>Photos-Home | 写真・WEBデザイン・愛犬への愛が詰まったお家です。</title> <link href="shared/style/reset.css" rel="stylesheet" type="text/css" />
</head/>
↑こんなのがずら〜とあってもううんざりという感じでした。

ちなみにhtml5.jsがIEやフォックスさんの古いバージョンを
対応にしてくれる魔法のJavaScriptです。

<header><footer><section><article><nav>など
今まで意味のない<div>で囲んでいた要素を
意味のあるマークアップが可能になるHTML5は
今後のSEO対策なんかにも影響があるんじゃないかな?っと
なんとなく思っております。

ちなみに仕事のテストも兼ねて
.htaccessも触って、モバイル、スマフォの
ジャンプページのみも対応済みです。

.htaccessを設置するにあたり、本当に勉強になって
これからのお仕事にも色々と対応できるな〜と
かなりワクワクとしてしまいました。

**********

明日は前職のお花屋さんにお手伝いにいくはずが
夜遅くに元の相方さんからメールがあり
急遽お休みになりました。

そんなこんなでせっかくのお休みなので好きな事を
しよう!っと思ったにもかかわらず
結局好きな事はアフロのいる部屋でパソコンの
前に座ることなのか…と少しだけ虚しくなりました(笑

でもそれだけ好きな事を仕事と出来る
喜びをひしひしっと感じています。
一生続けていけたら嬉しいなあ。

**********

現在本家サイトリニューアル中↓


■micchi
静岡在住のwebデザイナー。
他にAtelier*Spoonにて写真教室など
しております。
コーギーのアフロと幸せな
毎日を送っております。
■好きな物
・お菓子作り
・写真撮影
・STUDIO M'の食器
・MATEUSの食器

selected entries

categories

archives

recent comment

link

search this site.

others