サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
WWDC25
www.nowte.net
WordPressのカスタム投稿タイプのカテゴリー一覧ページなどで使用する、タームに所属する記事一覧の表示方法を紹介します。 実装コード php <?php $tax_name = 'タクソノミースラッグ'; $posttype_name = 'カスタム投稿タイプ名'; $terms = get_terms($tax_name); foreach ( $terms as $term ): $args = array( 'post_type' => $posttype_name, 'tax_query' => array( array( 'taxonomy' => $tax_name, 'field' => 'slug', 'terms' => $term->slug, ), ), ); $the_query = new WP_Query( $args ); ?> <!-- ターム名 sta
フォームに使われているステップを表記するCSSのデザインサンプルです。 特徴 どこにいるかがひと目で分かる視認性 ステップ名を変更できる レスポンシブ対応 コピペで簡単作成 ドットタイプ 今どの段階にいるのかをドットで表現したタイプ。 HTML&CSS See the Pen css form-step01 by Aquarium (@aquarium) on CodePen. ドットタイプ 番号付き 番号付きでさらに全体を把握しやくすなりました。 HTML&CSS See the Pen css form-step02 by Aquarium (@aquarium) on CodePen. 矢印タイプ ステップの流れを矢印で表したタイプ See the Pen form-step03 by Aquarium (@aquarium) on CodePen.
CSSのflexboxは子要素の高さを揃えますが、孫要素の高さは揃えてくれません。 このページでは、子・孫 要素の高さを揃える方法を紹介します。 デモ 子要素の高さを揃える 孫要素の高さを揃える 孫要素の高さを揃える + ボタンを下に設置 複数の孫要素の高さを揃える + ボタンを下に設置（強引） デモ See the Pen flexbox sample by kura (@kuranopen) on CodePen. 子要素の高さを揃える Flexboxを使えば、通常子要素の高さは揃います。 HTML <div class="flex1"> <div class="item"> <p class="text">テキストテキストテキストテキスト</p> </div> <div class="item"> <p class="text">テキストテキストテキストテキストテキストテキストテキス
見たい配信が増えてきて1窓じゃ見づらくなったので、 2窓以上の配信を画面分割で同時視聴できる複窓ツールをまとめてみた。 まとめるとこんな感じ。 Youtubeなら→ N窓 ホロライブなら→ Hololivetools Twitchなら→ Multistream 機能一覧です。 詳細は以下に書いていきます。 Youtube限定 N窓 恐らく一番高機能で安定。唯一スマホ対応している。 機能：レイアウト編集／チャット表示／URL共有／パン振り(拡張機能)／スマホ対応(Mobile版) リンク：N窓 Hololivetools 軽量でUIがとても使いやすい。チャットは別窓。 ホロライブ以外の配信も追加できる。 配信中のホロライブがわかったりと、複窓機能以外でも便利。 機能：レイアウト編集／チャット表示(別窓)／URL共有 リンク：Hololivetools MultiYouTube 動作軽量でチャ
メインのFV画像でよく使用されている、画像が少しずつ拡大（ズーム）アニメーションしてフェードで画像が切り替わるスライドのslickを使用しての実装サンプルとコードを紹介します。 特徴 レスポンシブ フェード遷移 目次 フェードスライド ズームフェードスライド 前提 デモでは下記のCSSとJavascriptファイルを読み込んでいます。 <!-- CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css"> <!
画面いっぱいに動画を表示するには<video>タグをCSSで装飾することで実現できます。 <video>で表示した動画をCSSで横幅と縦幅を画面いっぱいまで指定して表示位置を調整します。キービジュアルでよく使われるような動画を背景の画面いっぱいに表示するデザインを実現できます。 特徴 ・レスポンシブ対応 ・Javascriptなし ・動画を天地中央表示 ・オーバーレイあり ・テキスト天地中央表示 動画ファイルを使う See the Pen CSS – Hero Movie (Overlay＆Text) by kura (@kuranopen) on CodePen. 自前の動画ファイルをアップロードして使う方法です。 特徴 <video>タグを使用 表示速度は自サーバーに依存 HTML <section class="hero"> <div class="video-box overlay
「Tablacus Explorer」は、知る人ぞ知るのファイラー「X-finder」の開発者が開発した画面分割できる拡張性の高いタブ型ファイラー。 エクスプローラーの様な見た目で初期状態で無駄な機能が少なく、画面分割可能。タブも表示可。ボタンひとつでインストールできるアドオン (拡張機能)を入れることで画面を複数に分割するなど自分好みのファイラーにカスタマイズできるのが特徴。癖はあるが、慣れればおすすめのファイラーです。 特徴 最大6画面分割 タブ表示 アドオンで自分好みにカスタマイズ インストーラー無しのポータルブル型 【ダウンロード】Tablacus Explorer 公式サイト 画面分割できるシンプル＆軽量タブ型ファイラー Tablacus Explorerはタブでエクスプローラーを切り替えられるタブ型という点とアドオンで画面を分割できるのが最大の特徴です。 最大6画面分割 見たい
このページを最初にブックマークしてみませんか？
『www.nowte.net』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
