引用元:pixabay
みなさんこんにちは！
最近寒暖差がありすぎて体調崩してはいませんでしょうか？半袖だったり長袖だったり着るものが変わったりと色々大変ですよね。
季節外れの気温だったりで、かき氷が売れた。などビックリするような話題がでた今日でありました。
【１からの挑戦】シリーズとしてやっているホームページの勉強。
今私がホームページの勉強として使っているテキストで、セクションを進めてホームページを作っていく。ということを主にやっています。
その本がこちら！
さて今回は、その進行具合の発表です。 それでは今回もいってみましょう！
目次
今私ができること
【基本のHTML】
- 何も無い状態から、DOCTYPE宣言とHTML要素を使い、webブラウザーで表示をさせる。
- 見出しや改行、テキストを強調。
- 外部サイトへのリンク設定。
- 表や箇条書きをする。
- 画像をホームページ用に編集する。
- ロゴタイトルや文章に画像を入れる。
これらはなんとかできるようになりました。まだまだ不安要素がいっぱいありますが、ここまではテキストを見ながらであれば、ある程度は形になりそうです。
【基本のCSS】
- CSSファイルをつくりHTMLファイルにCSSを適用。
- フォントや文字色、背景色や背景画像を変更。
- 箇条書きの行頭文字を変更。
- 見出しに影を付ける。
- margin,border,padding,float などでレイアウトの調整。
まずここまではなんとかできるようになりました。
まだまだ基礎の部分でしかないのでここはしっかりと押さえていきたいと思っています。
そのテキストで作っているホームページの紹介
今現在作っている内容をちょっとだけお披露目です！
ざっくりとではありますが・・・こんな感じで進めています。
<画像１>
- 画像の編集などをしてロゴタイトルにしています。
- navを使い、float,padding,background-colorなどで、グローバルメニューバーを作っています。
画像の編集にはペイントで行っています。トリミングなどや拡張子の種類や特徴などもここのセッションで勉強しています。
それと見やすさでは非常に重要となるグローバルメニューバーの作り方や注意点をここで行っています。
<画像２>
- テキストにリンクを設定して別サイトへ飛ぶようにしてあります。
- 表を作って、右揃えや背景画像の設定などをして見やすく調整。
テキストにリンクを設定する方法や、新しいタブで開いたりするコードを主にここのセッションで行っています。
また、表の背景色やテキストの左・右・中央揃えなどの細かい設定もここでやっています。
<画像３>
- ol,ulを使って箇条書きにしています。
- list-style-type で行頭文字を設定。ここではsquareで四角にしてあります。
箇条書きの書き方、行頭文字の設定やタイプを実際にコーディングしながらやっています。
※これはテキストで練習しているレイアウトの為、実際にはホームページとして公開されていません。あくまでも私のレイアウトの紹介ですので実際には存在しませんのでご注意ください。
今後進めていくセクション
- ヘッダー・サイドバー・フッターなどの作成
- 新しいページを作ってリンクさせる。
- トップページの作成。
- 写真集のページを作る。
- リンク集や自己紹介ページをつくる。
- ソーシャルボタンの作成。
などを進めていく予定であります。そこまでちゃんと進めていけれるかどうか不安ではありますが(^◇^;)
特にヘッダーやサイドバー・フッターは特に重要な部分です。いわゆるホームページに必須な所でありこれもしっかりと抑えなければいけません。
トップページはコンテンツの中では一番重要な要素。そしてそれをベースに下層ページなどを作っていくとになるのでこれも抑えなければいけない。
むしろ疎かにしていい部分なんてないので真面目にやらないと覚えきれません。独学でくじけることもたまにありますが、途中で投げ出さないように頑張っていこうと思います！
それでは今日はこの辺で☆
