授業34回目 サイト制作実習 2018.05.26(sat)

webサイトの作り方
①cssの作り方

⑴画面サイズが〜599pxと600px〜の時で切り替える。
@media screen and (min-width:600px){ }を記述して、600px以上の時の画面表示を切り替える。



memo
①横幅をclass="wrap"に対して、max-width:1000px;とする。(1000pxまでは100%で表示される?)
margin: 0 autoで中央に揃える。

②key visualの載せ方
⑴background-image:url();で指定した画像を背景に載せる。
⑵background-repeat:no-repeat;でリピートしないようにする。
⑶background-size:cover;で画像を縮める。
⑷background-position;で画像のどこを基準点にするかを設定する。
⑸height;で高さを設定する。

ex.
#key{
background-image: url(../img/〇〇〇〇.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
height: 20rem;
}
f0397237_14373488.png


③文章の幅の設定(文章のバランス?)について(600px未満の時)

f0397237_15092856.png

f0397237_14551784.png




google fontsの使い方(Noto Sansを利用)
google fonts
⑴select this fontをクリックする。

f0397237_14471870.png



⑵Family selectedのStandardのコードをコピーする。

f0397237_14484221.png



⑶HTMLファイルの<head>部分にペーストする。

f0397237_14495903.png



⑷Specify in CSSのコードをコピーする。

f0397237_14522270.png


⑸CSSファイルにコピペする。

f0397237_14551784.png

[PR]
# by zooori | 2018-05-28 15:19 | サイト制作(実習編) | Comments(0)

授業33回目 サイト制作実習 2018.05.22(tue)

フォントについて
*画像素材に使うフォントは、フリーフォント(商用利用可なもの)を利用可能。
*テキスト(HTML)に使うフォントは、サーバーとの関係で注意が必要。(google fontsは利用可能)

webサイトの作り方
①HTMLファイル
今回のデザインは行で組んでいく。
⑴行の数だけ<div class="row">を作る。ここにidもつける。
⑵内側に<div class="wrap">を作る。(headerやfooterの時は、divではなくheaderやfooterタグにする)
⑶<body>にclass="home"をつけ、CSSが他のページに干渉しないようにする。(ワードプレスはclass="home"を使う。)

②reset.cssを作る
html5doctorを利用。
⑴nav ul { list-style : none; } → li { list-style:none; }
navを消して、ulをliにする。

⑵img {vertical-align : bottom; }を追加する。
imgにできる隙間を抑える。

⑶はじめのタグ(ほとんどのタグ?)に{box-sizing : border-box; }を追加する。

⑷HTMLファイルで読み込む
<head>に<link rel="stylesheet" href="common/css/reset.css">を記述する。


アイコンフォントの使い方
font awesomeを利用。
⑴Get Startedをクリックする。
⑵Web Fonts with CSSをクリックする。
⑶Use Font Awesome Free CDNにあるコードをコピーする。
⑷HTMLファイルの<head>タグにペーストする。

f0397237_12585247.png

⑸Iconフォントを検索する。
Iconsをクリックして、Freeにチェックを入れて、検索ワードを記述して検索する。

f0397237_13031270.png


⑹コードをコピーしてHTMLファイルに貼り付ける。

f0397237_13054075.png
ナビに使用するロゴをsvgファイルにする。

[PR]
# by zooori | 2018-05-27 13:07 | サイト制作(実習編) | Comments(0)

授業32回目 サイト制作実習 2018.05.15(tue)

サイト制作に関するメモ

⑴ナビメニューは画像ではなくテキストにしたほうが、SEO的に考えて良い。
 ex. 游ゴシックなど



[PR]
# by zooori | 2018-05-18 20:27 | サイト制作(実習編) | Comments(0)

授業31回目 JQuery・Java Script 2018.5.8(tue)

↑(トップへ)をクリックして自動スクロールさせる

f0397237_10181068.png


①HTMLファイルを記述する。(*今回は高さを出すためのサンプル文章を省略して記述)
f0397237_10280225.png

<body>にid="top"
最後の「トップへ」の<p>にid="to_top"
<a>のリンク先に<body>に指定したid="top"を指定する。



②CSSの記述
f0397237_10325970.png



⑴最後の<p>につけたid="to_top"のスタイルを指定する
f0397237_10422163.png


「トップへ」を幅100px・高さ100pxにして、中央揃えにする。
line-heightを高さと同じ100pxに指定する。
→height(高さ)とline-height(行間)を同じサイズにすると垂直方向に真ん中に配置することができる。(一行の場合のみ)
positionをfixedにして固定し、top/bottom/right/leftで位置を指定する。
今回は、bottom:20px、right:20pxで下の右側に固定する。




⑵最後の<p>につけたid="to_top"の中の<a>のスタイルを指定する。
f0397237_10500986.png


