tomori【初めてのホームページ制作】#09マネして作ってみよう!(手順解説付き)前回の【初めてのホームページ制作】#09マネして作ってみよう!(手順解説付き)は、コンテンツの左部分を作成しました。今回は、右部分を作成していきたいと思います。コピーライトを作成しようコンテンツを作成しよう右側コンテンツ部分も前回と同様に『div#content』ボックスに入れます。右側をニュースというコンテンツに位置付けて『div#news』ボックスを入れ子にします。それでは作っていきましょう。手順001右側のボックスを完成させよう■HTML#infoの終了タグで改行し、2~7行を追加してください。ゆるらぎは、ゆったりとしたお時間を過ごしていただけるよう、まごころ込めて、皆様をお待ちしております。/></p></div>右側部分は、p要素に文字とimg要素が入ってるだけですね。手順002まだ横幅を指定してないのでコンテンツ幅の半分を指定し、floatを使って右側部分に滑り込ませましょう。float:right;}あれっっ??すっぽり入ってくれるかと思ったけど右にスライドしただけですね。あそこに入るとテトリスぐらいの爽快感があったんですが・・・(笑)入らない原因は『div#info』ボックスにfloatを指定してないからなんですね。手順0023行目を追加してください。float:left;}すっぽり入りましたね。爽快ですね(笑)手順003『div#content』ボックスの中で2つの箱はfloatによる影響をモロに受けることになります。今回の例はfloatがイメージしやすいと思います。2つの箱を入れ替えたいとなると『div#info』に『float:right』を指定するだけで実現します。手順004簡単に入れ替えることができました。ACADEMYさんの記事が理解しやすいですので参考にどうぞ!次は、ページトップに戻るリンクを作りたいところなんですが、これは難易度が一気に上がるので場所だけ確保して一番最後にしたいと思います。div#newsの終了タグで改行し、以下のコードを記述しておいてくださいね。</div>cssも記述しておいてください。background-image:none;}フッターを作成しようフッターとは、ページの一番下の部分のことです。OFFICEのwordにもヘッダーとかフッターとかありますよね。フッターナビゲーションを作成しよう基本的にホームページには、フッターナビゲーションがついていることがほとんどです。これも簡単に作っていけそうですね。手順005『divf#contents』の終了タグで改行し、以下のコードを追加してください。none;}結構なCSSの量ですが説明しなくてもある程度わかってきていると思います。細かい説明は割愛しますね。手順007コピーライトを作成しようフッターの最後は、コピーライトの表示をしましょう。コンピュータプログラムなどの表現形式によって自らの思想・感情を創作的に表現した著作物を排他的に支配する財産的な権利である。著作権は特許権や商標権にならぶ知的財産権の一つとして位置づけられている。引用元:Wikipedia「著作権」コピーライトとは要するに『このホームページの著作権は、私のよ!!』という強いメッセージなのです。div#footMenuの終了タグの後ろで改行し、追加してください。1px;}letter-spacingで文字間隔を少し大きくします。letter-spacingプロパティは、文字の間隔をpxで指定します。文字の間隔にはマイナスの値を指定することもできます。手順008以上で、形としてはホームページは完成しました。次の第10回はトップページへ戻るリンクボタンをページトップへ戻るように設定していきたいと思います。次で最後なので最後までみてくださいね~【初めてのホームページ制作】#10マネして作ってみよう!(手順解説付き)ホームページ制作講座この記事が気に入ったらいいねしよう!最新記事をお届けします。管理人があまりに暇人なため、しょうもないwebアプリを作ったりしてます。コメントをキャンセルメールアドレスが公開されることはありません。*ウェブサイト上に表示された文字を入力してください。要素の親子関係】をわかりやすく説明するよ!CSS【position】の使い方をわかりやすく説明するよ!RECOMMENDこちらの記事も人気です。DBから取得した日付を表示する際に、1日マイナス表示される2019.03.12タイピングでジョジョがふわー2018.03.22WordPressブログの読み込みが重たいから改善してみた2018.03.17俺、社会不適合者なのかも知れない。OKINAWA-HACKこのブログは、ブログで稼いでなるべく組織に属さず、いわゆるフリーランスとして生きていきたいと常日ごろ思いながら、記事を書く管理人が運営しています。プログラミングが好きな管理人です。※ちなみにトップ画像の有刺鉄線は、組織の中から抜け出したい!という願望が表れています。