HTMLコーダー養成クラス

htmlクラス受講9回目

前回の授業で進めたCSS3を使ったWebサイトについて、ライブスケジュールのtableを仕上げてくるという宿題の確認からしていきました。

h2のタイトルが見本のようにずらせていなかったので上部と左側にネガティブマージンを付けること、tableは基本的には初めから100%で表示をして後からwidthをつけないこと、borderの指示はtableではなくtdにすること、そしてclassを作って左右のborderをなくす指示を出すときは、.box2 td.areaというようにきちんと住所を指定する必要がある、ということを教わりました。そうしないと、.box2 tdで指定したborderの指示の方が強いため、classにかけたborderをなくす指示が反映されなくなるそうです。やはりスタイルシートでは、きちんと住所を指定した方が確実に反映されるということが分かりました。

名称未設定-5a

次に、favicon(ファビコン)の作成について学びました。faviconとはウェブブラウザのブックマークリストやタブに表示される、サイト独自のアイコンのことです。16px×16pxの正方形の図柄を用意し、所定のサイトからICOのファイルをダウンロードしてPhotoshopのプラグインに入れると、保存時にファイル形式をICO(Windows Icon)として保存できます。こうして作成したfaviconをサーバーにアップロードし、各ページにfaviconへのリンクの記述をすると表示されるようになります。このfaviconは以前から色々なウェブサイトを閲覧する際に気になっていたので、作り方を教えていただけて良かったです。

それから、スマートフォン用サイトの制作について学んでいきました。

現在はスマートフォンに対応したWebサイトを作ることが必要不可欠になっていて、Webサイトの種類によってはスマートフォン向けのものだけを制作することもあるそうです。基本的な制作手順はPC用サイトと同じなのですが、スマートフォンならではの指定があって、例えば文字サイズをPCの倍以上の24px28px以上にしたり、リンクやボタンのクリック領域を指で押しやすい大きさにしたり、また、縦でも横でも使用できるようにmetaタグで画面幅をコンテンツ幅として設定する必要があるということです。

前回習ったCSS3も使いながら一通り制作し、QRコードが作成できるサイトで変換して自分のスマートフォンに表示させてみると、きちんとスマートフォンに合った幅になっていて縦でも横でも対応していました!

名称未設定-5b

スマートフォンに対応したWebサイトの作り方についても、ずっと知りたいと思っていたので今回学ぶことができて良かったです。

早いもので次回が最後の授業となりますが、出来るだけ先生から知識を吸収させていただけるよう頑張ります!

HTMLコーダー養成クラス

htmlクラス受講8回目

まず、以前作った「ガス燈」のトップページのnavigationCSS Spritesにするという宿題の確認からしていきました。

HTMLCSSのコーディングはきちんとできたのですが、画像をCSS Sprites用に二段に作成する際、Photoshopでやったのですが、元がIllustratorの画像なのでIllustratorで作成した方がよいということ、またlinkのときとhoverのときで違いがはっきりと出るように画像を作成した方がよいとのことでした。前回の宿題もそうでしたが、Web制作には、コーディングの知識だけではなく、PhotoshopIllustratorでの画像作成やコピーの仕方などの知識も大切なのだなと思いました。

名称未設定-4a

続いてCSSの応用的なテクニックを使った複雑なレイアウトについて学びました。

margin-leftなどで間隔を取り、divなどの要素からはみ出したデザインにすることで迫力や躍動感のあるデザインを演出することができたり、ネガティブマージンといってmargin0以下のマイナスの値を取ることができたり、また、文字の中の画像に回り込みをさせる場合にfloatのみを使うことなどを教えていただきました。

さらに、CSSの次世代バージョンとして開発が進んでいるCSS3についても教えていただきました。css3makerというサイトで、css3を使った「グラデーション」「変形」「ボックスに影」「文字に影」などが簡単に利用できたり、Border Radius Generatorというサイトで「角丸」が簡単に作成できたり、CSS Gradient Generatorというサイトで、より詳細なグラデーションの作成ができることなどを学びました。

そして、上記の事柄を踏まえながら以下のサイトを作成していきました。

