So-net無料ブログ作成
検索選択

HTML/CSS応用1日目(訓練33日目) [通学日記]

今日は練習問題を2つやりました。

情報系サイトと素材系のサイトを作りました。
情報系サイトでは主にリンクとCSSの練習。
素材系サイトでは2段組のCSSレイアウトの練習でした。
結構難しいのに、さらっと終わったfloat、ボックス計算。
みんな頭を抱えていました。
ここがわかると、できることの幅が広がるのでがんばって!

それから、昨日、別の分野ですが
仲間が一人就職が決まり、退所しました。
めでたいです。おめでとうございます!


それから土曜日に大阪で、トップレベルのWebデザイナーさんと知り合うことができ
(著作も持っています)、
メールでダメもとでアドバイスをお願いしたところ
Webデザイナーを取り巻く環境と、勉強の方法を教わりました。

僕は趣味でショップ運営しているのですが、
ビジネスですと言いたいけれど、儲けになってないので趣味です)、
ショップのトップページをとにかく作ることだと
しかも量ではなく、質を狙ってくださいと言われました。

そこで居残り時間などに、ショップのトップページを作り始めました。
まだぜんぜんできていませんが少しずつ進めています。


では、今日のメモ
・デフォルトの位置をリセットするために、
 1回marginとpaddingをリセットする。

*{
margin:0;
padding:0;
}
本当は*ではなく、使うタグだけリセットするほうが良い。
*を使うとulなど弊害があるものもある。

・background 色 url(パス) repeat ← ショートハンド
・color:fc0 → ffcc00のこと

・floatをクリアする
<HTML>

<CSS>
.class{
clear: both;
height:0;
line-height:0;
font-size:0;
}


今日の感想は、自分でデザインすると素人っぽくなってしまうので
プロっぽいデザインはどうやってやるのか知りたいと思いました。

ではまた明日!

HTML/CSS基礎5日目(訓練32日目) [通学日記]

今日でHTMLは終わりでした。
早い~。


