Home > Archives > Author

Author

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

バレンタインコンサート

皆さんこんにちは！gulaです(^^)

先日はバレンタインデーでしたね～この時期は各所でバレンタインイベントが大量発生しますよね。
今回gulaは、ピアニスト・平岡麻衣子さんによるバレンタインコンサートに参加してきたので、そのことについて書いていきます。

まずは平岡麻衣子さんのプロフィールを紹介します。

平岡麻衣子
1988年から３年間ミシガン大学でバソロミュー教授に指導を仰ぐ。
帰国後、広島音楽高校、大阪音楽大学を卒業。オーストリア・ウィーン市立音楽院に留学し、クロプフィッチュ教授の下で研鑚を積む。
その留学中に、不慮の事故で４ヶ月間意識不明の重体になる。
奇跡的に意識は回復したが、全身麻痺（主に右半身麻痺）が残る。
その後、努力を重ね、次第に左手が動くようになり、５本指を使って弾くようになる。現在、右手も少し動くようになり、両手での演奏にも挑戦している。
第２障害者国際ピアノフェスティバル（バンクーバー2009年）に出場。芸術賞を受賞。

今回gulaが参加したバレンタインコンサートは、五年前から開催されているもので、gulaの家族と平岡さんの家族とは昔からご縁があり、毎年声をかけて頂いてます。
いつも気持ちの入った演奏をされ、毎回感動しています(*T▽T*)
・平岡麻衣子さんの活動紹介サイト

↓大崎上島ピアノリレーコンサートでの平岡さんの演奏

プロフィールにあるように、平岡さんは事故で体が思うように動きません。
しかし、日々練習を積み重ねることにより、年々ピアノを弾く手がスムーズになっていて、このコンサートに行くたびにそれを実感しています。

平岡さんを見ていると、自分はこれほど頑張れているだろうかと思い反省するばかりです。
gulaも日々を一生懸命生きていこうと思います！
また演奏を聴きに行きたいです。素敵な時間をありがとうございました(＾▽＾)/

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

2012年gulaの目標！

gulaです！2012年一発目の投稿です！皆さん明けましておめでとうございます！今年も一年よろしくお願いしますm(_ _)m

さて、今回は新年になったということで、今年の目標を発表したいと思います！皆さんに知ってもらうことによって後をなくし、自分を奮い立たせようという魂胆です(＞▽＜；；

１．体力増強！
昨年フットサルをする機会があり、そこで悟った事があるんです・・・貧弱になりすぎだろ、と。
たった３分動いただけで息切れＭＡＸ。
そういえばお腹周りも最近は・・・(ﾉω･､)
このままではいかん！ということで健康な体作りが目標その１です。具体的には
・５kmを21分で走れるようになる（高校時はこれぐらいでした）
・細マッチョ（笑）
を目標に頑張っていきます！

２．ＷＥＢを身につける！
以前から少しずつ勉強はしていましたが、まだ実践できる程ではないので、今年こそは仕事に役立てられるぐらい実力をつけていきます！

今年の年末にまたブログで達成できたかどうか発表したいと思います。
皆さん応援よろしくお願いします！(^_^)

↓2012年の初日の出です