購入後、レスポンシブウェブデザインを作ってみました。
自分で更新できる最短ホームページテンプレート購入から数カ月間が経ちました。いろいろ試してみた結果、今のところスマホ用テンプレートがおススメ！です。
なぜおススメかというと、スマホ用テンプレートを使えばレスポンシブウェブデザインを簡単に作れるからです。
ここで、レスポンシブウェブデザインとは何かといいますと
デスクトップパソコンや携帯端末といった幅広いデバイスのいずれに対しても、自動的にレイアウトが変わるデザインのことをいいます。
下記をご覧下さい。
スマホ用テンプレートがレスポンシブウェブデザインです。（細かい調整は、各自でお願いします。）
・ホームページテンプレート
・スマホ用テンプレート
この様に、最短ホームページテンプレートで「table」、「style」を覚えた後に「css（=style）」「class」「float」「clear」「@media」を覚えれば、スマホ用テンプレートをレスポンシブウェブデザインに変えることが出来ます。
このホームページテンプレートは作成ソフトではなく教材ですのである程度自分で覚えなければなりませんが、ある程度HTMLについて覚えてしまえば以後は、自分の好きなデザインにすることが出来ます。そのことが良いか良くないかは人それぞれだと思います。 以下にレスポンシブウェブデザインにするための手順を記述しておきます。
レスポンシブウェブデザインにするための手順
（※ウェブで色々調べた結果、次の手順が良いと思いました。）
- まづ、はじめに、最短ホームページテンプレートの中にある.gifと.jpg画像をスマホ用テンプレートトの中にある.gifと.jpg画像に貼り換えて下さい。
また、スマホ用テンプレートのhtmlファイルはindex.html以外すべて削除して下さい。
- 次に、コンテンツ名（トップページ）の「テーブル」を削除する。
- メインコンテンツ（ここにメインコンテンツの情報を掲載します。）の「テーブル」をコピペで一つ作る。
- メインコンテンツにあるそれぞれの「table」タグの中の「width="100%"」を削除する。
- メインコンテンツにあるそれぞれの「table」タグの中の「align="center"」を削除する。
- メインコンテンツにあるはじめの「table」タグの中にclass="table-1"と入力する。次の「table」タグの中にclass="table-2"と入力する。
- 次に、スマホ用テンプレートフォルダー(sumaho1)の中にあるstyle.cssの空白部分に
.table-1{
width:50%;
float:left;
}
@media screen and ( max-width:479px){
.table-1{
width:100%;
}
}
.table-2{
width:50%;
}
@media screen and ( max-width:479px){
.table-2{
width:100%;
}
}
と入力します。
- 今度は、ページ全体の幅を調整したいと思います。
「ここがホームページの外枠です」というメモの下の「table」タグのなかにclass="table-3"と入力します。
- 次に、style.cssの空白部分に
.table-3{
width:770px;
}
@media screen and ( max-width:479px){
.table-3{
width:100%;
}
}
と入力します。
- 今度は、タイトルバーを変えてみましょう。
タイトルバーを最短ホームページテンプレートからコピーして貼り換えます。
ここまでで2カラムのページになっていると思います。ブラウザーの幅を広げたり狭くしてみて下さい。狭くするとレイアウトが変るはずです。
「width」の50%部分はお好みで変えて下さい。
黄色い部分は入力が面倒だったらコピーで貼り付けてください。
ここまででOKと思う方は、これ以上変えなくて良いと思います。
- どんどん行きましょう。次に、コンテンツバーとフッターも貼り換えて下さい。
- 最後に、最短ホームページテンプレートのメインコンテンツの中にある情報その1～4までのテーブルを2カラムの中に貼り付けて下さい。サイドバーも同じです。
>>トップページへ戻る
|