HTML / CSS【第5のpositionプロパティ】stickyの使い方【CSS】
2020-05-23 オレンジ webの自由帳
今回はCSSのpositionプロパティの1種、
stickyの使い方についてまとめたいと思います。 relative, absol …※当サイトではアフィリエイト広告を利用しています
HTML / CSS
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で背景に動画を設定す …
HTML / CSS【CSSアニメーション】@keyframesの使い方
2021-09-11 オレンジ webの自由帳
今回はCSSアニメーションの1種、keyframesの使い方についてまとめたいと思います。 @keyframesは他のアニメーション …
HTML / CSS【CSS】ルートフォントサイズを10pxに設定する方法
2021-08-17 オレンジ webの自由帳
デフォルトのルートフォントサイズは16pxですが、CSSを書くときに16pxだと計算がしにくかったりしますよね。 今回はこれを10p …
HTML / CSS【CSS】要素をど真ん中に配置する方法【3つ紹介】
2021-02-18 オレンジ webの自由帳
要素をど真ん中に配置したいことってありますよね。
ヒーローイメージでも文章などのコンテンツが、
ど真ん中に配置されていることも多いのでは …
HTML / CSS【HTMLフォーム】セレクトボックスの作り方
2020-07-10 オレンジ webの自由帳
今回はお問い合わせフォームなどでよく見る
セレクトボックスの作り方についてまとめてみたいと思います。 こんなかんじのサンプルをつくってみました。
See the Pen …
HTML / CSS【HTMLフォーム】チェックボックスの作り方
2020-07-09 オレンジ webの自由帳
今回はお問い合わせフォームなどにある
チェックボックスの作り方についてまとめてみたいと思います。 こんなかんじのサンプルを作ってみました。
See the Pen
q …
HTML / CSS【HTMLフォーム】ラジオボタンの作り方
2020-07-08 オレンジ webの自由帳
今回はお問い合わせフォームなどで見られる、
ラジオボタンの作り方をまとめてみたいと思います。 こんなかんじのサンプルを作ってみました。
See the Pen
OJM …
HTML / CSS【CSSのみでスムーススクロール】scroll-behaviorプロパティの使い方
2020-06-29 オレンジ webの自由帳
1ページのサイトなどではナビゲーションの項目をクリックすると、
該当箇所までぐいーんと飛ばしてくれる
スムーススクロールが導入されること …
HTML / CSS【box-shadow】内側の影inset / 複数の影の指定方法
2020-06-19 オレンジ webの自由帳
影をつけるCSSプロパティのbox-shadowですが、
insetで内側に影をつけることができたり、
カンマで区切ると複数の影を作るこ …
HTML / CSS【背景を文字の形に切り取る】background-clip: text;の使い方【CSSプロパティ】
2020-06-14 オレンジ webの自由帳
今回は背景の画像や色を文字の形に切り取ることができるCSSプロパティ、
background-clip: textの使いかたをまとめてみた …
HTML / CSS【2パターン紹介】画像にCSSでオーバーレイをつける方法
2020-06-13 オレンジ webの自由帳
オーバーレイを画像に重ねることってありますよね。 画像の上にテキストを配置する場合、可読性を維持するため
画像とテキストの色のコント …
HTML / CSS【縦書きにするCSSプロパティ】writing-modeの使い方【和風】
2020-06-11 オレンジ webの自由帳
和食や旅館のホームページなどで文字が縦書きになっていると、
一気に和風な雰囲気になりますよね。 今回はCSSで縦書きにすることができ …
HTML / CSS【tableタグ】基本的な表の作り方【HTML】
2020-05-29 オレンジ webの自由帳
HTMLのtableタグってがなんだか独特ですよね。。 今回はHTMLのtableタグを使った基本的な表の作り方をまとめてみたいと思い …
HTML / CSS【CSS擬似要素】::before ::afterってなに？
2020-05-28 オレンジ webの自由帳
装飾でよく使われる::before, ::after擬似要素についてまとめてみたいと思います。 今回はデザインの作り方ではなく、
定 …
HTML / CSS【CSS擬似クラス】:nth-child() と :nth-of-type() のちがい
2020-05-26 オレンジ webの自由帳
n番目の要素を選ぶ :nth-childと:nth-of-type、
似ていますがちがいはどこにあるのでしょうか？ 今回はCSSの2 … HTML / CSS【第5のpositionプロパティ】stickyの使い方【CSS】
2020-05-23 オレンジ webの自由帳
今回はCSSのpositionプロパティの1種、
stickyの使い方についてまとめたいと思います。 relative, absol … HTML / CSS【CSSのborderと擬似要素で作る】吹き出しの作り方
2020-04-01 オレンジ webの自由帳
サイトで吹き出しの装飾ってよく見かけますよね。 どうやってできているのか気になったことはありませんか？
特に吹き出しの三角部分。。
… HTML / CSS【CSSセレクター】自在に使いこなそう【> + ~[]】
2020-03-24 オレンジ webの自由帳
今回は少し複雑なCSSセレクターをいくつかご紹介してみたいと思います。
使いこなせるようになるとコードの量もコンパクトにできそうですね。
… HTML / CSS【Photoshopの効果をCSSだけで】filterプロパティ
2020-03-20 オレンジ webの自由帳
今回はCSSのfilterプロパティの使い方についてまとめたいと思います。 filterプロパティは、
CSSプロパティの1種で、C …
JavaScriptJavaScriptでクラスを操作する方法
2021-05-26 オレンジ webの自由帳
今回はJavaScriptでクラスを操作する方法についてまとめたいと思います。
クラスの操作では下記のようなメソッドがあります。 Element.classLi …
JavaScript【JavaScript】アコーディオンメニューの作り方
2021-05-21 オレンジ webの自由帳
今回はJavaScriptでのアコーディオンの作り方をまとめてみたいと思います。
こんなかんじのデモを作ってみました。
See the …
JavaScriptJavaScriptでHTML要素を選択する方法
2021-05-18 オレンジ webの自由帳
今回はJavaScriptからHTML要素を選択する方法について
簡単にまとめてみたいと思います。
JavaScriptからHTML要素 …
JavaScript【JavaScript】モーダルウィンドウの作り方
2021-05-17 オレンジ webの自由帳
今回はJavaScriptでモーダルウィンドウを作る方法についてまとめたいと思います。 こんなサンプルを作ってみました。 …
jQuery【jQuery】モーダルウィンドウの作り方
2020-11-05 オレンジ webの自由帳
今回はjQueryでモーダルウィンドウを作る方法についてまとめたいと思います。 このようなシンプルなモーダルウィンドウのサンプルを作ってみました。 See th …
jQuery【jQueryスライダープラグイン】slickの使い方
2020-07-16 オレンジ webの自由帳
サイトをみていると、かなりの高確率でスライダーが使われていますよね。 今回はjQueryで動くスライダープラグイン、
「slick」 …
jQuery【jQuery】アコーディオンメニューの作り方
2020-06-26 オレンジ webの自由帳
サイトのQ & Aセクションなどをみていると、
質問部分のクリックで、回答の表示・非表示が切り替わるメニューがありますよね。
…
jQuery【簡単に拡大ポップアップが作れるプラグイン】Lightboxの使い方
2020-06-16 オレンジ webの自由帳
画像などをクリックすると、
ポップアップ で拡大写真が表示されることってありますよね。 今回はライトボックスを簡単に導入できるプラグ …
JavaScript【スクロールに合わせたアニメーションプラグイン】wow.jsの使い方
2020-05-27 オレンジ webの自由帳
サイトをみていると、
スクロールに合わせてコンテンツがふわっと現れたり、スライドしてきたりしますよね。 今回はスクロールに合わせてア …
JavaScript【スライダープラグイン】Swiperの使い方
2020-05-25 オレンジ webの自由帳
サイトではほとんど必ずと言っていいほどスライダーが使われていますよね。
スライダーはいちから作ることもできますが、便利なプラグインもたくさんあります。 今回はプラグインのひ … JavaScript【最短1行で導入できる】smooth-scroll.jsの使い方
2020-04-06 オレンジ webの自由帳
メニューを押すと、指定したセクションまで
ぐいーんと移動してくれるナビゲーションってありますよね。 CSSのIDのみでも場所を瞬間的 … jQuery【クリックでページトップへ】スクロールトップボタンの作り方【jQuery】
2020-04-05 オレンジ webの自由帳
サイトをスクロールしていると、
途中で下のあたりからふわっと現れるボタンってありますよね。 押すとページのトップまで、ぐいーんと戻っ … JavaScript【スクロールでデザインが変わる】ヘッダーの作り方
2020-04-02 オレンジ webの自由帳
スクロールするとデザインが変わるヘッダーってよく見かけますよね。背景の色が変わったり、ヘッダーの高さがせまくなったり。。 ヘッダーナ …
WordPress【テンプレートファイル名を表示してくれる】Show Current Templateプラグインの使い方
2021-09-16 オレンジ webの自由帳
WordPressはテンプレート階層のルールにに基づいて、どのテンプレートファイルを表示するかが決められていますよね。 今回はどのテ …
WordPress【LOCAL】WordPressのローカル開発環境を作る方法
2021-09-15 オレンジ webの自由帳
今回は「LOCAL」で、WordPressのローカル環境開発の作成方法をまとめたいと思います。 以前、MAMPでの環境構築方法をまと …
WordPress【シンタックスハイライタープラグイン】Highlighting Code Blockの使い方
2021-09-07 オレンジ webの自由帳
今回はシンタックスハイライターのWordPressプラグイン「Highlighting Code Block」をブロックエディタで使う方法 …
WordPress【JIN】ブロックエディタでシンタックスハイライターを使う方法
2021-08-18 オレンジ webの自由帳
本ブログではWordPressテーマJINを使用しています。 JINでは標準でソースコードを綺麗に表示してくれるシンタック …
WordPress【WordPressテーマ作成】カスタム3兄弟の使い方まとめ
2021-06-28 オレンジ webの自由帳
今回はWordPressのカスタム3兄弟についての記事が
少したまってきたのでまとめてみたいと思います。
WordPressのカスタム3 …
WordPressCodePenをWordPressブログに埋め込む方法
2021-03-21 オレンジ webの自由帳
今回はCodePenで作ったソースコードを
WordPressのブログに埋め込む方法について簡単にまとめたいと思います。 CodeP …
WordPress【Advanced Custom Fields】カスタムフィールドで背景画像を表示する方法【備忘録】
2021-02-16 オレンジ webの自由帳
Advanced Custom Fields(略：ACF)を使ったカスタムフィールドで
登録した画像を背景画像として出力したいことがありま …
WordPress【Advanced Custom Fields】他のページでカスタムフィールドの値を表示する方法
2021-02-14 オレンジ webの自由帳
カスタムフィールドを編集するのは特定の固定ページであっても、
他のページでフィールドの値を表示させたいことってありますよね。
今回はWo …
WordPress【WordPressテーマ作成】全体の流れをまとめてみる
2020-11-27 オレンジ webの自由帳
今回はWordPressでテーマを作るときの全体の流れをまとめてみたいと思います。 各テンプレートファイルの作り方など細かい部分をそれ …
WordPress【WordPressテーマ作成】404ページの作り方
2020-11-13 オレンジ webの自由帳
今回はWordPressの404ページの作り方について
簡単にまとめていきたいと思います。 そもそも404ページってなに？
そもそ …
WordPress【WordPressテーマ作成】よく使うテンプレートタグ & 関数まとめ
2020-11-03 オレンジ webの自由帳
今回はWordPressで自作テーマを作るときに使う テンプレートタグや関数をまとめてみたいと思います。
共通
基本のループ処理
…
WordPress【WordPressテーマ作成】ウィジェットの作り方
2020-10-28 オレンジ webの自由帳
今回はWordPressのテーマ作成で
ウィジェットを作成する方法をまとめてみたいと思います。
おおまかな全体の流れはこんなかんじです。 …
WordPress【パンくずリストプラグイン】Breadcrumb NavXTの使い方
2020-10-16 オレンジ webの自由帳
今回はWordPressで簡単にパンくずリストを作ってくれるプラグイン
「Breadcrumb NavXT」の使い方についてまとめたいと思 …
WordPress【アーカイブページの表示件数を出し分ける】pre_get_postsの使い方
2020-10-13 オレンジ webの自由帳
今回は各アーカイブページで表示件数を出し分けることができるアクションフックpre_get_postsの使い方についてまとめてみたいと思います …
WordPress【カスタムタクソノミー】をCustom Post Type UIで作る方法
2020-10-13 オレンジ webの自由帳
今回はWordPressのカスタムタクソノミー / カスタム分類を
「Custom Post Type UI」というプラグインで作る方法を …
WordPress【カスタム投稿タイプ】をCustom Post Type UIで作る方法
2020-10-06 オレンジ webの自由帳
今回はWordPressのカスタム投稿タイプを
「Custom Post Type UI」というプラグインで作る方法をまとめていきたいと思 …
WordPress【カスタムフィールド】をAdvenced Custom Fieldsで作る方法
2020-10-05 オレンジ webの自由帳
今回はWordPressのカスタムフィールドを簡単に作ることができるプラグイン
Advanced Custom Fieldsの使いかたをま …
WordPress【手順まとめ】HTMLサイトのWordPress化
2020-10-02 オレンジ webの自由帳
今回はHTMLサイトをWordPress化する際の手順をまとめてみようと思います。 なお前提としてすでに静的にコーディングされたHTM …