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サイトの作り方についても、ずっと知りたいと思っていたので今回学ぶことができて良かったです。

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

Comments are closed.