たとえば、どんなにスクロールしていってもずっと右下に居座り続けるアイコンとか。
そんなストーカーアイコンを設置してみます。
アイコンを用意する
漫画描きさんは、自分で描きたいですよね。
テスト用に、30px×30pxの画像を用意してください。保存形式は透過ｐｎｇがベストです。テストなのでｊｐｇでもｇｉｆでも大丈夫です。
↑こんなの作りました。TOPページへ戻るボタンです。
つくったアイコンは「modoru.png」という名前で、imageフォルダに入っているという想定で進めます。
htmlを記述する
超超初心者向け漫画サイトのつくり方【超シンプルサイトをつくる。縦スクロールタイプ】
この記事でつくった、comic.htmlに設置します。
記述前のｈｔｍｌ
＜/body＞直前の、「トップへ戻る」という部分を書き換えます。
<img src="image/modoru.png">
そして、＜ｐ＞にクラス名を付けます。
<p class="modoru">
以上で、htmlの記述は終わりです。次、CSS書いていきましょ～
CSSを記述する
まず、記述前の状態
ちょびっとしか書いてませんね。
ものすっごいシンプル簡単につくれる方法をとったので、こんなに少ない記述になってます。
記述前のブラウザ表示は
こんな感じです。「トップへ戻る」というテキストが「戻」アイコンに差し変わっています。
今の状態だと、最後までスクロールしないと見えません。
これを、常に表示範囲に入り続ける出しゃばりくんにします。
.modoru {
position: fixed;
bottom: 10px;
right: 20px;
}
すると…
おー、出しゃばりましたねー。１ページ目なのに表示されています。彼はもうここを動きません。どんなにスクロールしても、ずっと右下に居座ります。
記述の内容を見ていきましょ～
.modoru＝htmlで、ｐに名付けたクラス名。これに適用します、という意味
position: fixed;＝位置を固定して。という意味
bottom: 10px;＝下から10pxの位置。
right: 20px;＝右から20pxの位置
位置の調整は、bottom、rightの数値を変えてください。
今回は右下に配置しましたが、もちろんどこでもOKです。上から10pxならtop:10px;…など。
これでストーカーアイコン設置完了です。お疲れさまでした。
おまけ
今回はトップページに戻るアイコンを設置しましたが、よく見るのは「そのページの一番上に戻る」アイコンだと思います。
この、「そのページの一番上に戻る」は、htmlとCSSだけでは瞬間移動することしかできません。
よく見る、するするするっとエレベーターに乗っているみたいに上に登っていくタイプは少し手間が必要です。
ページめくりタイプをつくるひとは不要だと思いますが、縦スクロールタイプをつくるひとは、あった方がいいかも！
詳しくは、また～。
コメント