JavaScript【最短1行で導入できる】smooth-scroll.jsの使い方
2020-04-06 オレンジ webの自由帳
メニューを押すと、指定したセクションまで
ぐいーんと移動してくれるナビゲーションってありますよね。 CSSのIDのみでも場所を瞬間的 …
jQuery【クリックでページトップへ】スクロールトップボタンの作り方【jQuery】
2020-04-05 オレンジ webの自由帳
サイトをスクロールしていると、
途中で下のあたりからふわっと現れるボタンってありますよね。 押すとページのトップまで、ぐいーんと戻っ …
その他【画像準備とさよなら】Lorem Picsumの使い方【便利サービス】
2020-04-04 オレンジ webの自由帳
練習でサイトや部分的なパーツを作ったり、
チュートリアルにそってコーディングしたりするとき、
画像の準備がすこし面倒だなと感じてしまうこ …
JavaScript【スクロールでデザインが変わる】ヘッダーの作り方
2020-04-02 オレンジ webの自由帳
スクロールするとデザインが変わるヘッダーってよく見かけますよね。背景の色が変わったり、ヘッダーの高さがせまくなったり。。 ヘッダーナ …
HTML / CSS【CSSのborderと擬似要素で作る】吹き出しの作り方
2020-04-01 オレンジ webの自由帳
サイトで吹き出しの装飾ってよく見かけますよね。 どうやってできているのか気になったことはありませんか？
特に吹き出しの三角部分。。
…
その他【コーディング爆速】Emmetの使い方【CSS編】
2020-03-30 オレンジ webの自由帳
今回はHTML編に続けて、CSSで使う頻度が高そうなEmmetを
自分なりにグループ分けしてまとめてみたいと思います。
レイアウト系
…
その他【コーディング爆速】Emmetの使い方【HTML編】
2020-03-29 オレンジ webの自由帳
今回はHTMLやCSSを効率的に書くことができる便利なツール
Emmetについてご紹介したいと思います。 こちらの記事では、HTML …![【CSSセレクター】自在に使いこなそう【> + ~[]】](https://orange-log.com/wp-content/uploads/2020/03/css-selector_ic-640x360.jpg)
HTML / CSS【CSSセレクター】自在に使いこなそう【> + ~[]】
2020-03-24 オレンジ webの自由帳
今回は少し複雑なCSSセレクターをいくつかご紹介してみたいと思います。
使いこなせるようになるとコードの量もコンパクトにできそうですね。
…
HTML / CSS【Photoshopの効果をCSSだけで】filterプロパティ
2020-03-20 オレンジ webの自由帳
今回はCSSのfilterプロパティの使い方についてまとめたいと思います。 filterプロパティは、
CSSプロパティの1種で、C …
HTML / CSS【選択した文字色や背景色を変更】::selectionの使い方【CSS擬似要素】
2020-03-19 オレンジ webの自由帳
今回はCSSの擬似要素の1つである、::selectionについてまとめたいと思います。 ::selectionを使うと、
クリック …
HTML / CSS【一気に今っぽいサイトに】背景で動画を流す方法
2020-03-16 オレンジ webの自由帳
サイトのメインビジュアルなどで、
背景に画像ではなく動画を使っているものもありますよね。 今回はHTMLとCSSで背景に動画を設定す …