名称未設定-4b

以前から気になっていたCSS3について知ることができて良かったです。ネット上のサイトで簡単にコーディングができるのはすごく便利だなと思いました。
これらのサイトを積極的に活用して、CSS3を取り入れていきたいと思います!

HTMLコーダー養成クラス

htmlクラス受講7回目

まず、宿題になっていたfloattext-indentを使ったWebサイト制作のチェックからやりました。今回は先生から事前にヒントをいただきましたので比較的スムーズに作成することができました。前回習ったtext-indentもきちんとできましたが、Photoshopから画像をコピーするときの方法について、マットを背景色にすると画像がよりきれいにコピーできることを教えていただきました。

名称未設定-3a

次にCSSを使いこなすための様々なテクニックを学びました。

疑似要素(link, visited, active, hover)は、主にリンクタグ(a)に使用するスタイルで、リンクの状態やマウスの挙動によって、クラスを新たに適用したかのようなスタイル指定ができます。

また、「ブロックレベル要素」と「インライン要素」についても学びました。前者は「固まり」を表し、h1h6, p, div, ulがこれに含まれます。後者は「行内の一部」を表し、a, img, span, em, strongがこれに含まれます。両者の違いは、ブロックレベル要素が「幅や高さをCSSで設定できる」のに対して、インライン要素は「幅や高さをCSSで設定できない」ということです。そこで、インライン要素を指定サイズにしたい場合は、display:blockと記述することで強制的にブロックレベル要素に変換してサイズ変更をします。

以上の事柄を踏まえて、navigationCSS Spritesというものを適用する方法を学びました。

これを使うと、リンクボタンにカーソルを乗せたときに画像を変化させることができるようになります。以下のような画像を設定し、手順に沿ってCSS Spritesを適用しました。

名称未設定-3b

このCSS Spritesは、今回学んだ疑似要素やdisplay:blockも使いますし、これまでに習ったfloattext-indentも使うテクニックです。表示位置の調整など設定するのにひと手間かかりますが、とても便利なテクニックだし、できたときの達成感も大きいので、これからどんどん活用していきたいなと思います!

HTMLコーダー養成クラス

htmlクラス受講6回目

まず、「floatを使ってWebサイトの作成をする」という宿題が出ていたので、そちらをチェックしてもらいました。今回の宿題は少し難しかったように思います。というのも、まず全体をfloatしてから、今度はfloat:leftした塊の中でまたfloatするというレイアウトだったからです。それぞれの塊ごとにスタイルシートで指示を出す必要があるため、divで括りclassを適用するのですが、それがいくつも出来るので混乱してしまいました。また同じ段落や見出しのタグでも、違うクラスに入っているとそれぞれ別の装飾になることが多いので、その場合は入っているクラスも含めて記述する必要があるということでした。やはり、全体の構造やタグの親子関係をよく考えながらコーディングをすることが大切なんだなと思いました。実際はもっと複雑なレイアウトが多いと思うので、きちんと体系立てて考えるようにしようと思います。

名称未設定-2a

それから、「文字を画像化した時のテクニック」について教えてもらいました。

このテクニックを使うと、デザイン性のある画像化した文字を使いながら、テキストの文字情報も共存させることができ、SEO対策ができるようになります。それには、background-imageを使うことと、もう一つはtext-indentを使うことがポイントとなります。まず先生の説明を受けながら一つ目を作り、その後自分でもう一つ作って知識を定着させました。

名称未設定-2b

その後は、先生からSEO(検索サイト最適化)についての詳しい説明を受けました。
検索サイトは検索結果の精度を向上させるため、日々システムをアップデートしているので、ある程度はその仕組みに合ったSEOの対策をとることが大切とのことでした。しかし結局は、「コンテンツを充実させること、「タイトルや詳細、タグの親子関係など最低限のルールを守ること、そして「マメに情報を更新すること、といった基本的な事柄を徹底することで、日々のシステムのアップデートにも戸惑うことはなく、きちんとユーザーからのアクセス(=評価)をいただけるんだということがわかりました。

