サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
デスク環境を整える
www.ameamelog.com
こんなことができちゃうんです。 色んな使い方ができそうですね。 「:not」の記述方法 :not(セレクタorクラス) { 指定したセレクタorクラス以外に適用したいCSS } 「:not」の後ろに、除外したいセレクタもしくはクラス名を指定します。 セレクタで指定する例 <ul class="example"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <li>が5つ並んだHTMLです。 「3番目以外の<li>」を赤色にしてみます。 .example li:not(:nth-child(3)) { background: red; } CSSはこのように書きます。 3番目以外の<li>が赤色になりました。 クラスで指定する例 <ul class="example"> <li>1</li> <li>2</li>
「table-layout: fixed;」の使い方 基本の使い方 セルごとに文章量の違う表組を作ってみました。 「table-layout」プロパティを何も指定しない（初期値：autoと同様）とこのようになります。 列幅は、文章量が多い列が長くなり、少ない列が短くなっていますね。 では、この表組に「table-layout: fixed;」を指定してみます。 するとこのように、列幅が均等に分割されました。 列数がいくつあってもすべて均等幅になります。 表示している画面のサイズから自動で計算し、均等に列幅を調整してくれるのです。 一部の列幅だけ指定したい場合 すべての列幅を均等にするのではなく、一部だけ「○px」に固定して、残った列の幅を均等にすることもできます。 CSS table { table-layout: fixed; } table th:first-of-type { wid
募集要項ページによくある「応募フロー」。 サイトのユーザーにとって、フローの見やすさはとても重要です。 シンプルに<table>で組む場合が多いかもしれません。 ここをおしゃれに&見やすくすればコンバージョン率も上がる可能性も。 今回はおしゃれな応募フローのデザインを5パターン用意しました。 いずれもコピペで利用できます。 応募フローのみならず、ステップ系のレイアウトには大体流用できると思います。
HTML・CSSを勉強し始めると、まずブロック要素とインライン要素の違いを理解するのに苦戦しますよね。 そしてやっと理解し始めた頃に現れる、「inline-block（インラインブロック）要素」。 混乱しそうになりますが、ブロック要素とインライン要素が分かっていれば難しいことはありません。 Webサイトを構築する上で頻繁に使うことになるので、覚えておきたいプロパティです。 「display: inline-block」とは何か、何ができるのか、実際にどうやって使うのか。 詳しく掘り下げて解説していきます。
まずは普通に組んでみる HTML <div class="example"> <figure><img src="" alt="画像"></figure> <div class="txt"> <h1>タイトル</h1> <p>テキストテキストテキストテキストテキスト</p> </div> </div> CSS .example { display: flex; align-items: center; } .example .txt { background-color: #fff; padding: 30px; } ブラウザによってベンダープレフィックスが必要になります。 2019年最新のベンダープレフィックスは下記記事をご覧ください。
レイアウトにとても便利なFlexboxですが、必要なベンダープレフィックスがよくわからなかったり、都度都度記述するのが面倒だったりします。 IEのサポートが終了した2023年に必要なベンダープレフィックスを、ワンクリックでコピーできるようにまとめましたので、是非ご活用ください。 「Can I Use.」を基に、主要ブラウザの直近2バージョンに必要なベンダープレフィックスを記述しております。 簡易一覧表 各プロパティの一覧表です。 「コードをコピー」をクリックすると、ベンダープレフィックス付きのCSSがクリップボードにコピーされます。 Flex container プロパティ 備考 値 コード display アイテムを横並びにする設定 flex コードをコピーコピーしました flex-direction アイテムの並びを縦か横か配置方法の設定 row コードをコピーコピーしました row-
ページスピードは、Webサイトにとって非常に重要な項目の1つです。 ユーザーの離脱率に大きく影響するため、Web製作者はページスピードを意識しながら制作しています。 自身のサイトのページスピードがどの程度であるかを知るには、Googleが提供している「ページスピードインサイト」というツールを使うのが一般的です。 ページスピードインサイトで指摘されやすく、ページスピードが下がってしまう原因の1つに、「オフスクリーン画像の遅延読み込み」という項目があります。 この項目を解消するためには、「画像を遅延読み込みする」もしくは「プログレッシブ画像を使用する」のいずれかの対応が必要になるのですが、後者で対処する方が望ましいです。 その理由と、それぞれの使い方について詳しく説明していきます。
Flexbox、使っていますか？ 機能がありすぎて使うのに躊躇してしまっていたり、正直あまり使いこなせていなかったりしていませんか？ 私ははじめ、どのプロパティを使えば良いのか悩んで悩んで、結局使わずにfloatやdisplay: table;などを使ったりして使用を避けていましたが、使い始めたらとても便利でした。 Flexboxのプロパティには数多くの種類があってとっつくにくい印象を受けますが、実は実際の制作現場で使用するものはそこまで多くありません。 今回は、現場でよく使用するプロパティを、使用例とあわせてご紹介します。 これだけ覚えておけば、サイトを構築する上でほとんど不自由はないと思います。
点線の作り方 線の幅が「3px」、間隔が「5px」の点線を作ると想定してご説明します。 まずはHTMLを記述します。 <div class="example"></div> 次に、CSSで点線を作っていきます。 以下3つのプロパティを使います。 点線の1セットをつくる 「1セット」とは、赤枠で示した部分のことです。 この1セットを作って、あとは「background-repeat」で繰り返し表示するイメージです。 「background-size」で大きさを設定 background-size: 8px 1px; まずは1セットの枠の大きさを設定します。 線の幅が「3px」で間隔が「5px」⇒「8px」と指定。線の高さが「1px」⇒「1px」と指定。 「background-image」+「linear-gradient」で点線を描く グラデーション（linear-gradient）を使っ
このページを最初にブックマークしてみませんか？
『www.ameamelog.com』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
