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

ホームページを製作する際、何度も繰り返し使うコードはスニペットとしてまとめておくと便利です。 スニペットとは「切れ端」「断片」という意味で、プログラミング言語の中で簡単に切り貼りして再利用できる部分のことです。 とりわけCSSは、HTMLやJavaScript以上に、繰り返して使うコードが多いので、そうしたコードをまとめておくとよいでしょう。 今回は、何度も打ち込まなくてもコピペで使える、保存しておくと便利なCSSスニペットをまとめてみました。 スニペットとしてテンプレート化することで、一部分を変えるだけで再利用することができます。 保存しておくと便利なCSSスニペット 1. CSSリセット さまざまなブラウザでデフォルトの表示方法がありますが、それらを同じように表示させるCSSリセットと呼ばれるテクニックがあります。 CSSのリセット化コードはさまざまありますが、画像のレスポンシブ化とm

注）本文中の「コンテナ」「アイテム」について 本文中でいう「コンテナ」「アイテム」は、flexコンテナとflexアイテムのことを指しています。 コンテナ display: flexや、wrap指定などをする 複数のアイテムを含む アイテム flex: 1 0 0%などの指定をする 1. アイテム潰れる問題（Safari） Chrome Safari 潰れてますね。 起きる条件 Safari なぜ コンテンツの最小サイズを尊重してくれない模様 どうすればいいのか flex-shrinkに0を指定 flex-basisにautoを指定（デフォ値なので、指定がなければそのままでOK） Safari10にて修正済み（つまり、SierraとiOS 10以降では対応不要） 2. align-items:center はみ出す問題 Chrome IE11 はみ出てますね。 起きる条件 IE10-11 f

今回は、要素の重なり順を指定するCSSプロパティz-indexについて、分かりやすく解説します。

Webサイトを制作する際、CSSリセットを使用されている人が多いと思います。Eric MeyerのCSS Resetをはじめ、Normalize.css、Sanitize.css、そして最近ではReboot.cssが登場しました。 Eric MeyerのCSS Resetをベースに、marginやpaddingなどのスペースを上か下かのどちらかに統一できるようにカスタマイズされたCSSリセットを紹介します。 My CSS Reset/Base 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSSリセットについて margin, padding, borderのCSSリセット フォントのCSSリセット レイアウトとbox-sizingのCSSリセット 特定要素のCSSリセット 属性と状態のCSSリセット スクリーンリーダー専用の

いずれもli要素と組み合わせて使えそうなリストアイコンのサンプルで、画像は使用せずに全てCSSのみで実装してみたものです。 最近ならwebフォントやSVGで使い勝手良いものが実装できたり、あとは使用できるブラウザは限られてきたりしますが、問題ないブラウザであればサイズやカラー変更といったこともCSSのみで簡単に変更できます。 はじめに 最後のサンプルのみol要素使ってますが、その他に関しては全てHTMLは下記のように単純なul, li要素を使ってます。 <ul> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li> <li>Lorem ipsum dolor sit amet,

