Home > ホームページ制作 Archive

ホームページ制作 Archive

WEBクリエイター１年生～その２～

gulaです！皆さんこんにちは(^^)
WEBクリエイター１年生としてはや１ヶ月が経ちました。
今回は前回に引き続き、学んだ事を掲載したいと思います。

floatタグとは
floatタグはレイアウトにとても重要なタグと前回紹介しましたが、今回はもう少し掘り下げていきます。

例えば下の画像のようなレイアウトにしたいと考えます。

これをfloatを使わず単純に作るとこうなります。

単にボックスを作るだけでは下に下に配置され続けるので、回り込ませる命令を出さないといけないのです。

もちろん回り込ませるスペースがないと、floatを使ってもボックスの下に配置されてしまいます。
ここで大事なのが幅の計算です。この計算に苦しんできました(ＴｍＴ)
例えばこんなサイトを作ってみました。

最初、左のメニューは幅を260pxにし、メニューと画像との距離は10px。全体の幅は960pxなので画像は690pxでいけるだろうと考えたのですが、それだとメニューの下に配置されてしまいました。
つまり合計値が全体の幅を超えてしまったんです。
原因はメニューについている枠線でした。この枠線の幅は初めに計算した260pxに含まれないんです。
正しい計算は260＋2（枠線の幅が1pxなので両端合わせて）+画像との距離10なので、画像は688pxで作らないといけません。
また余白指定するスタイルの「padding」を使った際にも同様の計算になります。

最近はこの辺りの計算にも慣れてきましたが、初めは本当に苦労しました。
早く想像通りのWEBサイトを作れるようにこれからも頑張っていきます(＾▽＾)/

コメント: 0
トラックバック: 0

WEBクリエイター１年生

皆さんこんにちは！gulaです(^^)
桜も満開を迎え、新１年生や新社会人など始まりの季節になりましたね。
実はgulaも、４月から所属がDTPからWEBに変わり、WEBクリエイター１年生として新しくスタートを切りました(*￣ー￣)ｖ
今回は自身の復習も兼ねて、学んだ事を掲載したいと思います。

HTMLとは？
ホームページを作っていくための言語で、GoogleやFaceBookなど、ほぼ全てのサイトがこれを基に作られています。
下記が基本の型。これはHTML5の基本形です。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title>○○○○○</title>
<link rel=”stylesheet” href=”Lesson1.css”>
<link rel=”shorcut icon” href=”favicon.ico”>
</head>
<body>
</body>
</html>

HTMLは大きく分けて<head>と<body>の２つに分かれていて、<head>には文字コード、CSSの読み込み、検索エンジンにヒットするキーワードの設定等、ホームページには表記されないシステム的な設定をします。
<body>には、ホームページに表記されるものを書いていきます。

CSSとは？
HTMLとセットでホームページを作る技術。
HTMLではホームページの中身を作るのに対して、CSSは見た目を整えるのが役割です。
枠線を付けたりボックスの位置を決めたり文字のポイントを変えたり等できます。HTMLの<head></head>の中で読み込むことでHTMLに反映されます。
例えば
１年生です
という文字が span {color:red;} と書くことにより、
１年生です
と変化します。

色々なタグ
HTMLは様々なタグで出来ており、HTMLを覚えるというのはタグを覚えていくことと言っても過言ではありません。
基本となるタグ
<div>,<span>：特定の範囲を指定して、スタイルを付けるためのタグ
また<div>や<span>は一つのホームページに多数出てくるので、識別するためのタグとしてid，classがあります。
idは文書内に一つしかない要素で、classは複数ある要素です。
（例）<div id=”（id名）”>あああ<span>いいい</span></div>

リストタグ：<ul>,<li> or <dl>,<dt>,<dd>
箇条書きやメニューを作るタグです。簡単な例ですが、
<ul>
<li>うまい</li>
<li>やすい</li>
<li>時々遅い</li>
</ul>
と書けば、
・美味い
・安い
・時々遅い
と表記されます。

<dl>,<dt>,<dd>は定義型のリストで<dl>でリスト本体を定義し、<dt>でリストの項目を定義し、<dd>にそのリストの内容を記述します。
項目名　内容
という時に使います。

