CSSガイド EX

▼基本的なCSS、要素等について紹介しています。


【障害者の就職!】

 

コンテンツメニュー

 ◆Chapter 1

 ◆Chapter 2

 ◆Template

 ◆Tip!

 

★サイト運営者がPHPを学んだ
お勧めの書籍です!
これ一冊で基本的なPHPの仕組み、簡単なプログラムの作成、SQLiteを使ったデータベースなどかなり学べる要素が詰まっています!

↓↓↓ ↓↓↓

PHPレッスンブック―PHP5対応

新品価格
¥2,520から
(2013/2/24 04:38時点)

 

PHPが動作するサーバー

 

はじめてのHP | 無料素材 | タグ辞典 | ツールEX | PHPを学ぼう!

 

◆Template - 基本テンプレート - 縦段組み

ホームページを縦段組みで制作する場合は以下のデザインが基本になります。
他のサイトを意識してみると、サイドとメインの横幅が違っていても大抵の場合は、これが基本になっているのに気がつくでしょう。

縦段組み

 

縦段組みにするとサイドにメニューや広告を載せやすいという利点があります。
ご自身が作りたいデザインを意識して制作してみてください。

 

CSS(Cascading Style Sheet)の機能がまだ充実していなかった時代は、テーブルタグを利用して縦段組みを作ったりしました。
その頃はCSSでデザインすると使用するブラスザにより表示が異なることも多々あり、テーブルタグの方が望ましいということもあったのですが、最近ではそれは改善されているようです。

 

CSSは慣れると使いやすい便利な機能です。
見出しやヘッダー、フッターなどをCSS定義をしていたら、そのCSSだけを変更すればページデザインを一新させることもできます。
ホームページは、見出しをしっかりと定義することが肝心でSEO対策にもなるのです。

 

縦段組みとなる基本テンプレートを用意しました。
これからCSSによる制作を考えているなら一度、試してみませんか?

 

ダウンロードの表示サンプルを確認できます。
 ・左サイドのテンプレート
 ・右サイドのテンプレート
 ・両サイドのテンプレート

 

このテンプレートの簡単な説明をします。
まずテンプレートをダウンロードしてください。

 

使用したいテンプレートをまず選び、そのテンプレートの"fream.css"をテキストエディッタで開きます。
テンプレートファイルは文字コードが"utf-8"となっていますので必要に応じて文字コードを変更ください。
テキストエディッタで別名保存で保存する際に文字コードの変更ができます。(文字コード対応エディッタの場合)

 

縦組みの定義は、"fream.css"で行っています。
ページ幅の変更は、div.headerとdiv.main、div.footerのwidthを修正します。
ここで設定した幅がページ全体を表示する幅となるのです。
800pxの幅にしたい時には、div.headerとdiv.main、div.footerのwidthは、800pxに統一してください。
テンプレートでは、段組みの違いを認識するため背景色を替えていますが統一するようにします。

 

次にサイドの幅とメインの幅を上記のサイズに合わせて調整します。
800pxの例で右サイドを200pxとした時にはメインを600pxに調整し、その合計が800pxとなるようにします。
これでCSSによる段組みが利用できます。

 

このテンプレートには、背景画像を入れています。
これは背景画像を使うことでデザインの幅が広がる事を知ってもらいたい為です。

 

テンプレートに使用している画像を背景にCSSで文字の表示位置を調整することでデザインの幅が広がりるのがわかります。
div.headerのheightやmarginの数値を変更し表示確認をしてみるとよいでしょう。
marginの数値は、以下のように対応しています。

margin: 上 右 下 左;

に対応しています。

 

ダウンロード

 


 

忍者AdMax

 

ex-mode.net | ツールEX | 素材EX | アフィモール | 初級者向 初めてのホームページ作り | Htmlタグ辞典 | 初めてのプランター菜園 | リンク・ボード
気のみ気のままなブログ | PHPを学ぼう! | ホビ★コレ | 班長日記!

▲UP

Copyright (C) ex-mode.net 2017. All Rights Reserved.