宿題は、floatとtext-indentを使ったWebサイトの制作です。今回は先生から事前にヒントをいただきましたので、一人でも混乱せずに作れると思います。

HTMLコーダー養成クラス

htmlクラス受講5回目

今日はまず、「テーブルを使って会社概要を作成する」という宿題のチェックからでした。2つ作ったのですが、両方とも先生から合格をもらえたのでテーブルの作成はマスターできたかなと思います。

続いて、先週の続きのフォームの作成の送信ボタンを設置するところからやりました。送信ボタンを押して送信されるようにするには、<form>のActionに受け渡し先であるphpのファイルを指定します。実際に送信するところまでやりました。他にも、placeholderであらかじめ入力欄に指定の文字を入れておけることや、requiredにチェックを入れると入力必須になることも教えてもらいました

名称未設定-1a

そして今日のメインはfloatについてです。floatを使うと、普段よく目にしているようなboxが横並びになったレイアウトを作ることができるようになるので、Webサイト作成の幅が一気に広がります。

boxを作成し、それぞれの要素をfloat:leftもしくはfloat:rightで左右に寄せていきます。ここでポイントなのは、「一旦始めたfloatはどこかで必ず終わりを指示しなくてはいけないということです。clear:bothを指定してfloatを終わらせるようにします。そうしないとfloat中のものの高さが未確定の状態となってしまい、div#main(全体を囲うdiv)の高さが無かったことになってしまうのです。また、boxfloatを使用するときには必ずwidthも指定しないと回り込むことができないことや、div#mainwidthを設定することで、ブラウザを狭めてもboxが左下に落ちることがなくなるということも教わりました。

名称未設定-1b

それからfloatを使用したレイアウトのテンプレートを作成しました。今後はそれをコピーして使うことで、効率的にWebサイトの作成ができるようになるという優れものです。

名称未設定-1c

授業の最後には、実際にfloatを使ってboxを作成しました。習った通りにcssを組んでいくと、簡単にYahoo等でよく見かけるようなレイアウトができあがりました!

HTMLコーダー養成クラス

htmlクラス受講4回目

今日は、宿題になっていた「ガス燈」のランチメニューのページの確認からしていきました。
このページでもメニュー毎にdivを使ってboxに分けるのですが、何度かやるうちにだいぶ出来るようになってきました。cssの書き方もコツを掴めてきたように思います。
タグを直接手打ちしてしまう癖があるのですが、出来るだけ右側の挿入タブや下段のプロパティを使って、タグやクラスを効率良くコーディングしていくようにしたいと思います。

名称未設定-5a

そして今日のメインはテーブルとフォームの作成についてでした。

まずテーブルですが、こちらは以前勉強したことがあったので基本的なルールは知っていたのですが、やはりDreamweaverの機能を使うととても効率的に作成することができるんだなぁと感心しました。テーブルの場合もデザインはcssで整えていきます。
セルの中の文字の上下の配置位置を指定する方法や、枠線を一本として表示する方法など、頻出する事柄についても教えていただきました。

名称未設定-5b

そしてもう一つのフォームについてですが、こちらは初めてだったので知らないことばかりでしたが、先生のご指導に沿って入力フィールドを作っていくと、よく見るお問い合わせフォームが出来上がってきてとても感動的でした!

名称未設定-5c

教えてもらったことはどれも重要なことなのですが、特に印象に残ったのは、checkboxやradiobuttonで複数選択ができる設定と一つだけ選択する設定の違いについてや、listのリスト値を入れる方法についてです。
次回も引き続きフォームをやるそうなので、しっかりマスターしようと思います!

HTMLコーダー養成クラス

htmlクラス受講3回目

今日もまずは宿題の確認からでした。divを活用して一からサイトを制作するのですが、結構難しくて苦戦しました。そして沢山直しが入りました。。まずはフォルダ名の書き方がルールと違うということ、それから見出しのタグのつけ方が違うこと、<p>でいいところも見出しにしていたこと、そしてdivの使い方が非効率的なこと、等々。。。