floatタグ
ボックスを左右に寄せ、テキスト等を回り込ませるタグ。
floatで指定したボックスや画像を右、左寄せにし、続くテキストなどをfloatで指定したボックスや画像の反対側に回り込ませることが出来るタグです。
これはレイアウトにとても重要で、特に苦労しているタグです(ＴｍＴ)
その辺はまた次回書いていきたいと思います。

今回はこれぐらいで。ちなみにホームページは右クリック→ページのソースを表示をすれば、そのホームページの中身を見ることができるので、作り方の参考にできます。
かっこいいページを作ろうと思うと、覚えなければいけないことが沢山あって大変ですね(;^_^A
gulaはまだ凝ったものは作れないので、基本的な事を中心に学習中です。
早く次の段階にステップアップできるよう頑張ります！(＾▽＾)/

コメント: 0
トラックバック: 0

オススメWEBサイトご紹介第２弾

gulaです！みなさんこんにちは(^^)
最近目がかゆく、鼻がムズムズしだして、身体で春がやってきているのを感じています(/へ＼*)))

さて今回の記事は、WEBデザインを考える際に役に立つサイトのご紹介第２弾です！
本日ご紹介するのはこのサイト！

「いけてるサイト.com」

このサイトは、誰かがWEBデザインをする際に参考になればと、多彩ないけてる・かっこいい・オシャレ・クールなサイトが集められているサイトです。
ちなみに日本語&日本人が制作しているサイトを対象としているそうなので日本人のデザイナーには、とても参考になるのではないかと思います。
現在カテゴリーは25種類もあり、その１つ１つに沢山のサイトが集められています。

その中でも、「教育・学校・就職」と「デザイン」がgulaが個人的に気にいったカテゴリです！
「教育・学校・就職」は特に学校が気に入ってます。
学校のイメージは真面目・シンプルが先入観としてありましたが、なかなか大胆に、興味を引くようなサイトを作ってる所が多々あり、とても参考になりました。

次に「デザイン」。デザイナーのサイトを集めたもので、さすがカッコイイと思うものばかりです。

きっとWEBデザインの良い参考になるサイトが見つかると思います！ぜひ一度アクセスしてみてください(＾▽＾)/

コメント: 0
トラックバック: 0

CSSアニメーションを簡単に実現するSencha Animatorを使って実際に作ってみた

皆さんお疲れ様です。よんです。

さて今日はCSSアニメーションについて書きたいと思います。Webに詳しい方ならご存知だと思いますが、今までWebサイトでアニメーションを表現すると言えばAdobeの「Flash」が使われていました。今もバリバリに使われていますけど（笑）

ですが、HTML5とCSS3が世に出てきてからは、徐々にその方向性が変わってきています。というよりもiPhone/iPadが出てきてからと言ったほうが正解かもしれません。お持ちの方はご存知の通り、iPhone/iPadではFlashは見ることができません。Flash対応のブラウザアプリを入れれば見ることは出来るのですが、標準では見れないようになっています。Appleが頑としてFlashを拒んでいるということもあります。そして、昨年の11月頃ですが、遂にAdobeはモバイル向けのFlash Playerの開発を打ち切りました。※PC版は今後も続けていくようです。

米アドビ、モバイル向けFlash Playerの開発打ち切りへ

実際にFlashを使っていた私個人の意見としてもFlashは独自仕様すぎるように感じます。素晴らしいツールなんですよ？ただその独自仕様により使いづらい（開発しづらい）というのが難点です。Appleいわく、オープンではない、また、Adobeを介さないと開発がままならないというのが主な理由のようです。

前置きが長くなってしまいましたが、私も脱Flashと思い、今回CSSアニメーションにチャレンジしてみました。Sencha Animatorというツールを使えば簡単にHTML5/CSS3ベースのアニメーションが制作可能です。

Sencha Animator

Adobeも「Adobe Edge」というCSSアニメーション制作ツールのベータ版を出しているようです。また機会があれば今後触ってみたいですね。

今回は弊社のメインサイトのFlashと同じアニメーションをCSSで表現してみたいと思います。詳細な制作方法は省きますが、制作段階を箇条書きにしてみました。