webサイト制作の勉強|2019年3月クラス用ブログ

ファリカテクニカルアカデミーのwebサイト制作科の授業解説ブログです。

2019-05-30から1日間の記事一覧

スプリットレイアウト

<html lang="ja"> <head> <meta charset="utf-8"> <title>スプリットレイアウト</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/style.css"> <script src="js/jquery-2.2.4.min.js"></script> <script> $(function(){ //#to-top>aをクリックしたら $('#to-top>a').on('click…</link></meta></meta></head></html>

Flexboxの使い方

Flexbox(Flexible Box Layout Module)はCSS3の新しいレイアウトモジュールで、複雑なレイアウトを今までより少ないコードでフレキシブルなボックスを組むことが出来ます。以前からあった技術ですが、各ブラウザーによって書き方が違ったり、仕様が変わった…

スクロールしたら、ナビゲーションを固定する

スクロールイベント 今まで授業では、要素が読み込まれたら動くという「$function」とクリックしたら動くという「on.click」イベントの2つを主にやってきましたが、今回はそれに加えてウィンドウをスクロールしたら動く、「スクロールイベント」をやってみま…

スムーススクロール

scrollイベント 要素がスクロールした時のイベントとして関数を指定できます。 scrollTopイベント 「scrollTop()」を使用した場合、要素の最上部から縦スクロールした現在位置の上部までのピクセル数を取得します。 { scrollTop: 0 }であればtopから0ピクセ…