Monthly Archives: 6月 2016

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のリスト値を入れる方法についてです。
次回も引き続きフォームをやるそうなので、しっかりマスターしようと思います!