教室/スクール

-Category-
ワンズパソコンスクール/ホームページCSS練習01
Feb
22
2023

ホームページコースのサンプルレイアウトをご紹介します。

ワンズパソコンスクールのホームページコースのテキストのご紹介

ワンズパソコンスクールでは、ホームページ制作をわかりやすくするために、オリジナルのテキストで授業をしています。

サンプルを制作していきながら理解していきます。その1つのレイアウトが以下の画像です。

 

ワンズパソコンスクール/ホームページCSS練習01

 

ホームページ制作のキモはCSS。レイアウト通りに表現するには、DIVをどのように配置していくか、何個作れば良いかなどが理解できるかが重要です。
いくつかのサンプルを作ってみれば、なんとなくイメージがわきやすいものです。
必ずしも難しいCSSや動的な表現をしなくても、基本ができていれば大丈夫。まずは構築方法を学びましょう!

これらのサンプルをわかりやすく作って頂くために、寸法通りのCSSを指定すれば、制作していけるように基本の寸法を記載しています。

 

ワンズパソコンスクール/ホームページCSS練習02

 

幅や高さが解っても、細かなDIVの数や配置の方法がわかりずらいと思います。
そこで、DIVの数や配置のイメージが湧きやすいように、枠のみの表示サンプルを用意しています。

 

ワンズパソコンスクール/ホームページCSS練習03

 

DIVのクラス名を、どのように指定すればよいかも分かりずらいですよね。
適当に名前を付けてしまうと、知らずのうちに同じ名前を複数付けてしまう事もしばしば。同じクラス名を付けてしまうと、思いもよらないアクシデントに見舞われます。
まずは慣れるためにクラス名のサンプルも用意しています。まずは真似してみてください。

 

ワンズパソコンスクール/ホームページCSS練習04

 

これで同じクラス名を活用する場合の名前の付け方や利用の仕方も、理解するヒントになるかと思います。
このようなサンプルは複数用意していますので、制作しているうちにコツがわかるようになります。

企業のホームページも制作している経験を活かしたオリジナルテキスト/サンプルで、基本を理解する手助けができればと思います!

1時間講習でお悩み解決
学生対応、まんでコース
2024-0308
2023-1101
2024-030802
gra_bnr
web_bnr
previous arrow
next arrow

パソコン教室の更新情報青い建物が目印!