Monthly Archives: 7月 2016

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を取り入れていきたいと思います!