フレックスアイテムの折り返しをマスターする - CSS: カスケーディングスタイルシート | MDN
CSSBeginner's tutorialsYour first website: Styling the contentCSS styling basicsCSS とは何かCSS 入門課題: 経歴ページのスタイル設定基本的な CSS セレクター属性セレクター擬似クラスと擬似要素結合子ボックスモデル競合の処理CSS の値と単位CSS におけるアイテムのサイズ設定背景と境界線コンテンツのオーバーフロー画像、メディア、フォーム要素表のスタイル設定CSS のデバッグ課題: 基本的な CSS の理解課題: 美しいレターヘッド付きの便箋の作成課題: かっこいいボックスCSS text styling基本的なテキストとフォントのスタイル設定リストのスタイル設定リンクのスタイル設定ウェブフォント課題: コミュニティスクールのホームページの組版CSS レイアウトCSS レイアウト入門浮動ボックス位置指定
CSSで文字詰めができる【font-feature-settings】を使用してサイトの見栄えを良くしよう！
font-feature-settingsプロパティとは font-feature-settingsプロパティの読み方 font-feature-settingsプロパティは「フォントフィーチャーセッティングス」と読みます。 font-feature-settingsプロパティの説明 font-feature-settingsプロパティは、OpenTypeフォントの文字詰めを行う機能です。OpenTypeフォントとは、現在アドビが提供しているフォントのこと。異なるプラットフォーム（WindowsやmacOSなど）仕様が異なるシステム上で稼働するフォントとなっています。 OpenType形式の主なメリットとしては、クロスプラットフォームで活用できること（同じフォントファイルをMacintoshとWindowsの両方で利用できます）、そして豊かな言語サポートと高度なタイポグラフィを可能にする広
【頻出デザイン】テキストと写真を交互にレイアウトするには『flex-direction: row-reverse;』
LPなどでテキストと写真が交互にレイアウトされているデザインを見たことはありませんか。今回はそのままコピペするだけで、テキストと写真を交互にレイアウトしたデザインを反映させることのできるコードを詳しく解説していきます。 結論：テキストと写真を交互にするためには『flex-direction: row-reverse;』と疑似クラス『nth-child(odd)』 テキストと写真を交互にするレイアウトを作るためには疑似クラス『nth-child(odd)』を使用したセレクタのプロパティ、値に『flex-direction: row-reverse;』を指定する必要があります。 それではここから、この『flex-direction: row-reverse;』と疑似クラス『nth-child(odd)』についての解説やそれ以外のコードについても順序立てて解説していきます。 <main> <se
文字詰めできるCSSのfont-feature-settingsが凄い！ 日本語フォントこそ指定したい自動カーニング - ICS MEDIA
游ゴシックではプロポーショナルメトリクスは効果的 WindowsやmacOSに搭載されている游ゴシック体は、仮名が漢字に対してかなり小さめにデザインされています。游ゴシック体ではヒラギノ書体より字間が開いて見えてしまうため、プロポーショナルメトリクスを活用する効果は大きいです。 Webフォントにもプロポーショナルメトリクスは効果的 デバイスフォントだけでなく、Webフォントでもプロポーショナルメトリクスに対応したOpenTypeフォントがたくさんあります。Webフォントに関しては記事「Webフォントサービスの徹底比較！ 和文フォントが使える5つのサービスの利点まとめ」を参考ください。 ▲左側は未指定（和文等幅）の状態でカタカナの開きが大きい。右側はプロポーショナル字形を適用した状態で、カタカナが詰まっている。 対応環境：ほぼすべてのブラウザで利用可能 これだけ便利なCSSですが、どれだけの
【CSS】画像のサイズ・縦横比・トリミング指定方法（初心者向け）
「画像のサイズ変更」「画像の縦横比を維持したままの指定方法」「画像のトリミング」の3点を中心に初心者のかた向けに解説。 3点の基礎知識に加えて、理解しやすく、すぐ実践的に使用できるようになる為、各方法をサンプルコード付きで解説。 実際に手を動かして学ぶことができますので、初心者の方も安心して読み進める事ができます。
CSSで何番目や何個分を前から、後ろから自由自在に指定するための疑似要素まとめ - YCOMのホームページの制作・運営に役立つブログ
わかりやすくまとめたつもりなので、ある程度わかってる人はこの表があれば備忘用には充分だと思います。 ここから下は、初心者のために補足的に説明入れておきます。 -child と -of-typeの違いの話 この特定の要素に対する指定の方法は大きく2つの指定方法があって、要素名つまりはタグの種類にかかわらず対象とする方法と、特定の要素に対してだけ（<P>だけとか）対象とする方法があります。 -childは要素の種類にかかわらず全てを対象として、-of-typeは特定の要素に対してだけ対象になります。 こんな感じですね。 図を見てもらったらわかるように、黄色いのが対象になる要素です。 複数の要素が混在しても、-childではすべての要素が対象になります。 -of-typeでは、その中の特定の要素（タグ）が対象です。 説明だけではわかりにくいので、以下の説明でのコードの例を簡単に見てみます。 最初
CSSでborderの上に見出しを重ねたボックスを作る - Qiita
.caption_box{ position: relative; margin-top: 1em; padding: 1em 2em; border: 1px solid black; } .caption_box .caption{ position: absolute; top: 0; left: 0; font-size: 1em; padding: 0 1em; margin: 0; background-color: white; transform: translateY(-50%) translateX(1em); } 解説 親要素にborderとposition: relativeを指定します。 子要素にposition: absoluteを指定、配置したい位置に動かします。 左上に配置する場合: top: 0; left: 0; 右上に配置する場合: top: 0; r
CSSのcalcで片側だけグリッドガイドライン外へ飛び出したカラム ｜ Tips Note by TAM
中央揃えになっている固定グリッド（Fixed grids）から片側だけ外へ飛び出させた装飾のカラムを リキッドレイアウトのレスポンシブデザインでスタイリングする方法です。 IE11も対応している CSSの calc() で相対値と絶対値をかけあわせたサイズを設定するので 画面幅がかわっても、片側は中央揃えのカラムとツラをあわせたまま（端をそろえたまま） もう片側は画面端までのびたサイズをキープできます。 ※IEはpaddingの仕様に落とし穴があったので、最終的にはIEバグ対策のJavaScriptも併用しています。 INDEX よくある中央揃えのレスポンシブなカラム アシンメトリーなカラム まとめ サンプルソース とりあえず実物から見てみたい方は、CodePenのサンプルソースからどうぞ！ See the Pen Asymmetry Column by webdev (@webdev-j
CSSボタンデザイン120個以上！どこよりも詳しく作り方を解説！
なぜCSSでボタンを作るのか？その前に、なぜCSSでボタンを作るのか？について少しだけ考えたいと思います。 簡単に言ってしまえば、 軽い！拡張性がある！解像度の心配がない！簡単！と言った理由ではないでしょうか？ 画像でボタンを作ることも多いと思いますが、「画像じゃないほうがいいなあ」と思うことも多いと思います。 もちろん、デザイナーから上がってきたデザインデータからボタンを切り取って、HTMLに設置して、CSSでホバーはopacity:0.8、とかやれば簡単ではありますが、デザインツールの進化やレスポンシブの一般化に伴い、そういったイケてなくて古臭いやり方はあまり望ましくないです。 特にWebの場合、テストの繰り返しが必要ですが、画像でボタンを作るとなるとテスト用にいくつもの画像を作らなくてはいけません。色やテキストを変えるとなると画像すべてを修正する必要があります。しかし、CSSボタンで
flexboxで要素の順番を入れ替える。 - Qiita
flexboxでbox内の順番を入れ替える、cssを紹介します。レスポンシブなサイトを使う時に結構使ったりするので覚えておくと便利です。 flexboxの入れ替え、orderプロパティ 以下を使います。
CSS | display:flexで横並びの個数を固定して折り返す方法 | 1 NOTES
CSSのflexbox（display:flex）で横並びで個数を固定して折り返す方法を紹介しています。 See the Pen CSS flexbox Fix the number by yochans (@yochans) on CodePen. display:flexで横並びの個数を固定して折り返すflexbox（display:flex）で横並びの個数を固定して折り返すサンプルコードです。 上記サンプルのHTMLコードです。 こちらを利用して実装方法を紹介しています。 <div id="container"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> </div>flexboxは個数を折返しまでの直接指定する事はでき
【検証】スマートフォンで読み易いfont-sizeとは？ | SEO対策なら株式会社ペコプラ
フォントサイズと行間は、ユーザーにコンテンツをストレスなく読んでもらう為の重要な要素のひとつです。 PCサイトでは、読みやすさはもとより、デザインも考慮した文字の使い方が多いと感じる一方、スマホ化されているサイトでは比較的どれも同じぐらいのフォントサイズが使われている為、ここは改めてどれぐらいのフォントサイズが読みやすく、よく使われているのかを検証しました。 読みやすいフォントサイズとは？読み物系30サイトを検証 検証するにあたり、まず「読みやすい」とは？ 読みやすい=多くの人が読んでいる=有名・人気サイト！ と言うことで、今回は記事を読ませる事を目的とした、ポータルサイト、バイラルメディア、キュレーションサイト、WEB系のブログなどから30サイトをピックアップしました。 検証方法は、本文と見出しのフォントサイズと行間をWhatFontというgoogleの拡張機能を使い調べます。 1番多か
現場で使えるFlexboxレイアウト12選 | BUILD Journal
現場で使えるFlexboxレイアウト12選Update2023.05.12Release2021.06.24Coding HatenaにシェアするTwitterにツイートするPocketにストックするFeedlyに登録する 現場で使えるFlexboxレイアウトを12パターン紹介します。flexboxを紹介する記事はたくさんありますが、知識のみで実例付きで紹介されているページはあまり見かけなかったので、本記事にて詳しく紹介していきます。 flexboxに慣れていない方だけではなくコードを短縮化させたい方も対象の内容となっております。ぜひご一読ください。 flexboxを使った横並び1行レイアウトflexboxを使った横並び1行レイアウトカードUIでよくある横並び1行レイアウトのFlexbox実装。同じ横幅のカードを等間隔で配置するもので、間の余白ももちろん等間隔。これを使う機会は多いので確実
HTMLとCSSのコピペでできるボタンデザイン50選
CSS /* 001 */ .button001 a { background: #eee; border-radius: 3px; position: relative; display: flex; justify-content: space-around; align-items: center; margin: 0 auto; max-width: 280px; padding: 10px 25px; color: #313131; transition: 0.3s ease-in-out; font-weight: 500; } .button001 a:hover { background: #313131; color: #FFF; } .button001 a:after { content: ''; width: 5px; height: 5px; border-top
スクロールすると上から降りてくる
HTML <body>直下 <div class="gmenu"> コンテンツ </div> css .gmenu { position: fixed; width: 100%; z-index: 100; top: -100px; //gmenuの高さ height: 100px; } .gmenu.fixed { position: fixed; top: 0; left: 0; } js $(function () { var headNav = $('.gmenu'); $(window).on('load scroll', function () { if ($(this).scrollTop() > 500 && headNav.hasClass('fixed') == false) { headNav.css({ "top": '-100px' }); headNav.add
【jQuery】ページ内リンクでスムーズスクロール（固定ヘッダーがあったら） | 125naroom / デザインするところ（会社）です。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> $(function(){ var headerHeight = $('header').outerHeight(); // ヘッダーについているID、クラス名など、余白を開けたい場合は + 10を追記する。 var urlHash = location.hash; // ハッシュ値があればページ内スクロール if(urlHash) { // 外部リンクからのクリック時 $('body,html').stop().scrollTop(0); // スクロールを0に戻す setTimeout(function(){ // ロード時の処理を待ち、時間差でスクロール実行 var target = $(urlHash);
よくあるグローバルナビのCSSをじっくりコーディング
WEBサイト制作でよくある見た目のグローバルナビのHTMLとCSSをコーディングした際、考えることが予想よりも多くありました。コーディングの流れをじっくり解説します。 はじめに グローバルナビに以下のようなデザインが指定されているウェブサイトのHTMLとCSSのコーディングを行なっていました。（デザインは仮のものです） よく見る形だし、さくっと組めるかなと着手前は考えたのですが、やってみたら予想よりも考えなきゃいけないことが多くありました。CSSの良い復習にもなったので、自分へのメモも兼ねて、コーディングの流れをじっくり解説します。 なお、フレックスボックス（display: flex）を多用したコーディングを解説しますので、対応ブラウザにはご注意ください。 デザイン仕様の確認 コーディングを始める前に、デザインカンプからコーディングに必要な情報を抜き出して整理します。 項目の横幅 まず、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
リンクを全体に広げる方法【CSS】
grid不要！PCとスマホで要素の順番が全然違うときのcss小技
【CSS】縦・横・斜めに背景色(background)を2色で分ける方法 | Webエンジニア Wiki
