プログラミング

プログラミング

【CSS#4】押せるボタンの作り方!へこむので立体的

いつものようにHTMLとCSSのファイルを用意しましょう。加えてmain.jsというJavaScriptのファイルも作りましょう。くこむのを表現するために動きを付けます。 btn.addEventListenerでプログラミングします...
プログラミング

【CSS#3】図形が上下に動くボタン(アニメーション)

CSS#1では文字が消えるプログラミングについて解説していました。 CSS#3では、マウスポインタを近づけると図形が動くオプションについて解説します。 このような図形を作ります。中にある円(丸)が移動します。 ...
プログラミング

【CSS#5】文字がタイピングしたように一文字ずつ現れるフェードイン

HTML(〜.html)とCSS(style.css)のファイルを用意しましょう。下のような白色の文字が左からタイピングしたように現れます。 大文字なのか小文字なのか自由に変えられますのでぜひ試してみてくださいね! ...
プログラミング

【CSS#2】繰り返すパルス状の点滅ボタンはぼかして作る方法(keyframes animate)

パルス状の点滅信号のアニメーションをぼかして表現するプログラミングについて解説します。 文字は☺にしましたが、自由に変更してみましょう。 商品のボタンに使ってみると購買意欲が掻き立てられるかもしれませんね。 まずはHTML...
プログラミング

【CSS#1・jQuery】文字が消えるアニメーション(フェードアウト)

ファイルはcss_animation.html、style.cssのほかにjquery-3.3.1.min.jsも用意しました。 マウスポインタをボタンに近づけると文字が消える(黄色になる)仕組みです。 → (フェー...
プログラミング

【HTML】プログラミングで簡単に口コミを作るソースコードのコピペ方法

今回はHTMLで簡単に口コミを作る方法について紹介します。 応用すれば良いデザインに変えることもできるので早速プログラミングしてみましょう。 完成形はこのような形です。 imgファイル(下層の場合はimg/...
2019.12.04
タイトルとURLをコピーしました