背景色を薄いオレンジに指定し、ブロック要素にする。
→ブロック要素にすると横幅ができるのでクリックする場所を伸ばすことができる。
下線も消す。
border-radiusで四角形を丸にする。
→border-radiusを50px以上に指定すると丸になる。
transitionで、マウスオーバーした時に変化する時間を0.5秒にする。




⑶最後の<p>につけたid="to_top"の中の<a>にマウスオーバーした時のスタイルを指定する。
f0397237_11104248.png



⑷JQueryでclass="on"をつけたり、消したりする。
→<p id="to_top">にonがついているときは、display:blockとなる。つまり「トップへ」を表示させる。
優先度を上げるために、#to_top.onと記述する。.onだけだと#to_topよりも優先度が低くなり、表示されない。?
f0397237_11133520.png


*JQueryの記述
スクロールされている値が300以上だったら、<p>にclass="on"をつけてください。=「トップへ」を表示する。
もし300より小さければ、class="on"を非表示にしてください。=「トップへ」を表示しない。

「トップへ」は最初は非表示にする(CSSで指定)。スクロールして値が300以上になった時に表示する。下にスクロールして300以上になり表示されて、また上に戻って300より小さくなった時に消える。

*htmlにclass="on"は記述しない。


f0397237_12052923.png


f0397237_12061295.png


f0397237_12073546.png



*アイコンにする場合
font-awesomeなどを使う。
<a>のfont-sizeを調整することで、アイコンの大きさを調整できる。




③JQueryの記述
f0397237_11150585.png



$(function(){
$("#to_top a").click(function(){//aタグをクリックすると
$("body,html").animate({"scrollTop":0},500)//$("body,html").するする()
return false;//id="top"に戻るという指示を消す <a href="#top">を消す。なぜaタグを使うかというと、指マークを表示させるためたが、CSSで変えることもできる。
});
→aタグをクリックすると、トップまで(*"scrollTop":0の地点まで)スクロールする。
 リンクを無効にする。

*animateについて
params→{ }
duration→終わるまでの時間。短いと早く終わる。1000→1秒 500→0.5秒
easing→加速度
callback→アニメーションが終わった後に処理を行うことができる。連続する時に使う。


//画面をスクロールしたら、#to_topに.onをつける →クラスをつけたり消したりしている 非表示・表示にしているのではない
$(window)/*スクロールしたら*/.scroll(function(){
var h =$(this)/*=$(window)*/.scrollTop();//$(window)がどれくらいスクロールされているかの値を取得する
console.log(h);/*どれくらいスクロールされたかを出力して調べる*/
→スクロールしたら($(window))、どれくらいスクロールされているかの値を取得する。?


//もしスクロールされている値が300以上だったら、addClass("on")してください=トップページへを表示する
if(h>300){
$("#to_top").addClass("on");//pタグにクラスのonをつけてください
}else {//もし300より小さければ、onを非表示にする *onがある時に消せと言われたら消す。ない時は関係ない。一旦スクロールして表示されて、また上に戻った時に消える。
$("#to_top").removeClass("on");
}
});
   });//////////////
→スクロールされている値が300以上だったら、<p>にclass="on"をつけてください。=「トップページへ」を表示する。
 もし300より小さければ、class="on"を非表示にしてください。=「トップページへ」を表示しない。


[PR]
# by zooori | 2018-05-18 12:14 | 授業まとめ(JQuery編) | Comments(0)

授業30回目 JQuery・Java Script 2018.5.05(sat)

タブパネルの切り替え方法
  <ブラウザ表示> *①〜③共通

f0397237_11112021.png

<htmlファイル> *①〜③共通
f0397237_11145271.png

4つの方法を整理

①クリックするもの(該当のもの)以外を非表示にする。(main.js)
f0397237_11205579.png


②最初に全て非表示にする。*書き方の順番が重要 (main2.js)
f0397237_11405438.png

③関数とif文を使用する。(main3.js)
f0397237_11564685.png

④属性を取得する。(main4.js)
*タブパネルに川を追加する。
*htmlファイルに川を追加する。写真も追加する。


<ブラウザ表示>
f0397237_12021383.png
<htmlファイル>
f0397237_12001791.png
f0397237_12114912.png

その他
*$( )→( )の中はセレクタ。

*thisはクリックされた<a>タグ。→イベントの発生させた<a>タグを取得できる。
.click( function(){})がthisになる。(=クリックしたもの)

*JavaScriptにデータを渡すための属性
data-〇〇〇〇(好きなキーワードを入れることができる)
メモ的な使い方をする。

*data属性用のもの(attrではない書き方)
.data(" ");
" "の中に-(ハイフン)以降のキーワードを記述する。


[PR]
# by zooori | 2018-05-08 12:24 | 授業まとめ(JQuery編) | Comments(0)

2017.11.27~webの学校の授業で学んだことをまとめています。


by zooori
プロフィールを見る
画像一覧