position:fixedでヘッダーを固定しているデザインでページ内リンクを設定すると、リンク先へジャンプした時にヘッダの高さ分、位置がズレてしまうのをどうにか出来ないものか…と格闘したので、その対処法のメモです。 単純にheaderの高さ分paddingとmarginで相殺する例えば、以下のようなソースに実装すると <div class="header"> ヘッダー </div> <div class="content"> <a href="#link01">コンテンツ</a> </div> <div class="content" name="link01" id="link01">リンク先</div>ヘッダの高さが80pxとした場合 .header { width: 100%; min-width: 960px; height: 80px; position: fixed; lef

ブラウザやOSによって異なるフォントですが、どの環境でも綺麗に表示されるゴシック体／明朝体を指定する方法について解説します。 この記事のポイント 様々な閲覧環境におけるフォントの表示を確認する どの環境で閲覧しても近い見た目のフォントを選ぶ Windows環境でも綺麗な明朝体を表示する 閲覧者の環境によって見え方が異なるフォント HTMLのフォントはfont-familyプロパティで指定することができますが、サイトを閲覧する人のOSやブラウザによって表示はかなり異なります。 それでも制作の都合上、可能な範囲で表示を同じように見えるよう整えたいものです。 そこで今回は、環境ごとのフォントの見え方を確認しつつ、ゴシック体や明朝体に整える方法について解説していきます。 Webフォントについては、別記事「Webフォントを使う」をご覧ください。 環境ごとのフォントの表示例 まずは、font-fami

こんにちは。 本日はテキストや画像を選択不可にするCSSプロパティのご紹介です。 最近ではネイティブアプリ（それぞれの言語でストアでダウンロードするアプリです）ではなく、Webベースでアプリ化するサービスも増えてきていますので、WebっぽくならないTipsです。 さっそくコード -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer */ -khtml-user-select: none; /* KHTML browsers (e.g. Konqueror) */ -webkit-user-select: none; /* Chrome, Safari, and Opera */ -webkit-touch-callout: none; /* Disable Android and

中央に配置したい要素に上記のCSSを指定することでヨコ・タテ中央配置することができます。 これで、画面中央に表示されているはずです。 画面中央ではなく、親要素の中央に要素を表示させたい場合には、要素の親要素に、position:static(初期値)以外のposition:relative;、potision:absolute;やposition:fixed;を指定してください。 その親要素を基準にヨコ・タテ中央配置になります。 サンプルではtop.left.right.bottomに0を指定していますが、これらの数値をいじっても問題はありません。 ただし、top.left.right.bottomの初期値はautoになっているため、これを解除するために指定しています。 そのため、topだけに80pxを指定するとタテ・ヨコ画面中央からタテのみ80px下に行く指定することも可能です。 mar

ーーーーーーーーー 追記 2020年10/15 この歳になるとこういう記事のアプトプット怖いですね。。 とりあえず周り見てると、こうやってる人多いです html,body{ font-size:62.5%; } って書いてあげて　そうすると 1.0rem が 10pxになるみたい。 そんで例えば24pxにしたい場合は2.4remって指定してあげるみたい。 以上。 ーーーーーーーーー いまだにレスポンシブ怖い、、、、。 なぜなら%とかemとかremのフォントサイズ指定があるから。。。 これらをなんとなくでしてる人。 途中で引き継いだ案件とかでpx以外が指定されててビビってしまった 僕とあなたへ捧げます。 😭 大前提 CSSのフォントサイズ指定方法は次の2つに分類 絶対値（absolute）....16pxって言ったら絶対16px 相対値（relative）....親要素のサイズによって可変

スマートフォンのフォントサイズは固定でいいのか問題 スマートフォンのコーディングでpxなどの固定値を使うとiPhone6 plusなどの画面幅の広い端末でフォントサイズが小さく違和感を覚えることがないでしょうか。 フォントサイズだけではなくマージンやパディングなどでも同じことが言えるのですが、画像はmax-width: 100%などとしているため画面幅に応じてある程度大きくなるのに対し、フォントサイズなどを固定値でコーディングしてしまうと、画像や画面幅に比べて小さく見えてしまい、余白が目立ったり不自然なレイアウトに見えることがあります。 デザイナーの本来の意図を汲み取るのであれば、画面幅が広くなったときはフォントサイズなどもそれに応じて大きくなるのが一番良いのではないかと思っています。 （追記） ただし、個人的にfont-sizeを拡縮できるようにして思ったのはどんなプロダクトでも推奨でき

レスポンシブでも使える、リストタグ（li）のCSSコーディング 公開日：2015/11/16 おはようございます、児島です。 突然ですが、皆さんHTMLでサイトを作成する時、一番よく使うタグは何ですか？ 通常なら「div、p、a、img、h」等でしょうか。 私の場合、リストタグ「li」です。 HTMLでサイトを作成していると、様々なコンテンツをリストにして表示する機会が多くなります。 パンくずリストや、リンクリスト、コンテンツメニュー、コメントリスト等様々ですが、その全てで リストタグ「li」が活躍します。 コーディング初心者の方は、「div、p、a、img、h」等に加えて、リストタグ「li」のコーディングを覚えておくと良いかもしれません。 そんなわけで今日は、マルチスクリーンで役に立つリストタグのCSSコーディング方法を紹介したいと思います。 このページの目次 ・１、デフォルトであるイン

SANGOってどんなテーマ？画像出典元:WordPressテーマ「SANGO」20の魅力SANGOは、Webメディア「サルワカ」から生まれた有料WordPressテーマです。SANGOにはたくさんの魅力があります。ブログ、アフィリエイト、企業ホームページ、様々な用途できっと活躍するはずです。 引用元:WordPressテーマ「SANGO」20の魅力 美しく、ついつい訪れたくなるデザインは、販売開始直後からブロガーを中心に大きな話題になりました。 テーマを作成したサルワカのファンだった私。もちろん購入したので、今みなさんが見ているこのブログのテーマはSANGOを使っています。 なぜSANGOをカスタマイズするのか？SANGOはそのままで使っても、本当にすばらしいテーマです。カスタマイズの必要もないくらいに。 それでも私がSANGOをカスタマイズするのは…ただの趣味です。 あとは「読まれるブロ

【入門向け！】独学に最適なHTMLを学べる学習サイト20選 初心者向けにHTMLを独学で学習できるサイトをまとめて紹介しています。入門向けでかつ無料で利用できるので、これから始める人におすすめです。自分に合った学習スタイルでHTMLの勉強を始めてみてはいかがでしょうか！ テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法：インターネット調査 Web開発やデザインをやってみたいけれど、何から手をつければ良いか分からないという方もいらっしゃるかもしれませんね。 Web

意外と知らないCSSの小ネタ。

コーディングをしている人の助けになれればと思います。

これを適用すると、以下のような外観になります。元のスタイルがなくなり、右端の矢印も消えてなくなります。今のところ、ChromeやFirefoxでもappearanceはベンダープレフィックス（-webkit-や-moz-など）が必要です。 （キャプチャは Mac版Chrome） なお、自動的に最新バージョンを使うことになるのであまり気にすることはないと思いますが、Firefox30〜34では「-moz-appearance: none;」が機能しないというバグがあったようです。 詳しくは、GitHub「How to hide <select> dropdown’s arrow in Firefox when using “-moz-appearance: none;”.」で書かれています。この不具合はバージョン35で修正されたということで、35、36で確認したところ問題ありませんでした。

jQueryを使うと簡単にタブを実装することができます。しかし、ただタブを作るだけではなく、他ページから任意のタブにアクセスしたい・・・なんて事はありませんか？ 例えばタブが3つ並んでいる場合に、他ページから遷移して2番目のタブをアクティブにしたい・・・等。 今回は、jQueryを使用して特定のタブにダイレクトリンクする方法をまとめてみました。 [jQuery]別ページから特定のタブにダイレクトリンクする方法 [サンプル] ここではリンク元ページをtab.html、タブページをtab2.htmlとしています。 tab.htmlにあるhrefの「#」以下を取得して、リンクに応じたタブを表示させる方法を記述します。 デモページはこちらです。 2016/04/07[追記]：ダイレクトリンクではなく、特定のタブをアクティブにするだけが良い場合はこちらの記事をご参考までに。 [jQuery]パラメー