管理人

10月 232011
 

ページレイアウトテンプレートを元にカスタマイズを行い、オリジナルレイアウトが簡単に作れるページです。
文字・リンク・背景の色、メニューやメイン部分の幅・高さ等を簡単操作で指定できます。

レイアウトテンプレート

以下から、カスタマイズしたいレイアウトをクリックで選択して下さい。
なお、必ずjavascriptを有効にしてください。

単一ページレイアウト 2列レイアウト[メニューとメイン部分を左右に分けたい場合] 2行レイアウト[メニューとメイン部分を上下に分けたい場合] 逆L字レイアウト[実用性の高いレイアウト]
3列レイアウト[右にも情報を表示したい場合に適している] 3行レイアウト[上下にナビや著作権表示をし、中央にコンテンツを見せたい場合] 2行3列レイアウト[ブログや情報が多いページ向け] 3行2列レイアウト[メイン部の幅は取りたいけど、整理して見せたい場合向け]
10月 192011
 

2011年10月19日に、「コピペで出来る!簡単ホームページ作成入門」のリニューアルを実施しました。

以前はPHPプログラムと記事データ用テキストファイルを使ってサイトを構築・作成していたのですが、その後同じサーバで運用している姉妹サイトのプログラムを一から作り変え、ごっそり入れ替えてしまったので、それらのサイトと基礎部分で同じプログラムを使っていたコピペで出来る!簡単ホームページ作成入門の更新がかなりしづらい状況になっていました。

そんなわけで、簡単に更新の出来るWordPressへと記事データを移行しました。
これで、少しは更新がしやすくなるかなーと思います。が、更新できるかどうかはまた別の問題です。(主に気持ちと時間の)

WordPressへの移行に伴い、いくつかの記事の書き直しと撤去も行っています。
コピペで出来る!簡単ホームページ作成入門を公開したのは2006年だったので、その頃とはWebを取り巻く状況がかなり変わってしまっていましたし。まぁ、良い機会ということで。

今後の流れとしては、HTML5やCSS3、スマホ向けサイト等の需要が大きそうですが、追々その辺の記事が書ければいいなーと思っています。
本当はajaxやPHPの話も触れたい所ですが、そうなるともうコピペじゃすまない感じになりそうなので、サイトの趣旨が変わってきてしまいますしね。

それでは、今後とも当サイトをよろしくお願い致します。

10月 142011
 

灰色背景がサンプルソース薄緑背景が実際の見た目

サンプルソース

HTMLソース

<div class=”gijif”>
限られたエリアにたくさんの情報を書きたい時に使うと便利。<br/>
更新履歴とかがよいかな?<br/><br/>
ただし長文の文章の場合、限られた狭い範囲でこのように頻繁なスクロールが発生すると、読む気がなくなってしまうことも。
読み物中心の時は、あまり使わないほうが良いかも。<br/>
どうしても使いたい場合は、縦の擬似フレームの高さ(heightの値)を多めに取ってやることが重要です。
</div>

CSSソース

.gijif {
width:500px; height:100px; overflow:scroll;
}

サンプル表示

限られたエリアにたくさんの情報を書きたい時に使うと便利。
更新履歴とかがよいかな?

ただし長文の文章の場合、限られた狭い範囲でこのように頻繁なスクロールが発生すると、読む気がなくなってしまうことも。
読み物中心の時は、あまり使わないほうが良いかも。
どうしても使いたい場合は、縦の擬似フレームの高さ(heightの値)を多めに取ってやることが重要です。

解説

HTMLソース

擬似フレームにしたい部分のみに適用させる為、divにclassを指定します。
ここでは、<div class=”gijif”>としています。

CSSソース

擬似的にフレームを作るには、overflow:scroll;というものを使います。
これは、width:500px;とheight:100px;で指定した幅(width)・高さ(height)を超えた時に、スクロールバーを表示するというものです。

10月 142011
 

灰色背景がサンプルソース薄緑背景が実際の見た目

サンプルソース

HTMLソース

<body>
CSSで何も指定しないと、ブラウザのページを表示する部分の上下左右にスペースが出来てしまいます。
</body>

CSSソース

body {
margin:0px; padding:0px;
}

サンプル表示

※ブラウザを含むページ全体をこのサンプル表示エリア内に表示しても仕方がないので、このサンプルソースに対するサンプル表示はありません。

解説

HTMLソース

HTMLでは特に何も記述する必要はありません。

CSSソース

ページ上下左右のスペースを消すには、bodyタグのmarginとpaddingの上下左右全てに0pxを指定します。
そうすることで、bodyタグの外・内の、最初にブラウザが勝手にあると解釈していたスペースが消えます。

10月 142011
 

灰色背景がサンプルソース薄緑背景が実際の見た目

サンプルソース

HTMLソース

<h1>見出し</h1>

CSSソース

h1 {
border-bottom:2px solid #ffaa00;
}

サンプル表示

見出し

解説

HTMLソース

特にHTMLの方に記述することはありません。
普通にh1タグを使って見出しを書けばOKです。

CSSソース

border-bottom:2px solid #ffaa00;
これは、h1タグ内の文字の下側に、太さ2pxで色コードが#ffaa00の直線を表示するという意味です。
border-bottomというのが、:より右の指定を見出し下側の枠線のみに適用するという意味。
2pxが太さ、solidが直線、#ffaa00が線の色を表しています。
なので、2pxの数字を変えれば線の太さも変わり、#ffaa00を別の色コードにすれば線の色が変わります。

例)
border-bottom:5px solid red;
見出しの下側に太さ5pxの赤い直線を表示

[参考]CSSリファレンス ボーダー・枠線