知名度が低いウェブ標準ひとり Advent Calendar 2021 – 16 日目 今日は place-items です。align-items と justify-items の一括指定版です。 place-items – CSS: カスケーディングスタイルシート | MDN デモ:https://codepen.io/ginpei/pen/QWqpWNz 基本的な使い方 display: grid と一緒に使いましょう。
![place-itemsで縦横中央寄せ(知名度が低いウェブ標準ひとりAdvent Calendar 2021 – 16日目) | Ginpen.com](https://cdn-ak-scissors.b.st-hatena.com/image/square/45f8debb2bb2ca504d5f3c7a06e76bd9c1da7566/height=288;version=1;width=512/https%3A%2F%2Fginpen.com%2Fwp-content%2Fuploads%2F2021%2F12%2FScreen-Shot-2021-12-15-at-11.05.33.png)
ページのコンテンツが少なくても、フッタを一番下に配置するCSSのテクニックを紹介します。コンテンツが多ければ、成り行きで配置されます。 フッタの高さは自由で、CSS GridやFlexboxやcalc()は使用せず、追加のラッパーも必要ありません。シンプルなHTMLに、数行のCSSで簡単に実装できます。 A Clever Sticky Footer Technique by Chris Coyier 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに コンテンツが十分な量でなくてもフッタを一番下に配置する方法 はじめに 「スティッキーフッタ」というと、ページをスクロールした時にぴたっと固定表示されるposition: sticky;を思い浮かべる人が多いと思います。 しかし、それはここで話すこととはすこし異なります。 「ス
徐々に日本でもメジャーなデザインツールとなっている「Figma」。前回の記事『FigmaのSmart Animateを活用したプロトタイプ入門』では、簡単にアニメーションを実現できる「Smart Animate」機能を紹介しました。 本記事ではデザイン制作とその後のコーディング作業を強力にサポートしてくれる「Auto Layout」について詳しく紹介します。「Auto Layout」はデザインを効率よく進められるだけでなく、デザイン段階でHTML・CSSコーディングの参考になる情報を追加できます。 デザイン段階での使い方はもちろん、Figmaでデザインを受け取ったエンジニアがどう考えて実装していくべきかまで紹介します。デザイナーはもちろん、Figmaで作られたデザインファイルを受け取る可能性があるエンジニアの方も是非ご覧ください。 Auto Layoutとは 「Auto Layout」とは
フォームの実装で面倒なのがフォーム要素とテキストを揃える、特にチェックボックス・ラジオボタンとテキストをベースラインに揃えることです。 flexboxでalign-item: baseline;を使用すると、チェックボックス・ラジオボタンとテキストを揃えるのは簡単に実装できます。複数行のテキストにも対応します。 <div class="flex-demo --start checkbox-input"> <label for="demo"><b>flex-start</b> 複数行の長いテキストでも大丈夫</label> <input type="checkbox" id="demo"> </div> <div class="flex-demo --center checkbox-input"> <label for="demo2"><b>center</b> 複数行の長いテキストでも大丈
テキストを画像の上に配置、タグを重ねたい、ヒーローセクションで画像の上にコンテンツを配置、画像のアスペクト比を維持させたい時など、CSSの絶対配置(position: absolute;)を使用することがあります。もちろん、それでうまくいく時はありますが、なんらかの制約があったり、テキストが長いと崩れたりします。 position: absolute;が必要だと思われていた実装で、使用しなくても実装できるモダンCSSのテクニックを紹介します。 Less Absolute Positioning With Modern CSS by Ahmad Shadeed はじめに ケース1: カードのオーバーレイ ケース2: カードのタグ ケース3: ヒーローセクション ケース4: display: contents; ケース5: カードアイテムの並べ替え ケース6: 中央寄せ ケース7: 画像のアス
Webページやスマホアプリに使用される一般的な定番レイアウトをCSS Flexboxで実装したシンプルなコードを紹介します。 ヘッダ・コンテンツ・フッタがあるレイアウトをはじめ、サイドバーがあるレイアウト、スマホに対応したカードの配置、高さを揃えたカード、異なる高さのカードを使用した価格表など、コピペで簡単に使用できます。 Evergreen CSS Flex Layouts With Live Demos by Miroslav Nikolov 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. Flexboxで実装するスマホに対応したカードのレイアウト 2. Flexboxで実装する高さが等しい複数のカード 3. Flexboxで実装したカードの高さをコンテンツベースにする 4. Flexboxで実装するコンテン
2021年3月4日 CSS CSS小技集シリーズの第4弾!「【第3弾】少しのコードで実装可能な15のCSS小技集」から約2年。またまた便利でサクッと使えるコードが続々登場しています!初心者さんからベテランさんまで要チェック! ↑私が10年以上利用している会計ソフト! 目次 要素の上下左右中央配置 画面幅いっぱいに画像を配置 リストマーカーの色を変える 言語にあわせて引用符を変更 クリックで文字列を選択 背景画像を見切れないよう繰り返し表示 入力時の縦線の色を変更 ドラッグで要素のサイズを変更できるようにする floatは flow-root で解除 文章をカラム分けしてラインを入れる HTML・CSSの全コードは各サンプルの「HTML」や「CSS」タブを、別タブでのサンプル表示は右上の「EDIT ON CODEPEN」をクリックしてご覧ください! 1. 要素の上下左右中央配置 ボックスを要
Flexboxでよく使用するプロパティと値をまとめたチートシートを紹介します。 コンテナ内にアイテムがどのように配置されるかを図やイラストで掲載しており、楽しく直感的にFlexboxの使い方を学べます。 FlexBox Cheat Sheets in 2021 by Joy Shaheb 同じ作者のCSS Gridのチートシートも翻訳しました。 CSS Gridでどのように配置されるかをまとめたチートシート 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Flexboxの構造 Flexboxの各プロパティと値 flex-directionプロパティ justify-contentプロパティ align-contentプロパティ align-itemsプロパティ align-selfプロパティ flex-grow | shrink
CSSのz-indexプロパティについてツイートしたところ、色んな人から参考意見をいただきました。 要素の重ね順の制御をその場しのぎで乗り切っているWebサイト、実はけっこう多いような気がします。今回はz-indexのベストプラクティスを自分なりに探ってみたいと思います。 z-indexに詳しいゼットインデクサーのみなさま、意見やアドバイスがあれば是非コメントを残していってください。 z-indexについて考えるときの前提 まず、ざっくりと考え方をまとめておきます。ウェブページの要素の重ね順を理解するには「スタッキングコンテキスト(重ね合わせコンテキスト)」を知っておく必要があります。 詳しくはz-indexとスタッキングコンテキストの関係 - ics.mediaがとても分かりやすいのですが、ここではざっくりとした説明だけ載せておきます。 z-indexは数字が大きい方が上にいくとは限らな
Masonryレイアウトとは、画像やカード型コンテンツをレンガ状に敷き詰めて配置するレイアウトです。Pinterestなどで見かける、高さが異なるカードを順番に配置するテクニックです。 今までは、JavaScriptで実装したり、Flexboxでも少し複雑なCSSで実装したりでしたが、CSS Grid Layout Module Level 3のドラフトが先日公開され、Masonryレイアウトをたった3行のCSS Gridで簡単に実装できるようになります。
Windowsのタスクバーはアプリケーションの切り替えや常駐プログラムの呼び出しなどに使われています。常に画面下や左右にあるので、ほとんど気にすることもないでしょう。 そんなタスクバーに並んでいるアイコンを中央に寄せて表示するのがCenterTaskbarです。 CenterTaskbarの使い方 デフォルトの表示です。 CenterTaskbarを起動すると中央に寄って表示されます。 左右の表示でも使えます。 CenterTaskbarを実行するとタスクバーのアイコンが中央に寄って表示されます。それ以上のことは特になく、普段通りに使えます。複数ディスプレイに対応し、パフォーマンスの劣化も少ないとのことです。普段の表示にちょっと飽きてきたという方はお試しを。 CenterTaskbarはWindows用のオープンソース・ソフトウェア(MIT)です。 mdhiggins/CenterTask
ChromiumベースのEdgeもリリースされ、最近のブラウザ状況は大きく変わってきました。知っておくと便利なCSSのプロパティを紹介します。 一昔前まではJavaScriptでないと実装できなかったもの、CSS Gridでの中央揃え、Flexboxでの中央揃え、リストのカラーを変更する方法、アイコンの横並び、タイル状の背景をいい感じに配置など、実践的なテクニックが満載です。 Uncommon CSS Properties by Ahmad Shadeed はじめに CSS Gridでの中央揃え place-itemsプロパティ Flexboxと古き良きmargin: auto; あまり知られていない::marker疑似要素 text-alignプロパティ display: inline-flex;プロパティ column-ruleプロパティ background-repeat: roun
この記事では、ウェブサイトを作成するときによくある間違いを、具体的なサンプル例と解決テクニックと一緒にまとめています。 一般的なランディングページでありがちな間違い 1. コンテンツがブロックに分割されていない 論理的なブロッグにグループ化することで、ユーザーが情報を理解しやすくなります。パディングを120〜180pxに設定し、背景色を活用して文字テキストだけのコンテンツを分割することができます。 コンテンツ間のパディングはほとんどなく、コンテンツを分割するために背景色の利用が必要。結果として情報を要約するのがむずかしく、どこに何が書かれているのかわかりにくい(上) パディングを十分に確保し、ブロックごとに色で区切られており、どこまでがコンテンツに含まれるのかすぐ分かります(下) 2.Webページのアイテム間の余白スペース幅が不揃い 論理的に分割されたブロックの周りには、同じサイズのパディ
アイコンのサイズをテキストに揃えて配置する時、どのように実装していますか? テキストのサイズぴったりにアイコンを簡単に配置できるCSSの新しい単位「lh」「rlh」が登場します。 'lh' and 'rlh' units 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSS Values and Units Module Level 4に見たこともない新しい単位がありました! lh それが使われている要素のline-heightプロパティの計算値に等しい rlh ルート要素(おそらく<html>要素)のline-heightプロパティの計算値に等しい これらの新しい単位が役立つシーンはどこだと思いますか? Šime Vidasの記事によると、
2019年9月現在、ルーターは YAMAHA RTX830 に替えて、1台で V6プラス + PPPoE 設定になっています。 RTX830 は実勢価格で 5万円弱しますので高いと感じられるかも知れませんが、私はなぜもっと早くから買わなかったんだろう、というくらい気に入っています。 信頼性・安定性が一番、機能が大変豊富で一般利用にはもったいないくらいですが、某B社や、某N社、某IO社、某ELE社などのルーターがいかに劣っていたのかを実感しました。 最近の記事にはこの RTX830 に関する記載をしています。 V6プラスの場合、使えるポートの制限から使えないサービスが出てきます。 このブログでも触れた PPTP、L2TP/IPsec や、一部ゲーム、一部の IP 電話(nifty フォンなど)などが使えません。 これらを使うために PPPoE と V6プラスの併用が必要になることがあります。
ナビゲーションを実装する時、アイテムを左端に詰めて配置したいけど、1つだけ右端に配置したい、そんな時はFlexboxでオートマージン(margin: auto;)を使用すると簡単です。また、論理プロパティの効果的な使い方にも触れられているので、勉強になります。 How Auto Margins Work in Flexbox Flexboxにおけるオートマージンの仕組みをさらに詳しく知りたい方は下記の記事も参考になると思います。 CSS Flexboxで配置する時に知っておくと便利!オートマージン(margin: auto;)の仕組みと効果的な使い方 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Flexboxでのオートマージンの仕組み Flexboxのオートマージンについてmagic of flexbox and auto
Flexboxも、margin: auto;も、CSSでよく使うプロパティです。 このFlexboxとオートマージン(margin: auto;)を組み合わせると、さまざまなレイアウト・配置ができます。例えば、ナビゲーションのアイテムを配置する際に、ロゴだけ左端に、検索を右端に、といった配置もオートマージンが活躍します。 オートマージン(margin: auto;)の仕組み、CSS Flexboxとオートマージンの効果的な使い方を紹介します。 Flexbox: Aligning with Auto Margins by Samantha Ming 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Flexboxにおけるオートマージンの役割 マージンについて理解する オートマージンが常に優先される オートマージンの効果的な使い方 F
CSS Flexboxの基礎となる考え方や構造、各プロパティの使い方を一通り学べるチュートリアルを紹介します。チュートリアルはステップ形式で、簡単なものから始まるので独学の人、そして初心者にもオススメです! 30日分のチュートリアルですが、1日分は3分くらいなので、正味1,2時間でCSS Flexboxをマスターできると思います。 Flexbox30 -GitHub by Samantha Ming 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1日目: Flexboxとは Flexboxの前は、レイアウトをするためにfloatを主に使用していました。CSSのデベロッパーは、floatは古い方法で限界があり、フラストレーションが貯まることをよく知っています。 しかし、現在は違います! レスポンシブ対応の柔軟なレイアウトはもちろ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く