YouTube 動画埋め込みのレスポンシブ対応方法 - by Takumi Hirashima
YouTube の動画埋め込みをレスポンシブ対応する方法を紹介します。 埋め込みコードをブロック要素で囲み、CSS の aspect-ratio プロパティを使い、アスペクト比を 16:9 に固定することで対応します。縦型動画の場合はアスペクト比を任意の値に変更してください。 また、古いブラウザーでも対応できる padding-top ハックを使った方法も紹介します。 動画の埋め込みをレスポンシブ対応する方法 aspect-ratio を使った方法 padding-top ハックを使った方法 動画の埋め込みをレスポンシブ対応する方法 まずは YouTube からコピーした「動画の埋め込みのコード（iframe）」をブロック要素（<div class="youtube">〜</div>）で囲みます。 <div class="youtube"> <iframe width="560" heig
WordPress:global-styles-inline-cssとwp-block-library-cssは何？削除していいのか？方法は？ ｜ けーちゃんの個人サイト
アフィリエイターけーちゃんの個人サイトです。アフィリエイトをやっていて疑問に思ったことやサイト構築などについてきままに投稿しています。
A4サイズ印刷専用WEBページを作る方法について
WEBページをA4サイズで印刷できるようにする場合、様々な設定が必要になります。 A4で連続して印刷される場合と、A4用紙1枚で収まるケースとでCSSが変わってきます。 印刷ボタンを非表示にしたり、ヘッダー・フッターを非表示にする設定も忘れずにおこないましょう。 任意に印刷向けWEBページを作る 本記事はA4印刷向けのWEBページを作る大まかな手順です。 印刷を前提としたページを前もって準備するタイプですね。 印刷を前提としていないWEBページをユーザーが印刷する場合、ある程度ユーザー任せで構わないと思います。 元々印刷向けに作っていない事を唄っておけば、多少レイアウトが変でも文句は言われないはずです。 あえて印刷ボタンを準備するケース しかしあえて印刷専用ページとして公開する場合は、きちんとした整備が必要になります。 まず内容はA4判サイズに収まるコンテンツを準備するようにしましょう。
【html/CSS】下線の太さ,色,種類を変える方法
「aタグの下線の色を変えたい！」 「波線の下線を引きたい！」 下線の太さ、色、種類を変える方法を解説します。
【2025年版】font-familyの正しい指定方法・タイプ別おすすめフォント設定例
この記事では、フォントを指定するためのCSSプロパティ「font-family」の書き方について一から詳しく解説します。font-familyを設定したことが無い方でも、正しくフォントが指定できるように、プロパティの書き方から、OSごとの設定の違い、おすすめのフォント設定例などもご紹介します。 「font-familyはいつもコピペしている…」なんて方も、正しい知識が有るか無いかは大きな違いです。ぜひこの機会に、font-familyの正しい設定方法をマスターしてください。 ※本記事は、各OSの標準インストールフォントや、ブラウザのアップデート状況などを踏まえて、なるべく最新の情報をお届けできるように、内容を随時更新しています。著者の調査した情報に基づいて執筆しているため、内容に間違いや不備のある可能性もあります。（最終調査日：2025年6月） font-familyの役割とは CSSのf
CODE CLUB 965
こんにちは！CODE CLUB965のKです！ スマホが普及した今では、PC画面だけでなくスマホやタブレットのレスポンシブ対応は当たり前のようなものです。 そんなときにPCではテキストを改行しなくていいけど、スマホでは改行したいといった場合があると思います。 今回は、それを簡単に実現できる方法について紹介したいと思います。 CSSで設定するだけ実現するのはとてもシンプルです。 まず、改行のタグ（br）に適当なクラス名をつけて、スマホの時だけ改行したい箇所に入れます。 <p>質問したいことがありましたら<br class="sma">お気軽にご連絡下さい。</p>こんな感じで入れます。 あとは、CSSファイルで以下のように記述するだけです。 /*PCでは無効（改行しない）*/ .sma{ display: none; } /*スマートフォンでは有効（改行する）*/ @media screen
ブレークポイント～Bootstrap5設置ガイド
各ブレークポイントは、幅が12の倍数であるコンテナを快適に保持するために選択されている。ブレークポイントは、一般的なデバイスサイズとビューポートの寸法のサブセットも表している。これらは、すべてのユースケースやデバイスをターゲットにしているわけではない。代わりに、範囲は、ほぼすべてのデバイスに構築するための強力で一貫した基盤を提供。 これらのブレークポイントはSassを経由してカスタマイズできる。これらのブレークポイントは _variables.scss スタイルシートのSassマップにある。 デフォルトの設定 scss/_variables.scss 内 grid-breakpoints の設定$grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px ); Sassマップと変数を
スマホとパソコンで改行の位置を変更して、デバイスごとにテキストを美しく整える方法 – ワードプレステーマTCD
スマホとパソコンで改行の位置を変更して、デバイスごとにテキストを美しく整える方法 2020.06.06 2022.10.12 スマホからWEBサイトを閲覧することはもう当たり前です。 サイトを制作する側も、スマホからの見え方を必ず意識する必要があります。WordPressを活用する際もレスポンシブ対応のテーマを使って終わりではありません。デザインや大枠の部分は最適化されて表示されても、テキスト部分はどうでしょうか？変なところで改行されて字余りになったり、バランスが悪くなっていたりしませんか？ 弊社で販売しているテーマでもスマホとPCで表示するコンテンツを別々に設定することができるテーマはございます。しかし、デバイスごとのテキストの改行位置まで自動認識できる機能は、まだございません。 というわけで、今回はHTMLとCSSを少しだけ使って、閲覧するデバイスによってテキストの改行位置を変更する簡
CSS Grid Layout を極める！（基礎編） - Qiita
CSSをちょっと書けば、こんなレイアウトが出来てしまいます！ 当記事では、こんなレイアウトを可能にする CSS Grid Layout の解説をしていきます。 尚、CSS Grid Layout は現時点（2017年4月）ではまだ新しいモジュールのため、対応ブラウザが少ないです。 （Fx52～、GC57～、Safari10.1～、Opera44～ など） Can I use... CSS Grid Layout しかし、2017年3月にはFirefox, Google Chrome, Opera, Safari などが CSS Grid Layout 対応のバージョンをリリースしており、今後に対応ブラウザが急増するのは確実なので、ぜひともマスターしておきたいです。 この記事は4部構成の中の 基礎編 です。 CSS Grid Layout を極める！（基礎編） ←これ CSS Grid La
CSSで!importantを使った優先順位の変更【初心者向け】
CSSで!importantを使った優先順位の変更【初心者向け】 初心者向けにCSSで!importantを使った優先順位の変更方法について解説しています。ユーザー定義のスタイルシートを使う際など役に立つでしょう。実際にコードを書きながら例をもとに説明しているので、ぜひご覧ください。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査 今回はCSSで!importantを使った優先順位の変更を説明します。 CSSの記述が多くなると思い通りのスタ
CSSで複数行のdtとddを横並びにする方法【初心者向け】
初心者向けにCSSで複数行のdtとddを横並びにする方法について解説しています。dl・dt・ddタグは定義リストと呼ばれる要素で用語の後に説明が続く形で使います。今回はdtやddタグを横並びにする方法について学びます。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査 CSSで複数行のdtとddを横並びにする方法について解説します。 dt要素とdd要素を改行させないcompact属性ががHTML5から廃止されたので、CSSで調整する必要があり
とっても使えるoverflowプロパティ。その使い方色々。
光の4戦士を買ったんすが、売り文句通りレトロな感じがしていいですね。 まぁまだ2, 3時間程度しかやってないんで、これからどうなるか分かりませんが時間を見つけてやって行こうかと。 さて、以前からoverflowプロパティは使い勝手が良いというか、使う場面が多いプロパティの一つですが、考えてみると色んな事に使ってるなぁ～と思ったので自分が良く使うのをまとめてみました。 あんまoverflowプロパティを使った事が無い方は、ビックリですよ！ これで、ソコの可愛いアナタもoverflowプロパティの虜になる事間違い無し！！（わかんないけど サンプルとかは以下よりどうぞ。 サンプルサイトを見る サンプルをダウンロード 基本的に、全てoverflow: hidden; の指定を足す事で解決したり実現出来る感じです。 01 clearfixみたいに使う まずは以前の「clearfixを使わないでやるに
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTMLの< a href="tel:" >でリンクをタップして電話を発信させる方法
CSSの重複をチェックし削除するためのツール2選
CSSやtype属性でinputの全角・半角入力を切替える [無料ホームページ作成クラウドサービス まめわざ]![CSSやtype属性でinputの全角・半角入力を切替える [無料ホームページ作成クラウドサービス まめわざ]](https://cdn-ak-scissors.b.st-hatena.com/image/square/9b4bb8a4a33a630fad5b2f5407193da0266fb2eb/height=288;version=1;width=512/https%3A%2F%2Fmamewaza.com%2Fimg%2F1466210908981s.jpg)
2021年の電子メールの実装：テーブルの間隔と垂直方向の配置に関するOutlookの詳細 | Kentico Kontent.
https://help.zoho.com/portal/ja/kb/campaigns/user-guide/email-campaigns/other-campaign-activities/articles/outlook%E5%90%91%E3%81%91html%E3%82%A8%E3%83%87%E3%82%A3%E3%82%BF%E3%83%BC%E3%81%AE%E3%83%99%E3%82%B9%E3%83%88%E3%83%97%E3%83%A9%E3%82%AF%E3%83%86%E3%82%A3%E3%82%B9
【CSS】テキストエリアの高さを行数で指定する本当に正しい方法 | PisukeCode - Web開発まとめ
アイキャッチ画像をCSSで制御する | よもやまチョモランマ