【2018年版】http,httpsは省略しない方がいい
外部ファイルのリンクを指定するときにhttp、httpsを省略しているコードを時々見かけます。 サイトによって指定方法が異なっていたので、省略するべきかそうじゃないのか調べたことをまとめました。 調べてみると数年前までは…
HTML/CSS
HTML/CSS
HTML/CSS
HTML/CSS
HTML/CSS
外部からアクセスできるローカルサーバーを立てる
自分がローカルで作成しているwebサイト、webアプリケーションを別の端末で確認する方法についてです。 この方法を知ってると知らないとでは結構大きいですね。私は最近知ったので活かしていきたいと思います。 私…
HTML/CSS
よく見かけるスライドするみたいに色が変わるボタン
最近よく見るマウスオーバーするとスライドするように色が変わるボタンを試してみました。 要素の横に四角形を置いておいてマウスオーバーした瞬間に、その四角形の幅を変化させています。 見て面白いなぁと思ったものをすぐに試せるフ…
HTML/CSS
[HTML/CSS]マウスオーバーして下線を表示するアニメーション
他のサイトでよく見る下線が伸びてくるアニメーションを試してみました。他のソースを参考にしたわけではないので、もっと効率のいい方法はあるかもしれません。 下記の文字列にマウスオーバーすると下線が表示されます。 …
HTML/CSS
素のJavaScriptとJQueryの角度を変更する方法
transform:rotateで角度の操作をする方法がJQueryのものばかりだったので、素のJavaScriptでの操作をメモします。
|
1 2 3 4 5 6 7 |
//JavaScript var rect = document.getElementById("rect"); rect.style.transform = "rotateX(0deg) rotateY(0deg)"; //JQuery $("#rect").css({"transform":"rotateX(0deg) rotateY(0deg)"}); |
JQueryは…
HTML/CSS
[HTML/CSS]ロード画面を作ってみる
ウィンドウの読み込んでいる時間に画像が回転するロード画面を表示してみようと思います。 最近のウェブサイトは軽量化されていて読み込みに時間がかかるようなものはあまりないので読み込み時の動きがあるサイトはあまり見かけません。…
HTML/CSS
[WordPress]記事内にJavaScriptのコードを反映させる
WordPressでJavaScriptの記事を書いている時、実行結果を表示する方法を探していました。 HTML、CSS、JavaScriptの実行結果を表示したいのだったら、CodePenなどを用いたらコードと結果を簡…
HTML/CSS
[JavaScript]Chart.jsで簡単にグラフ作成！
HTMLに簡単に綺麗なグラフを表示したいという時にはChart.jsがオススメです！ Chart.jsとは？ Chart.jsは『デザイナーと開発者のためのシンプルで柔軟なJavaScriptチャート』です…
HTML/CSS
[HTML/CSS]padding-top/bottomで縦横比を調整する
通常、子要素のwidthとheightの値をautoにすると親要素の値に従って設定されるがiframeなどはautoで調整ができないため、親要素の依存した値に設定したい場合はラッパー領域を用意してその領域を調整するという…
HTML/CSS
[HTML/CSS]クラス要素の非指定方法
短いですが使い道がありそうなので、書いておきます。 指定した要素がついていない時の装飾を設定できます。 『:not(クラス要素、またはID要素)』
|
1 2 3 4 |
//「active」という名前のクラス要素がついていない時はフォントカラーを赤くする .sample:not(.active){ color:red; } |
&nb…
ABOUT
