PM前回の授業で進めたCSS3を使ったWebサイトについて、ライブスケジュールのtableを仕上げてくるという宿題の確認からしていきました。td.areaというようにきちんと住所を指定する必要がある、ということを教わりました。tdで指定したborderの指示の方が強いため、classにかけたborderをなくす指示が反映されなくなるそうです。スタイルシートでは、きちんと住所を指定した方が確実に反映されるということが分かりました。次に、favicon(ファビコン)の作成について学びました。faviconとはウェブブラウザのブックマークリストやタブに表示される、サイト独自のアイコンのことです。Icon)として保存できます。して作成したfaviconをサーバーにアップロードし、各ページにfaviconへのリンクの記述をすると表示されるようになります。このfaviconは以前から色々なウェブサイトを閲覧する際に気になっていたので、作り方を教えていただけて良かったです。それから、スマートフォン用サイトの制作について学んでいきました。現在はスマートフォンに対応したWebサイトを作ることが必要不可欠になっていて、Webサイトの種類によってはスマートフォン向けのものだけを制作することもあるそうです。基本的な制作手順はPC用サイトと同じなのですが、スマートフォンならではの指定があって、例えば文字サイズをPCの倍以上の24px~28px以上にしたり、リンクやボタンのクリック領域を指で押しやすい大きさにしたり、また、縦でも横でも使用できるようにmetaタグで画面幅をコンテンツ幅として設定する必要があるということです。前回習ったCSS3も使いながら一通り制作し、QRコードが作成できるサイトで変換して自分のスマートフォンに表示させてみると、きちんとスマートフォンに合った幅になっていて縦でも横でも対応していました!スマートフォンに対応したWebサイトの作り方についても、ずっと知りたいと思っていたので今回学ぶことができて良かったです。Spritesにするという宿題の確認からしていきました。Sprites用に二段に作成する際、Photoshopでやったのですが、元がIllustratorの画像なのでIllustratorで作成した方がよいということ、またlinkのときとhoverのときで違いがはっきりと出るように画像を作成した方がよいとのことでした。前回の宿題もそうでしたが、Web制作には、コーディングの知識だけではなく、PhotoshopやIllustratorでの画像作成やコピーの仕方などの知識も大切なのだなと思いました。続いてCSSの応用的なテクニックを使った複雑なレイアウトについて学びました。margin-leftなどで間隔を取り、divなどの要素からはみ出したデザインにすることで迫力や躍動感のあるデザインを演出することができたり、ネガティブマージンといってmarginに0以下のマイナスの値を取ることができたり、また、文字の中の画像に回り込みをさせる場合にfloatのみを使うことなどを教えていただきました。CSSの次世代バージョンとして開発が進んでいるCSS3についても教えていただきました。Generatorというサイトで、より詳細なグラデーションの作成ができることなどを学びました。上記の事柄を踏まえながら以下のサイトを作成していきました。以前から気になっていたCSS3について知ることができて良かったです。ネット上のサイトで簡単にコーディングができるのはすごく便利だなと思いました。PMまず、宿題になっていたfloatとtext-indentを使ったWebサイト制作のチェックからやりました。今回は先生から事前にヒントをいただきましたので比較的スムーズに作成することができました。前回習ったtext-indentもきちんとできましたが、Photoshopから画像をコピーするときの方法について、マットを背景色にすると画像がよりきれいにコピーできることを教えていただきました。次にCSSを使いこなすための様々なテクニックを学びました。hover)は、主にリンクタグ(a)に使用するスタイルで、リンクの状態やマウスの挙動によって、クラスを新たに適用したかのようなスタイル指定ができます。「ブロックレベル要素」と「インライン要素」についても学びました。ulがこれに含まれます。strongがこれに含まれます。両者の違いは、ブロックレベル要素が「幅や高さをCSSで設定できる」のに対して、インライン要素は「幅や高さをCSSで設定できない」ということです。そこで、インライン要素を指定サイズにしたい場合は、display:blockと記述することで強制的にブロックレベル要素に変換してサイズ変更をします。Spritesというものを適用する方法を学びました。これを使うと、リンクボタンにカーソルを乗せたときに画像を変化させることができるようになります。Spritesを適用しました。Spritesは、今回学んだ疑似要素やdisplay:blockも使いますし、これまでに習ったfloatやtext-indentも使うテクニックです。AMまず、「floatを使ってWebサイトの作成をする」という宿題が出ていたので、そちらをチェックしてもらいました。今回の宿題は少し難しかったように思います。いうのも、まず全体をfloatしてから、今度はfloat:leftした塊の中でまたfloatするというレイアウトだったからです。それぞれの塊ごとにスタイルシートで指示を出す必要があるため、divで括りclassを適用するのですが、それがいくつも出来るので混乱してしまいました。同じ段落や見出しのタグでも、違うクラスに入っているとそれぞれ別の装飾になることが多いので、その場合は入っているクラスも含めて記述する必要があるということでした。全体の構造やタグの親子関係をよく考えながらコーディングをすることが大切なんだなと思いました。実際はもっと複雑なレイアウトが多いと思うので、きちんと体系立てて考えるようにしようと思います。それから、「文字を画像化した時のテクニック」について教えてもらいました。このテクニックを使うと、デザイン性のある画像化した文字を使いながら、テキストの文字情報も共存させることができ、SEO対策ができるようになります。それには、background-imageを使うことと、もう一つはtext-indentを使うことがポイントとなります。先生の説明を受けながら一つ目を作り、その後自分でもう一つ作って知識を定着させました。その後は、先生からSEO(検索サイト最適化)についての詳しい説明を受けました。検索サイトは検索結果の精度を向上させるため、日々システムをアップデートしているので、ある程度はその仕組みに合ったSEOの対策をとることが大切とのことでした。結局は、「コンテンツを充実させること、「タイトルや詳細、タグの親子関係など最低限のルールを守ること、そして「マメに情報を更新すること、といった基本的な事柄を徹底することで、日々のシステムのアップデートにも戸惑うことはなく、きちんとユーザーからのアクセス(=評価)をいただけるんだということがわかりました。宿題は、floatとtext-indentを使ったWebサイトの制作です。今回は先生から事前にヒントをいただきましたので、一人でも混乱せずに作れると思います。AM今日はまず、「テーブルを使って会社概要を作成する」という宿題のチェックからでした。2つ作ったのですが、両方とも先生から合格をもらえたのでテーブルの作成はマスターできたかなと思います。続いて、先週の続きのフォームの作成の送信ボタンを設置するところからやりました。送信ボタンを押して送信されるようにするには、<form>のActionに受け渡し先であるphpのファイルを指定します。実際に送信するところまでやりました。他にも、placeholderであらかじめ入力欄に指定の文字を入れておけることや、requiredにチェックを入れると入力必須になることも教えてもらいましたそして今日のメインはfloatについてです。floatを使うと、普段よく目にしているようなboxが横並びになったレイアウトを作ることができるようになるので、Webサイト作成の幅が一気に広がります。boxを作成し、それぞれの要素をfloat:leftもしくはfloat:rightで左右に寄せていきます。ここでポイントなのは、「一旦始めたfloatはどこかで必ず終わりを指示しなくてはいけないということです。clear:bothを指定してfloatを終わらせるようにします。しないとfloat中のものの高さが未確定の状態となってしまい、div#main(全体を囲うdiv)の高さが無かったことになってしまうのです。boxにfloatを使用するときには必ずwidthも指定しないと回り込むことができないことや、div#mainにwidthを設定することで、ブラウザを狭めてもboxが左下に落ちることがなくなるということも教わりました。それからfloatを使用したレイアウトのテンプレートを作成しました。今後はそれをコピーして使うことで、効率的にWebサイトの作成ができるようになるという優れものです。授業の最後には、実際にfloatを使ってboxを作成しました。AM今日は、宿題になっていた「ガス燈」のランチメニューのページの確認からしていきました。このページでもメニュー毎にdivを使ってboxに分けるのですが、何度かやるうちにだいぶ出来るようになってきました。cssの書き方もコツを掴めてきたように思います。タグを直接手打ちしてしまう癖があるのですが、出来るだけ右側の挿入タブや下段のプロパティを使って、タグやクラスを効率良くコーディングしていくようにしたいと思います。今日のメインはテーブルとフォームの作成についてでした。テーブルですが、こちらは以前勉強したことがあったので基本的なルールは知っていたのですが、やはりDreamweaverの機能を使うととても効率的に作成することができるんだなぁと感心しました。テーブルの場合もデザインはcssで整えていきます。セルの中の文字の上下の配置位置を指定する方法や、枠線を一本として表示する方法など、頻出する事柄についても教えていただきました。一つのフォームについてですが、こちらは初めてだったので知らないことばかりでしたが、先生のご指導に沿って入力フィールドを作っていくと、よく見るお問い合わせフォームが出来上がってきてとても感動的でした!教えてもらったことはどれも重要なことなのですが、特に印象に残ったのは、checkboxやradiobuttonで複数選択ができる設定と一つだけ選択する設定の違いについてや、listのリスト値を入れる方法についてです。AM今日もまずは宿題の確認からでした。divを活用して一からサイトを制作するのですが、結構難しくて苦戦しました。フォルダ名の書き方がルールと違うということ、それから見出しのタグのつけ方が違うこと、<p>でいいところも見出しにしていたこと、そしてdivの使い方が非効率的なこと、等々。授業で分かったつもりでも、いざ自分で一からやってみるとその通りにできなくてもっと勉強しなくてはと思いました。すごく分かりやすく教えてもらえたので次からは間違えないようにできると思います!それから、この前から作っている「ガス燈」のトップページの続きをやりました。今回の要点は、主に3つあります。1つ目は、「後に」の処理をするということです。タグナビゲーションを選んでから「→」を押して、タグの外に確実に抜けてから新しい要素を作るようにすることでミスを防ぐことができます。chromeの検証の機能を使うとWebのデザインやCSSを視覚的に確認することができ、Dreamweaverが自動的につけた要らないタグを確認し消去するときなどに便利ということです。3つ目は、div、p、見出しタグなどに一時的に背景や罫線を加えて、その要素のエリアを確認できるようにするという「見える化」をするということです。AM今日はまず宿題のチェックをしてもらい、違っている箇所の直しや、宿題をする中で出てきた疑問点についての質問をしました。細かなことや、前回習ったことを再度質問してしまっても、親切に教えていただけてありがたかったです。その後、divというhtmlタグについての説明を受け、実際にdivを使ってサイトの作成をしていきました。Illustratorでデザインされたサイトの見本を元にWebサイトにおこしていくという、実務さながらの作業を経験できたのが良かったです。autoの違いや、font-size、line-heightのよく使用する値について、また細かいことではwidthの読み方まで、実務で役立つことを色々と教えていただけました。spanというhtmlタグや、id、classの使い分けについても習いました。宿題は今日やったことと同じく、divを使ってIllustratorでデザインされたサイト見本のようにWebサイトを作るというものです。習ったことを活かして頑張りたいと思います。AM本日よりhtmlクラスのモニター受講をすることになりました大島です。これから簡単ではありますが、受講日記を綴っていきたいと思います。今日はまず、Dreamweaverでサイトを作る準備をすることから教わりました。これまでもDreamweaverで既存のサイトを更新したことはあったのですが、一からサイトを作った経験はなかったので初めて知ることばかりでした。サイトやサーバーの設定をしたら、早速サイトを作っていきました。Dreamweaverの便利な機能を活用して、効率的にhtmlのソースコードを作っていきます。ソースコードでサイトの大枠を作ったら、cssのスタイルシートで装飾をしていきます。先生のテンポの良いご指導のもと、あっという間にサイトが出来てしまいました。Dreamweaverを使うと、直接手打ちでコーディングをするよりずっと効率的にWebサイトを作成することが出来るんだなぁと実感しました。サイトを作っていく中でも、Photoshopでの画像の書き出し方や、よく使うショートカットキー、リンクを貼る際に新規ウィンドウで開くようにする方法など、実務にすぐに活かせる知識を教えていただけました。教わったことを活かして、宿題も頑張りたいと思います。(0)HTMLコーダー養成クラスhtmlクラス第2回受講しました。PM今週は先週の続きからです。授業中にレストランのサイトのトップページを完成させました。今回の課題はそのレストランのメニューページを作成してくることです。授業の後は簡単でしょ、と思っていたのですが、帰って取り組んでみると前と同様になかなか思うようにいきません。なんか自分にがっかりです。授業後の確認作業はとても大事ですね。最初は課題なんか面倒だわーと思っていましたが、これをすることでちゃんと身についてるのかが一目瞭然です。比較的楽しんで取り組めています。