バナーボタンとホバー時の画像の拡大
バナーボタン
- 角が丸い
- マウスオーバー時に色が変わる
- アイコンに画像を追加
ボタンを角丸にする
border-radius:○○px;
border-radius - CSS: カスケーディングスタイルシート | MDN
画像アイコンの挿入
after・before要素を使用して、前後にアイコン等を挿入する
urlを指定するとディレクトリやurlに埋め込んだ画像を直接呼び出すこともできる
content - CSS: カスケーディングスタイルシート | MD
マウスオーバー時にエフェクトをするときは
hoverを使用して、指定を行う。
:hover - CSS: カスケーディングスタイルシート | MDN
マウスオーバーすると、画像の拡大
- マウスオーバー時に画像が拡大される
- 画像の枠からは画像をはみ出さない
scale()とoverflow:hiddenを使用する
JavaScript:対数の求め方とその判定
対数とは。。。。
べき乗の何乗されているかをもとめる数字です。
4は2の2乗ですが、言い換えると、２を底とし、塁指数2の累乗を求めるとなります。
つまり２を底とした対数を求めると何乗かが求めることができるのです。
判定方法
対数が整数であればその数値の何乗の数値かがわかります。
Webサイトの作成：CSS画像に影を付けたい！
CSSで画像の下に影を付けたいときは。。。。
boxshadowを使用する！
boxshadow: offset-x | offset-y | blur-radius | spread-radius | color ;
で指定します。
それぞれの項目は
offset-x：横の長さoffset-y ：縦の長さblur-radius ：ぼかしの薄さspread-radius ：ぼかしの長さcolor ：色
となる。
具体的には
box-shadow: 0px 0px 16px -6px rgba(0,0,0,0.6);
のように記述する。
参考ドキュメント
box-shadow - CSS: カスケーディングスタイルシート | MDN
デバックの方法
JavaScriptのデバック方法
- デベロッパーモードでエラーがないか確認
- console.log();を記述
- 再度読み込み
- ログを確認
Webサイトの作成:ページ上の画像をクリックしてTopにジャンプ！
ページ上の画像をクリックしてTopにジャンプするのは以下のようなレイアウトがある。
参考Webサイト：アジア開発キャピタル株式会社
この「いいね！」のような画像をクリックすると、サイトのトップページにジャンプする。
使用する技術
- 画像をWebサイトの上に表示
- スムーススクロール機能でTOPにジャンプ
Webサイトの作成：設計段階
- 画面の絵を手書き・ソフトウェアで描写する
- ワイヤーフレームを書く
- タスクを洗い出す←ここについて解説します！
- 実装を行う
タスクの洗い出しというのは設計段階において時間はかかりますが、実装途中の道しるべとして役立ちます。
Webサイト作成の設計書に関しては、ランディングページ作成等であれば、HTML・CSS・JavaScriptを使用しているかと思います。
筆者はそれぞれを言語ごとにパーツに分けてタスクを洗い出してます。
洗い出しにはツールが必要ですが、Redmine等の高度なツールからエクセル等のシンプルなエディタまで様々です。
大規模プロジェクトになるなら、Redmine等のツールでタスクを管理するべきでしょう。
参考サイト：
