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
【HTML】pictureタグで画像をレスポンシブに切り替える方法を解説 | ZeroPlus Media
この記事では、「pictureタグを使ってレスポンシブに画像を切り替える方法」について解説します。 レスポンシブデザインのWebサイトでは、モバイルサイズ時とPCサイズ時で、別々の画像を表示したいときがあります。pictureタグを使えば、CSSやJavaScriptを使わずに画面幅に応じて画像を切り替えられます。 そのほかにもpictureタグを使うことで、ブラウザごとに拡張子を変更することもできます。webp拡張子に対応しているブラウザならWebP画像を、そうでないブラウザならpng, jpg, svgなどの画像を表示する、というように切り替えることで、ユーザビリティの向上が図れます。また、画像の切り替えにJavaScriptやCSSが不要なため表示スピード向上にもつながります。 いっしょにpictureタグについて学習していきましょう！ プログラミング学習でこのような経験はありません
WordPress:global-styles-inline-cssとwp-block-library-cssは何？削除していいのか？方法は？ ｜ けーちゃんの個人サイト
アフィリエイターけーちゃんの個人サイトです。アフィリエイトをやっていて疑問に思ったことやサイト構築などについてきままに投稿しています。
A4サイズ印刷専用WEBページを作る方法について
WEBページをA4サイズで印刷できるようにする場合、様々な設定が必要になります。 A4で連続して印刷される場合と、A4用紙1枚で収まるケースとでCSSが変わってきます。 印刷ボタンを非表示にしたり、ヘッダー・フッターを非表示にする設定も忘れずにおこないましょう。 任意に印刷向けWEBページを作る 本記事はA4印刷向けのWEBページを作る大まかな手順です。 印刷を前提としたページを前もって準備するタイプですね。 印刷を前提としていないWEBページをユーザーが印刷する場合、ある程度ユーザー任せで構わないと思います。 元々印刷向けに作っていない事を唄っておけば、多少レイアウトが変でも文句は言われないはずです。 あえて印刷ボタンを準備するケース しかしあえて印刷専用ページとして公開する場合は、きちんとした整備が必要になります。 まず内容はA4判サイズに収まるコンテンツを準備するようにしましょう。
【CSS】flex-directionで要素を縦並び・横並びにする方法を解説 | ZeroPlus Media
Web制作において、要素を「縦並びにしたい」「逆並びにしたい」と思うことはありませんか？ flex-direction プロパティを使用することで、簡単にflexアイテムの方向や並び順を変えられます。flexアイテムの配置を変えることは、レイアウトのアクセントづけやレスポンシブ対応の際に便利です。 この記事では flex-direction の使い方を解説します。サンプルを用意しておりますので、それぞれの値を指定したときにどのような表示になるのかを確認しながら学習していきましょう。 プログラミング学習でこのような経験はありませんか？ 目標に向けて何を学べば良いかわからない調べても解決策が見つからない現場レベルのスキルが身につくのか不安これらの悩みは、学習環境を整えることで全て解決することができます。 ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。 なんでも相
GTMとGA4でモーダルウィンドウの表示を計測する方法【コンテンツの最適化】 | Web改善のレシピ
GA4が難しいと思っている方へ、全体像が理解できる無料eBookを作りました。 以下のページからダウンロードしてご利用ください。 →無料のeBookをダウンロードする ※新規タブでフォームが開きます。 こうしたお悩みに応える記事です。 モーダルウィンドウとは、Webサイト上でユーザーへのお知らせなどをポップアップ表示する小さな画面のことです。バナーやボタンを配置し、申し込みフォームへの誘導枠として使用しているWebサイトも多いでしょう。 モーダルウィンドウの表示やクリックは、Google タグマネージャーを使用することで計測可能です。 モーダルウィンドウが意図通りにユーザーに見られ、コンバージョンに寄与しているのかを把握したいというWeb担当者の方もいるのではないでしょうか。 モーダルウィンドウの表示回数を計測することで、次のようなことを把握し、それに応じた改善策を立てることができます。
HTMLで文字(テキスト)にアンダーラインを付ける方法【初心者向け】
HTMLで文字(テキスト)にアンダーラインを付ける方法【初心者向け】 初心者向けにHTMLで文字(テキスト)にアンダーラインを付ける方法を解説しています。下線をつけることで文章が読みやすくなり、目立たせることができるはずです。難しい知識は必要ないので、HTML初心者でもぜひ覚えておきましょう。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査 この記事では、HTMLで文字(テキスト)にアンダーラインを付ける方法を解説します。 アンダーラインを
作って分かるHTMLメールの基本と使えるタグ／CSSまとめ (1/2)
Emailology - The Science of Looking Good in the Inbox HTMLの冒頭 実際にメールのHTMLを作成しましょう。HTMLの冒頭の文章型宣言は「XHTML 1.0 Transitional」を指定し、HTMLページの始まりを宣言しています。 head要素では、文字コード、ページタイトル、viewportを設定しています。HTMLの文字コードは「UTF-8」、Webページのタイトルを表すtitle要素は、空（から）です。viewportの設定は横幅をデバイス幅に、初期拡大率は1.0の等倍です。 ■HTML冒頭 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt
【html/CSS】下線の太さ,色,種類を変える方法
「aタグの下線の色を変えたい！」 「波線の下線を引きたい！」 下線の太さ、色、種類を変える方法を解説します。
【2023年版】font-familyの正しい指定方法・タイプ別おすすめフォント設定例
この記事では、フォントを指定するためのCSSプロパティ「font-family」の書き方について一から詳しく解説します。font-familyを設定したことが無い方でも、正しくフォントが指定できるように、プロパティの書き方から、OSごとの設定の違い、おすすめのフォント設定例などもご紹介します。 「font-familyはいつもコピペしている…」なんて方も、正しい知識が有るか無いかは大きな違いです。ぜひこの機会に、font-familyの正しい設定方法をマスターしてください。 ※本記事は、各OSの標準インストールフォントや、ブラウザのアップデート状況などを踏まえて、なるべく最新の情報をお届けできるように、内容を随時更新しています。著者の調査した情報に基づいて執筆しているため、内容に間違いや不備のある可能性もあります。（最終調査日：2023年7月） 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マップと変数を
HTMLメールでOutlookで崩れるときにする対策 | ocws BLOG
こんにちは。メルマガとかでHTMLメールを作るってこともあるかと思いますが、これがやったことある人はわかると思いますが結構やっかいです。 特にOutlook、、ここでもMicrosoftとかい！って感じなんですが、対応しないわけにはいかないわけで、いろんな人とあーだこーだして試行錯誤した結果、納得したやり方が見つかったので共有したいと思います。 あ、ちなみにここで書くことは、HTMLメールの基本的なところとあとはOutlookでも対応するため用の1つの例と大枠イメージを共有します！ まずは基本事項から まずは基本事項から押さえておきたいと思います。 何がなんでもTable構造 もうこれはお決まりです。HTMLメールの基本はTableレイアウトでお願いします。崩れたくなければ。 ちなみにtdの中とかにdivとかpとか書くのいいけど、padding系とかは使わない方がいいと思う スタイルはイン
アイキャッチ画像をCSSで制御する | よもやまチョモランマ
「アイキャッチ」だか「サムネイル」だか「サムネール」だか知らねえが。 function.phpに「small_thumb」「medium_thumb」「large_thumb」のサイズを記述して呼びだすのは、もううんざりです。 だって、あとからサイズを変えたくなったら、リサイズしてくれるプラグインを、わざわざ入れなきゃならないんだぜ。 というわけで、ちょっと調べました。 【参考】[WordPress] アイキャッチで出力される img タグ中のサイズやクラスを変更したり削除したりする なんということでしょう！ function.phpに //アイキャッチ画像をシンプルにする add_filter( 'post_thumbnail_html', 'custom_attribute' ); function custom_attribute( $html ){ $html = preg_rep
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
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開発まとめ