授業で分かったつもりでも、いざ自分で一からやってみるとその通りにできなくてもっと勉強しなくてはと思いました。でもすごく分かりやすく教えてもらえたので次からは間違えないようにできると思います!

名称未設定-5a

それから、この前から作っている「ガス燈」のトップページの続きをやりました。

名称未設定-5b

今回の要点は、主に3つあります。
1つ目は、「後に」の処理をするということです。タグナビゲーションを選んでから「→」を押して、タグの外に確実に抜けてから新しい要素を作るようにすることでミスを防ぐことができます。
2つ目は、Google chromeの検証の機能を使うとWebのデザインやCSSを視覚的に確認することができ、Dreamweaverが自動的につけた要らないタグを確認し消去するときなどに便利ということです。
3つ目は、div、p、見出しタグなどに一時的に背景や罫線を加えて、その要素のエリアを確認できるようにするという「見える化」をするということです。

すぐにでも使えるコツばかりなので、早速宿題でも使っていきたいと思います!

HTMLコーダー養成クラス

htmlクラス受講2回目

今日はまず宿題のチェックをしてもらい、違っている箇所の直しや、宿題をする中で出てきた疑問点についての質問をしました。細かなことや、前回習ったことを再度質問してしまっても、親切に教えていただけてありがたかったです。

その後、divというhtmlタグについての説明を受け、実際にdivを使ってサイトの作成をしていきました。Illustratorでデザインされたサイトの見本を元にWebサイトにおこしていくという、実務さながらの作業を経験できたのが良かったです。

名称未設定-4a

divの使い方はもちろんのこと、text-align:centerとmargin:0 autoの違いや、font-size、line-heightのよく使用する値について、また細かいことではwidthの読み方まで、実務で役立つことを色々と教えていただけました。
また、spanというhtmlタグや、id、classの使い分けについても習いました。
宿題は今日やったことと同じく、divを使ってIllustratorでデザインされたサイト見本のようにWebサイトを作るというものです。習ったことを活かして頑張りたいと思います。

名称未設定-4c

HTMLコーダー養成クラス

htmlクラス受講1回目

本日よりhtmlクラスのモニター受講をすることになりました大島です。
これから簡単ではありますが、受講日記を綴っていきたいと思います。

今日はまず、Dreamweaverでサイトを作る準備をすることから教わりました。
これまでもDreamweaverで既存のサイトを更新したことはあったのですが、一からサイトを作った経験はなかったので初めて知ることばかりでした。
サイトやサーバーの設定をしたら、早速サイトを作っていきました。

Dreamweaverの便利な機能を活用して、効率的にhtmlのソースコードを作っていきます。

名称未設定-2

ソースコードでサイトの大枠を作ったら、cssのスタイルシートで装飾をしていきます。

名称未設定-3

 

先生のテンポの良いご指導のもと、あっという間にサイトが出来てしまいました。
Dreamweaverを使うと、直接手打ちでコーディングをするよりずっと効率的にWebサイトを作成することが出来るんだなぁと実感しました。
またサイトを作っていく中でも、Photoshopでの画像の書き出し方や、よく使うショートカットキー、リンクを貼る際に新規ウィンドウで開くようにする方法など、実務にすぐに活かせる知識を教えていただけました。
教わったことを活かして、宿題も頑張りたいと思います。

HTMLコーダー養成クラス

htmlクラス第2回受講しました。

今週は先週の続きからです。授業中に
レストランのサイトのトップページを完成
させました。

今回の課題はそのレストランのメニューページを
作成してくることです。正直授業の後は簡単でしょ、
と思っていたのですが、帰って取り組んでみると前と同様に
なかなか思うようにいきません。なんか自分にがっかりです。

やはり授業後の確認作業はとても大事ですね。最初は
課題なんか面倒だわーと思っていましたが、これをすることで
ちゃんと身についてるのかが一目瞭然です。

平日はなかなかまとまった時間が取れないため土日の
どちらかで終わらすようにしていますが、仕事中も
課題のデザインのことを考えてしまうこともあり、
比較的楽しんで取り組めています。
今回の課題もあまりよくできなかったので、また
授業でしっかり確認したいと思います!
大田