CSSの知っておくと便利なフクロウセレクタの使い方！ 要素を積み重ねる時のマージンにかなり便利です
兄弟要素を積み重ねる時、垂直マージンをどのように実装していますか？ 要素を積み重ねる時のマージンは、フクロウセレクタ（* + *）を使うと簡単です。さらに、>を追加することで、マージンが再帰的に与えられるのを防ぎます。たった3行のCSSで積み重ねる時のマージンを管理できる、フクロウセレクタの効果的な使い方を紹介します。 このテクニックは、テキストとテキスト、見出し直後のテキスト、流動的なフォントサイズにも非常に効果的です。 My favourite 3 lines of CSS by Andy Bell 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSのカスタムプロパティでのフォールバック値の仕組み The Stackではなく.flowを使うのなぜですか？ gapではなく、marginを使うのなぜですか？ 終わり
プレフィックスの変更の備忘録 ｜ へいぜい！
このサイトの記事には、アフィリエイト広告があります。 年末にサーバー移転にチャレンジしてみました。 ただ… 移転したはいいけど同時にプレフィックスの変更も行なったためか、カテゴリがうまく反映されなくて、めちゃくちゃ困った… 移転前にアップロードしていた画像をダウンロードし忘れて消してしまうし… 気がつくとそのままの状態で、年始に風邪をひいてしまったので結局放置。 2019年、気持ちも新たに日記も新しくって思ったけれど記事は残しておきたいし、このまま使用しても正常に機能してなかったら後々泣きをみそうなので、改めてプレフィックスの変更をしてみたので備忘録。 プレフィックスの変更.step1 1.pypMyAdminにログインして目的のデータベースを選択。 2.SQLタブを選択して下記のクエリを実行。 ※例えば「wp_」を「wp15_」に変更したい場合の例 ALTER TABLE wp_comm
WordPressの新規・編集の投稿でメールを送信する | カバの樹
はじめに クライアントから記事を投稿した際に、グループメールに通知を送って欲しいと要望がありました。 新規・編集のどちらかを行った時に、通知メールを飛ばす機能を追加することにしました。 設定 WordPressの基本の投稿 及び カスタムタイプで保存をした時に呼び出されるフックとして「save_post」というものが用意されています。 これを利用して、リビジョン・自動下書き・指定のポストタイプ以外を除外してメールを送信する仕組みを組み込みます。 下記のコードを functions.php に設定します。 function my_project_updated_send_email( $post_ID ) { // リビジョンならメールを送らない。 if ( wp_is_post_revision( $post_ID ) ) return; // 自動下書きはメールを送らない。 if(get
少しのコードで実装可能なHTML小技集
2023年2月7日 HTML これまで「少しのコードで実装可能な10のCSS小技集」シリーズでCSSのちょっとしたTipsを紹介していましたが、今回はHTMLバージョン！知っていると使い勝手がちょっとよくなる小技を集めました！ ↑私が10年以上利用している会計ソフト！ 目次 セレクトメニューの選択肢をグループ化 type 属性値によって入力欄が変化 スマートフォンでエンターキーのテキストを変える 画像の遅延読み込み テキストの折り返し位置を指定する 番号付きリストの順番を変更する 簡単アコーディオン 任意のテキストを自動翻訳させない リンク先のテキストを指定してスクロールさせる 1. セレクトメニューの選択肢をグループ化 複数の選択肢を用意できるおなじみの select タグ。項目は option タグを利用しますが、さらに optgroup タグで囲むことでグループ化できます。選択肢が多
CSSのレイアウトで、ラッパーが異なるコンテンツのツラをcalc()関数のパディングで揃える
メインのヘッダは固定幅、記事のヘッダは流動幅、ラッパーが異なるコンテンツのツラを揃えるCSSのテクニックを紹介します。 下記のようにヘッダのロゴと記事のタイトルを揃えたい時はありませんか？ CSSのcalc()関数を使用した動的なパディングを使用すると、簡単に実装できます。デスクトップの大きいスクリーン、スマホなどの小さいスクリーン、記事が長くてスクロールバーが表示される場合などにも対応しています。 Aligning Content In Different Wrappers by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 固定幅と流動幅でツラを揃える 動的なパディングを実装するテクニック スマホでのパディングの処理 このCSSをどこにでも使用できるようにする スクロールバーで位置がずれる問題を
【WordPress】スラッグに記事IDを自動で指定する方法を解説 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ 小学生のときからモスキートーンが聴こえなかったバックエンドエンジニアのまうみです。 今回はWordPressのカスタマイズでも定番の記事のスラッグの自動記事ID設定を紹介します。 なぜスラッグを記事IDにするのか まずはデフォルトの設定を確認してみましょう。 このように記事を保存した際に、記事のタイトル（日本語）がそのままスラッグに指定されてますね。 URLに日本語が混ざってしまうことを避けたい場合、記事を保存した後に、任意の英数字のスラッグを指定すれば問題ありません。 しかし、もし設定を忘れてしまったら? 日本語のURLが設定された状態でGoogleのインデックスに登録されてしまった場合、スラッグを後から変更するにはリダイレクトの設定が必要です。これは面倒ですね。 記事の保存時に日本語以外でユニークなスラッグが指定されていれば、少なくとも日本語が入ったままのURLで公開され
phpの多次元・二次元配列の指定キーの値を検索してデータを取得する方法（同じ値が複数ある）
以下のようなリストがあって、nameキーがhogeである情報を抽出したい場合。 hogeは1つしかない場合は、array_search()とarray_column()を使えばＯＫ。 $list = array( array('name' => 'hage', 'data' => 'mon'), array('name' => 'hige', 'data' => 'tue'), array('name' => 'huge', 'data' => 'wed'), array('name' => 'hege', 'data' => 'thu'), array('name' => 'hoge', 'data' => 'fri'), ); $key = array_search( 'hoge', array_column( $list, 'name')); var_dump(list[$key])
まだ使ってる？今は非推奨となったJavaScriptの書き方
2021年11月18日 JavaScript いつも何気なく使っていたコードをふと調べ直してみると、知らないうちに「Deprecated（非推奨）」と書かれている…なんてこともありますよね。今回はJavaScriptを書いていて出くわした非推奨となったものをいくつか紹介します。 ↑私が10年以上利用している会計ソフト！ document.write 画面にテキストを表示する document.write 。JavaScriptの勉強を始めて最初に書いたコードがこれだったという方もいるのではないでしょうか？これはブラウザーのレンダリングに悪影響が出たり、DOMへの影響などを考慮して「強く非推奨」とされています。 これまでの記述例： document.write('やっほーい'); 解決策1：textContent や innerHTML を使う 代わりに文字列を書き換える textConte
知っておくと便利で役に立つHTMLの属性のまとめ
あまり知られていないけど、知っておくと便利で役に立つHTMLの属性を7つ紹介します。 Google翻訳が翻訳しようとするのを防ぐtranslate属性、リンクをダウンロードするように指示するdownload属性、アップロードできるファイルのタイプを指定できるaccept属性など、HTMLだけで実装できるのかという便利な属性ばかりです。 7 useful HTML attributes you may not know by Mariana 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに multiple属性 accept属性 contenteditable属性 spellcheck属性 translate属性 poster属性 download属性 終わりに はじめに HTMLは、Web制作の要です。しかし、多くのプロ
CSSでボタンにテキストを配置する時、上下のスペースを簡単に揃えられる実装テクニック
ボタンにテキストを配置する時、上下のスペースを揃えるのに困ったことはありませんか？ ボタンのHTMLはそのままで、疑似要素を追加するだけで簡単に揃えられるので、そのCSSのテクニックを紹介します。 Aligning a Button Label Vertically by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに ボタンにテキストを配置する時、上下のスペースを揃える 終わりに はじめに デベロッパーのあなたは実装するために、デザインのモックアップを渡されたとします。そのモックアップではかっこよくフォントが使用されており、デザインの中で完璧に見えました。 しかし、CSSで実装してみると、フォントの周りに予期せぬスペースが追加されていることに気がつきました。これは何だと思いますか？ そもそ
早く言ってよ〜！CSSのtransformは同じ関数を複数回つかってもOKだった | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、エンジニアのつっちーです。 .foo { transform: translateX(-50%) translateX(10px); } みなさんは、このCSSが有効であること、ご存じだったでしょうか。CSSのtransformプロパティでは、このように同じ関数を複数回使用できます。transformにはもう何年もお世話になってきたというのに、このことは最近になって初めて気が付きました……。「そんなことも知らなかったの？」という方がほとんどだとは思いますが、忘れてしまわないように記事に残しておきます。 たとえばこんなときに 複数の単位で移動距離を指定 See the Pen Multiple Transform Functions 1 by dsktschy (@dsktschy) on CodePen. See the Pen Multiple Transform Funct
CSSの実装方法を少し改善するだけで、Webページの読み込み・表示を最適化するテクニックのまとめ
CSSの記述方法やレイアウトの構築方法で、ページの表示速度、読み込み時に発生するレイアウトのずれ、Webフォントの表示、CSSアニメーション、アクションを起こした時の反応の速度など、ウェブバイタルに大きな影響を与えます。 ウェブバイタル（Web Vitals）を最適化するためのCSSのテクニックを紹介します。 CSS for Web Vitals by Katie Hempenius, Una Kravets 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに レイアウトのCSSを改善 画像のCSSを改善 画像によるレイアウトシフトのCSSを改善 WebフォントのCSSを改善 アニメーションのCSSを改善 クリティカルCSS 終わりに はじめに CSSの記述方法やレイアウトの構築方法で、コアウェブバイタル（Core
知っておくと実装に役立つ！JavaScriptのテクニックのまとめ
デベロッパーのコミュニティには、実装に役立つテクニックやヒントが満載です。その中から特に有用なJavaScriptのテクニックとヒントを紹介します。 8 JavaScript Tips & Tricks That No One Teaches 🚀 by Garvit Motwani (@GarvitMotwani) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. JavaScriptにおける機能継承 2. .map()の置換 3. 数値から文字列に、文字列から数値に 4. lengthを使用して配列のサイズを変更したり、空にする 5. 配列の分割で値を入れ替える 6. 配列から重複を削除する 7. ループのコードを少なくする 8. パフォーマンス 終わりに はじめに JavaScriptは世界で最もクールな言語
【保存版】CSS Flexboxでレスポンシブ対応のレイアウトを実装するHTMLとCSSのシンプルなコードのまとめ
CSS Flexboxで実装するWebページでよく見かけるレスポンシブ対応のレイアウト、カードレイアウト、ナビゲーションバー、サイドバー、聖杯レイアウトなどのHTMLとCSSのコードを紹介します。 コードは非常にシンプルなので、テンプレートやスニペットとして再利用できます。 Master CSS Flexbox 2021 🔥- Build 5 Responsive Layouts🎖️|| CSS 2021 by Joy Shaheb 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Flexboxの構造・各プロパティと値 実装の準備 Level 1: シンプルなカードレイアウト Level 2: ナビゲーションバー Level 3: サイドバー Level 4: 少し複雑なカードレイアウト Level 5: Holy Grai
imgタグに指定した画像のURLが存在しない時に表示される状態をCSSだけで対応する | かちびと.net
Result 1番上が画像のURLが存在しない時で、特に何もしない場合に表示されるやつ。 2番目が対策した場合+画像が無い時。 3番目が対策した場合+画像がある時。 何もしなければ1番目の表示になります。 対策すると2番目のように任意のスタイルで表示されます。 対策した場合でも3番目のように画像があれば影響を受けません。 css ご存知のように基本的にはimgに疑似要素は使う事が出来ません。 が、デモのように画像が存在しない時は使う事が出来るようなのでそれを利用してスタイリングする、みたいな話です。 img { display: inline-block; font-family: Arial, sans-serif; font-weight: 300; line-height: 2; text-align: center; min-width: 300px; min-height: 50
【Googleスプレッドシート】「色」でフィルターをかけたいし並び替えもしたい→できた！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。経営企画室のゆりえです。会社全体のさまざまな数字を管理しています。 これまでのLIGブログでは、エクセルやGoogleスプレッドシートの活用法に関する記事を書きました。 📝ゆりえが書いた記事一覧 Googleスプレッドシート：色で並び替え＆フィルター 少し前なのでご存じの方もいると思いますが、2020年3月から実装されました。前々からあったらいいなと思っていた機能です。簡単な機能のご紹介と、使ってみて思ったことを書かせていただきます。 G Suite アップデートブログ ココから機能を使う セルにフィルタを適用し、フィルタメニューを開くと、「色で並べ替え」と「色でフィルタ」の2つが追加されています！ やったー！ ここから、機能を使うことができます。 ▼まずはフィルタを適用 ▼フィルタメニューを開く 「色で並べ替え」は表示する順番を指定した色によって並び替える機能、「色でフィル
WordPressのmu-pluginsフォルダとは
must-use plugins（mu-plugins）とは？普通にWordpressサイトを運営しているだけだとあまり見かけない用語ですが、マルチサイトで必ず有効にしたいプラグインを設定したり、Wordpressアップデートの自動更新有効化・解除の設定をしたりする場合などに使用します。 [adsense] must-use pluginsとは「must-use」とあるとおり、「必ず使用する」プラグインを入れておくための特別なフォルダです。 その特別なフォルダはどこにあるかというと、 wp-content/mu-plugins/ です。 ただ、Wordpressをインストールしただけではこのmu-pluginsフォルダは作成されないので、必要になった場合は、手動でmu-pluginsフォルダを作成する必要があります。 mu-pluginsフォルダの動作についてWordPressが起動すると
これで解決！height: 100vh;を定義したのに、iOSのスマホで高さいっぱいに表示されないのを解決するCSSのテクニック
iOSのスマホでheight: 100vh;を定義してビューポートの高さいっぱいに表示したいのに、アドレスバーが表示されているとその分下が隠れて表示されてしまい、高さいっぱいにならないのを解決する方法を紹介します。 CSSのみのテクニックで、JavaScriptは必要ありません。 height: 100vh;だけでなく、min-heightやmax-heightでも機能します。 PostCSS 100vh Fix -GitHub PostCSS 100vh Fix 注意点 使い方 PostCSS 100vh Fix PostCSS 100vh Fixは、100vhのiOSの挙動（バグ？）を修正するPostCSSのプラグインです。ピュアCSSのソリューションで、JavaScriptは必要ありません。 高さいっぱいに表示したい時に、height: 100vh;だけを定義してもiOSでは期待通り
Googleフォントをサブセット化してページの読み込みをスムーズに
2024年8月27日 Webサイト制作, 便利ツール おしゃれなフォントが気軽に実装できるGoogleフォント。みなさん使っていますかね？登録やダウンロード不要なので便利ですが、日本語フォントはなかなか容量が大きくてページの読み込み速度に影響が出てしまいます。そこで必要なフォントのみを指定できるサブセット化をしてみましょう！ ↑私が10年以上利用している会計ソフト！ Googleフォントの設定 まずは通常通りGoogleフォントを設定しましょう。GoogleフォントのWebサイトから、今回は例として「Kosugi Maru」というフォントを設定したいので検索。一覧から「Kosugi Maru」をクリックします。 続いて見本の右側にある「Select this style」をクリック。 HTML 画面右側に選択したフォントが表示されます。「Embed」タブをクリックしてコードを取得しましょう
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GoogleCalendar : 複数のカレンダーをひとつのカレンダーに埋め込む手順