パソコンスクールLaLaメイツ ポートフォリオ

このサイトについて

構想

いくつかのサイトを作成することを前提とする、ポートフォリオサイトの作成、
および使用した要素等をまとめ、使用コードのリファレンスなどとして利用するのが最終目標となります。

目標と努力点

  • バーガーメニューを作成
  • ワイヤーフレームをサイト内で説明
  • モバイルレイアウト→PCレイアウトでのcss作成
  • トップページをシンプルに構成
  • フォルダの階層をそれっぽくデザイン

反省

  • 最初にPCデザインから初めてしまったため一度cssを書き直す必要が出た
  • ポートフォリオサイトに時間がかかりすぎて他サイトの充実が図れなかった

サイトのワイヤーフレーム

各ページに移動しやすいようにナビゲーションを固定
PC版でハンバーガーリストを解除

モバイル

header
nav(固定)
サイト名
contents
ページ別
footer
copyrignt

PC

header(固定)
サイト名
nav
contents
ページ別
footer
copyrignt

フォルダ階層

単純化のためhtmlはすべて直下に css、imgフォルダを設置

  • yoshida/
    • css/
      • normalize.css
      • common.css
    • img/
      • top_img.jpg
    • index.html
    • about.html
    • contents.html
    • profile.html
    • contact.thml

リファレンス

使用した要素等の簡単な説明

htmlタグ

div class=wrapperラッパー
背景などにを追加で設定するための全体要素
div要素にclassを付けたもの
header
ほぼすべてのページに固定で最初に表示する要素
main
メインコンテンツを記述する要素
footer
ほぼすべてのページに固定で最後に表示する要素
nav
ナビゲーション(メニュー)要素
h1
見出し1(サイトタイトル)
h2~h4
見出し2～4(本文見出し)
p
すべての本文
a
リンク要素
ul/li
リスト要素
dl/dt/dd
リスト要素
input id=〇〇/label for=〇〇
チェックボックス要素(バーガーメニューに使用)
ruby/rt
ルビタグ文字にルビを付ける(rtがルビ内容)

css基礎知識

要素{プロパティ:値;}
要素:htmlで反映させたい場所のこと
プロパティ:何を変更するか
値:どのように変更するか

初期設定

最初に書いておくと楽になる

html{font-size:62.5%;}
1rem=10pxの初期設定
body{font-size:1.6rem;}
本文文字サイズを16pxに指定
img{width:100%; height:auto;}
画像サイズを親要素に合わせて自動で調整

よく使うプロパティと値

より詳細を知りたい場合は検索してみてね。

{display:flex;}
要素を並列にしたりいろいろする素敵要素。使えないと過労死する
{flex-wrapフレックス ラップ:wrap;}
flexに対して幅指定をする。これによりサイズ過多で改行するようになる
{justify-contentジャスティファイ コンテンツ : space-betweenスペース ビトウィーン;}
flex要素の間を等間隔に分割する。
space-betweenだと左右端はくっつける。
値は他にもいろいろある
{width:〇〇;}
横幅を設定する
{height:〇〇;}
縦幅を設定する
{margin:〇〇;}
外余白を指定する(marginは要素の背景色を含まない)
{padding:〇〇;}
内余白を指定する(paddingは要素の背景色を含む)
{border:〇〇;}
要素に枠線を追加する
{color:#〇〇;}
文字色の変更
{background-color:#〇〇;}
背景色の変更
{background-image:url(img/〇〇.〇〇);}
背景画像の変更
{background-size: coverカバー;}
背景画像サイズの調整(corverの場合画面いっぱいで調整)
{background-repeat:〇〇;}
背景画像の繰り返しを設定
繰り返し:repeat(初期値)
横に繰り返し:repeat-x
縦に繰り返し:repeat-y
繰り返しなし:no-repeat
{background-position:〇〇 〇〇;}
背景画像の開始位置を指定
左右指定:left,right,center
上下指定:top,bottom,center
{positionポジション:〇〇;}
要素の位置を指定
ブラウザからの絶対値:fixed bodyまたはrelativeがある親要素からの相対値:absolute
要素の枠情報を初期位置に保持したまま相対的に移動:relative

数字の値

数字の記入方法とそれぞれの意味

px
1ドット単位で大きさを指定する。
%
要素のサイズから倍率で大きさを指定する
rem
htmlタグに指定されたフォントサイズから倍率で大きさを指定する
em
要素に指定されたフォントサイズから倍率で大きさを指定する
vw
view widthビュー ウィズの略称。ブラウザのサイズから倍率で大きさを指定する。
vh
view heightビュー ハイト(ヘイト)の略称。ブラウザのサイズから倍率で大きさを指定する。