HTML / CSS【第5のpositionプロパティ】stickyの使い方【CSS】 2020-05-23 オレンジ webの自由帳 今回はCSSのpositionプロパティの1種、 stickyの使い方についてまとめたいと思います。 relative, absol …
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 …
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 …