今日やったこと
・コメント送信フォームを作成する(form、input、selectタグ)
・フォームのデザインアレンジする
・ページを公開する(FFFTPの使い方
・ページの左側にメニューを表示する(float)
・デザイン設定を共有する(外部CSS)
・練習問題


今日のメモ
・CSSは、基本、外部CSSで。
・CSSの優先順位は
 インラインスタイル > ファイルstyleタグ > 外部CSS

明日は引き続き練習問題です。

HTML/CSS基礎4日目(訓練31日目) [通学日記]

この日も早かった~。
内容にはついていっても、作業量がついていけないところがありました。

この日にやったこと
コンテンツの横幅を指定する(widthプロパティ
・文字や画像を中央ぞろえで表示する(text-alignプロパティ)
・段落などを画面の中央に配置する
・コンテンツの間隔を調節する(margin)
テーブルを作成する(table、tr、td、thタグ)
・文字と罫線の間隔を指定する
・テーブルの大きさを指定する(width)
・文字の位置揃えを指定する(text-align、vertical-alignプロパティ)
・テーブルの背景色を指定する(background-color、background-image
・罫線のデザインを指定する(border
・罫線をつなげて表示する(border-collapse)

・練習問題 カレンダーを作る


今日のメモ
・コンテンツを中央にそろえる場合は
 margin-left:auto;margin-right:autoを指定する。
ボックスモデル。widthにmarginやpaddingの値は含まれない。
 ただし古いブラウザでは含まれる場合がある。
・th、tdにはmarginは使わない
・tableタグにはpaddingは使わない
・罫線つなぐ場合は
 border-collapse:collapse
 つながない場合はsepalateを指定する

HTML/CSS基礎3日目(訓練30日目) [通学日記]

今日は午後は通院日だったので、午前だけ受けてきました。

今日やったのは
・ヘッダーバーを作成する
・見出しにマークをつける
・見出しに下線をつける(border-bottom)
・Webページに画像を表示する(imgタグ)

今日のメモ
・横幅、親要素の幅に合わせた長さになる
fontタグは、使わずCSSを使う
・画像のトリミング
 ●切り抜きツールを使う。サイズの指定ができる。
 ●長方形選択ツールで、スタイル固定で、サイズの指定をする
・imgタグのalt属性は必ずつける。どうしても画像の内容が無い場合は空文字("")を使う。
・画像はインライン要素
・インライン要素は、ブロック要素の中にあるということが必要なため
 p、divなどのブロック要素で囲むことが必要。

画像形式
・gif:画像の透過はできるが、半透明はできない。
・PNG:フルカラーだとJPEGに比べてサイズが大きくなる傾向。
    可逆圧縮ができる。半透明ができる。gifとjpeegのいいとこ取り。
    最近は使われだしてきた。


では、また明日!




アンテナショップ ストロベリーフィールズ
ストア ストロベリーフィールズ
爪水虫 妊婦
夏フェス テント 寝袋





HTML/CSS基礎2日目(訓練29日目) [通学日記]

今日は知らない内容も出てきて、
いかに授業が早いかを知らされました。
いや~。早い。結構大事な話も丁寧だけどボンボン進んでいきます。

今日やったのは、
・改行をコントロールする(brタグ)
・行の間隔を広くする(line-height)
・ページとページをリンクで結ぶ(aタグ)
・リスト形式でメニューを作る(ulタグ、liタグ)
・メール送信用のリンクを作る(mailto、エンコード)
・リンクの色を変える(aタグ colorプロパティ
・カーソルを重ねたときのリンクの色を指定する(hover、visted、focusactive擬似クラス)
・さまざまなセレクタの書き方
・メニューを横に並べて表示する(list-style-typedisplay
・リンク部分の下線を消す(text-decoration
・トップページに戻るリンクを用意する
コンテンツを罫線で囲む(divタグ borderプロパティ idセレクタ)
・背景に色をつける(background-color)
・メニューを作る(padding)


今日のメモ
・a擬似クラスには指定する順番がある。
それ以外ではうまくいかない。
a
a:link
a:visited
a:hover
a:focus
a:active
この順序。

ブロック要素にdisplay:inlineと指定するとインライン要素になる
・まとめて書くことをショートハンドという。
・ショートハンドの指定の際、上下左右の値を指定する場合の順序は
 上右下左 3つの場合 上 左右 下、2つの場合 上下 左右


また来週!

HTML/CSS基礎1日目(訓練28日目)

今日からHTML/CSSです。
僕は少しはわかるので、最初は復習がてらです。

いちおう今まで2サイトだけですが
テキストエディタと画像編集ソフトだけで
こんなサイトこんなページを作りました。

今日やったのは
・Webページの土台を作る
・Webページにタイトルをつける
・見出しを表示する(H1)
・文章を表示する(pタグ)
・コピーライトを表示する(addressタグ、フッター)
・文字の大きさを変える(CSS:font-size)
フォントの種類を変える(font-family)
・文字の色を変える(color)
・文字を強調する(strongタグ、emタグ)
・文字の斜体を解除する(font-style、font-weight、text-decoration)
・文章中心のコンテンツページを作る


今日のメモ
・文法的に間違っているとSEO上良くない
・em(単位):親要素の文字サイズに対する割合
・pxよりもemを使って、ユーザーに文字サイズを選ばせたほうがユーザビリティ的に良い
・ソースのインデントは、タブ文字よりも半角スペースのほうが良い
 (Dreamweaverに移行する場合、支障が出るため)
・RGB同じだけ光を当てればグレーになる
・Webセーフカラー 00,33,66,99,cc,ffだけの組み合わせ


では、また明日!



アンテナショップ ストロベリーフィールズ
ストア ストロベリーフィールズ
爪水虫 妊婦
夏フェス テント 寝袋


デザイン講話&著作権の話(訓練27日目) [通学日記]

今日はデザイン講話の話と著作権の話でした。
が、昨日お話したとおり通院のためデザイン講話は聞けず、
著作権の話も途中からでした。
大体知っている話でしたが、
ドメイン仲裁の話なんかも聞けてよかったです。

居残りではアンパンマントレースしました。
あと手を描けば完成です。


それから、残っていた仲間で、残っていない人は
みんなワイヤーフレームできているのかなぁと言っていました。

明日からはHTML/CSS基礎です。


ではまた明日。



アンテナショップ ストロベリーフィールズ
ストア ストロベリーフィールズ
爪水虫 妊婦
夏フェス テント 寝袋


Photoshop&Illustrator応用8日目(訓練26日目) [通学日記]

休日中は、IllustratorやInkscapeは触れずじまいでした。
ネットショップ通信講座のページコンテストがあり、
そちらに集中していました。

PhotoshopElementsは画像の切り出し、リサイズに限り使いました。

さて今日はワイヤーフレームの最終日。
先生に聞いてみたところ、
「スッカスカだね」と言われてしまいました。
ボタンはほめてもらいました。
スッカスカ・・・
確かに白をベースにシンプルなデザインでした。
その先生はDTP寄りなので、まぁそういう意見もあるよなと思い、
改善をしました。
今はデザインの勉強ですものね!

それと平行して今日は、キャリアデザインの面接がありました。
キャリア的にはストーリーがちゃんとできていて良いですねと言われました。
ただ、年齢があるので、工夫が必要ですねとも言われました。
確かに35歳、Webデザイナーなら30歳かな?
を超えると仕事が少ない様子。
プログラムも組めること、中小企業のほうが向いていることなどをアピールしようと思いました。
あとは病気ですね。
訓練が終わるまでに治れば良いねとも言われましたが
正直、それはムリです。

一度使っていただければ良さもわかると思うので、
インターンでどれだけアピールできるかがポイントなのかなとも思いました。

明日はデザイン講話と、著作権の話。
デザイン講話は通院のため聞けません。残念。


では、また明日!

Photoshop&Illustrator応用7日目(訓練25日目) [通学日記]

今日は1日ワイヤーフレーム作り。
終わったつもりでも、先生に言わせると終わってないところもあるそうで、
言われるとなるほど、と思うのですが、
言われないとなかなかわからないもの。

何が良くて何が悪いかがわからない。
どこがわからないのかがわからない状態になってきています。
わからないところがあれば質問のしようがあるのですが
なにがわからないかがわからないから、
質問のしようが無い。
やばい。やばい状態になってきてるぞ。

月曜日はお休みなので、
火曜日、とりあえずこれどうですか?と
漠然とした質問をしてみることからはじめよう。

今週末は今日このブログの負担も減っているので
Illustrator8とInkScape、PhotoshopElementsで練習してみようと思います。


では、また来週!




アンテナショップ ストロベリーフィールズ
ストア ストロベリーフィールズ
爪水虫 妊婦
夏フェス テント 寝袋

Photoshop&Illustrator応用6日目(訓練24日目) [通学日記]

今日はインターネットへの応用編でした。
デザインの気をつけるべきところを説明した後、
インターネットへの応用編を行いました。

気をつけること
○企画
1.サイトを作る目的を考える
2.ユーザーを想定する
3.サイトの規模作業量を検討する
4.予算・スケジュール
5.サーバの検討
6.作業者の検討

○デザイン編
1.全体のイメージを考える
2.ユーザー環境の想定
3.サイト構成
4.メニュー構成要素の決定
5.更新作業の考慮

○デザイン
1.目的を伝えるデザイン
2.バランスを考える
3.使いやすいインターフェイス
4.不明
5.文字の見やすさ
6.動きについて考える
7.制作上の配慮


○制作前
1.無駄な作業を発生させないために

○画像制作時
1.フォーマットの選択
2.周囲とのマッチング
3.画像素材の入手
4.駄目な素材の加工
5.文字の読みやすさ
6.画像制作のチェック事項
7.FLASH使用上の注意事項
8.バナー広告制作のチェック事項
9.権利関連

○制作全般
1.表記関連
2.英語版制作上の注意
3.一般的とされている事項


○制作後
1.公開時


その後は、ワイヤーフレームを作りました。
ワイヤーフレームとは、イラストレーターやフォトショップ
実際のページを作り、その後切り出してパーツにするものです。
火曜日までに作ればよいのですが7割方できました。

ではまた明日!



アンテナショップ ストロベリーフィールズ
ストア ストロベリーフィールズ
爪水虫 妊婦
夏フェス テント 寝袋

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。

×

この広告は1年以上新しい記事の更新がないブログに表示されております。