見出し画像

jQuery & レシポンシブ & Portfolio1・・

if文の基本的な書き方
script.js
if(/*条件*/){
//条件を満たす場合の処理
}else{
//条件を満たさない場合の処理
}

レシポンシブに関して・・
ー  横スクロールは、width指定をしている要素が画面幅からはみ出ることによって発生します。レスポンシブサイトを作るときにはmax-width(widthではなく)を指定しておく。

ー レスポンシブ化作業でよく起こるトラブル
「要素の幅を狭めたいけど、見えない要素が邪魔をしてる」
「画面幅に要素が収まらない。何がはみ出してるの分からない」
 e.g.
 要素に「width:500px;」と指定されていると、その要素は画面幅375pxのスマホをはみ出してしまいます。
*{
outline: 2px solid red;
}

*は、「全ての要素」を表すセレクタ。
outlineは、「要素に輪郭線(外枠)を付ける」プロパティです。
「全ての要素に輪郭線をつける」ことで、要素がどれだけの幅を持っているかすぐわかる。

ー max-width: 100%;を指定しておくと、imgは常に縦横比を保ち、画面幅に合わせて伸縮するようになる。幅を指定したいときはdivタグなどで囲んで、divタグで幅を指定する。
ー vertical-alignはテキストや画像などの水平方向の揃え位置を指定するためのプロパティ。img要素の初期値はvertical-align: baseline;になっていますが、baselineのままにしていると下の要素と微妙な隙間が生じる場合があるため、bottomなどの値を指定する。


ポートフォリオとは何か・・
ポートフォリオとは一言でいうと「作品集」!

Webポートフォリオ作成範囲は、主に以下の3通り。
 デザインからコーディングまでやる
 studioのようなコーディング自動化ツールを使用する
 Webポートフォリオ作成サービスを利用する

ターゲットユーザーは企業の採用担当者やクライアント企業の担当者。
ユーザー目線でデザインする」ことをポートフォリオ制作においても意識。

良いポートフォリオの例 
 自身の人間性についてアピールできている
 制作物の制作プロセスやデザインの根拠を明示できている
 シンプルなデザインで無駄な装飾がない

今後のためのReference・・
flex-rr、flex-rc class設定 (return raw, return column)
flex-rc:PCで横並び、かつ、SPで縦並びになる
flex-rr:PCでもSPでも横並びになる

li 要素にcurrent class設定
現在見ているページを示すclass
(疑似要素でオレンジ色のサークルを作り、現在ユーザーが閲覧しているページを明示する)つづく...



この記事が気に入ったらサポートをしてみませんか?