ページレイアウトテンプレートを元にカスタマイズを行い、オリジナルレイアウトが簡単に作れるページです。
文字・リンク・背景の色、メニューやメイン部分の幅・高さ等を簡単操作で指定できます。
レイアウトテンプレート
以下から、カスタマイズしたいレイアウトをクリックで選択して下さい。
なお、必ずjavascriptを有効にしてください。
2011年10月19日に、「コピペで出来る!簡単ホームページ作成入門」のリニューアルを実施しました。
以前はPHPプログラムと記事データ用テキストファイルを使ってサイトを構築・作成していたのですが、その後同じサーバで運用している姉妹サイトのプログラムを一から作り変え、ごっそり入れ替えてしまったので、それらのサイトと基礎部分で同じプログラムを使っていたコピペで出来る!簡単ホームページ作成入門の更新がかなりしづらい状況になっていました。
そんなわけで、簡単に更新の出来るWordPressへと記事データを移行しました。
これで、少しは更新がしやすくなるかなーと思います。が、更新できるかどうかはまた別の問題です。(主に気持ちと時間の)
WordPressへの移行に伴い、いくつかの記事の書き直しと撤去も行っています。
コピペで出来る!簡単ホームページ作成入門を公開したのは2006年だったので、その頃とはWebを取り巻く状況がかなり変わってしまっていましたし。まぁ、良い機会ということで。
今後の流れとしては、HTML5やCSS3、スマホ向けサイト等の需要が大きそうですが、追々その辺の記事が書ければいいなーと思っています。
本当はajaxやPHPの話も触れたい所ですが、そうなるともうコピペじゃすまない感じになりそうなので、サイトの趣旨が変わってきてしまいますしね。
それでは、今後とも当サイトをよろしくお願い致します。
灰色背景がサンプルソース薄緑背景が実際の見た目
ただし長文の文章の場合、限られた狭い範囲でこのように頻繁なスクロールが発生すると、読む気がなくなってしまうことも。
読み物中心の時は、あまり使わないほうが良いかも。
どうしても使いたい場合は、縦の擬似フレームの高さ(heightの値)を多めに取ってやることが重要です。
擬似フレームにしたい部分のみに適用させる為、divにclassを指定します。
ここでは、<div class=”gijif”>としています。
擬似的にフレームを作るには、overflow:scroll;というものを使います。
これは、width:500px;とheight:100px;で指定した幅(width)・高さ(height)を超えた時に、スクロールバーを表示するというものです。
灰色背景がサンプルソース薄緑背景が実際の見た目
HTMLでは特に何も記述する必要はありません。
ページ上下左右のスペースを消すには、bodyタグのmarginとpaddingの上下左右全てに0pxを指定します。
そうすることで、bodyタグの外・内の、最初にブラウザが勝手にあると解釈していたスペースが消えます。
灰色背景がサンプルソース薄緑背景が実際の見た目
特にHTMLの方に記述することはありません。
普通にh1タグを使って見出しを書けばOKです。
border-bottom:2px solid #ffaa00;
これは、h1タグ内の文字の下側に、太さ2pxで色コードが#ffaa00の直線を表示するという意味です。
border-bottomというのが、:より右の指定を見出し下側の枠線のみに適用するという意味。
2pxが太さ、solidが直線、#ffaa00が線の色を表しています。
なので、2pxの数字を変えれば線の太さも変わり、#ffaa00を別の色コードにすれば線の色が変わります。
例)
border-bottom:5px solid red;
見出しの下側に太さ5pxの赤い直線を表示