[B! css] shoh8のブックマーク

shoh8 id:shoh8

cssに関するshoh8のブックマーク (4)

Web制作者はダウンロードしておきたい！ CSS関連の最新版チートシートのまとめ
CSS GridやFlexboxで配置するプロパティ値は？先頭の3つだけを指定するセレクタは？という﹁あれは何だっけ？﹂に役立つのが、チートシートです。 CSS GridやFlexboxの各プロパティ・値でどのように配置されるのか、セレクタやnth-child()やdisplayやposition、VS CodeやGitのコマンドがまとめられたチートシートを紹介します。チートシートは高解像度版が用意されており、ダウンロードしておくと便利です。 CheatSheets -GitHub チートシートはすべて、﹁ご自由にダウンロードしてご利用してください﹂とのことです。チートシートは高解像度版を無料でダウンロードでき、モニターの壁紙や印刷して机の脇に貼っておいても便利です。では、どんなチートシートがあるのか紹介します。まずは、CSS Flexboxのチートシート。Flexboxの各プロ
shoh8 2024/05/29
あとで読む

ツール

css
リンク
それでも私が<wbr>でなくinline-blockで改行調整をする、たった1つの理由
inline-block を使う理由、それは入れ子構造を作れることにより、改行位置の優先順位をつけられるから！詳しくは以降で説明します。︵前提︶そもそも改行調整ってなんの話？このタイトルを見て記事を開いた方であれば知っていると思いますが、一応説明です。スペースで単語が区切られる欧文とは違い、日本語は単語の区切りがないので、改行すべき位置を機械的に判断できず、不自然な位置で改行されてしまうことがあります。そこで、見た目を整えるため、改行すべき位置を指定するための手法が必要になります。他に詳しい記事がいくつもありますので、詳細はそちらを参照してください。代表的な改行調整の手法 <wbr> 要素 <wbr>要素は、改行してよい位置を表す要素です。親要素に対して word-break: keep-all; を指定して基本的には改行されないようにすることで、<wbr>要素がある位置で
shoh8 2024/03/24
過剰に使いたくないけど、調整しないといけないところだとしょうがなくなる。いいレイアウトのサイトは開発者ツールで見ちゃうなあ

css

web
リンク
9年モノの Rails アプリで、古い Bootstrap を剥がして FLOCSS 化した話 - 弥生開発者ブログ
こんにちは、弥生 Misoca チームでマークアップをする方のデザイナー @kanizmb です。今回、約1年をかけて古の Bootstrap の撤去および CSS 設計手法の導入︵FLOCSS 化︶をやり遂げたので、これらの変更をどのように進めていったかについてお話しします。どういった状況だったか Misoca ローンチは 2011年、当時最新であった Bootstrap 2.3.2 を用いて構築が始まりました。(*1) 当初は請求書の郵送に特化した非常にシンプルなサービスだったため、少しの上書きでスムーズに開発が進められ、Bootstrap のメリットを存分に生かせていたのだと思います。しかし時は流れ、取引先管理、品目管理、外部サービスとの連携など、機能が増え続けるとどんどん綻びが出始めます。設計方針もないままに野放図に差し込まれた CSS たちは、いつしか激しい詳細度バトルを
shoh8 2020/08/21
難手術。

css

開発
リンク
【2020年夏】imgタグにはwidthとheight属性を書くのがいいらしい
そうなんです。 2020年夏、ページの読み込み中にレイアウトがシフトしないように、img要素にはwidthとheight属性を記述するのがいいらしいんです。 <img src="link/to/image.jpg" width="300" height="400" alt="画像の説明"> その昔、これが普通の時代もあったんですけどね。レスポンシブな時代にはwidthとheight属性を書かないのが一般的（？）になっていました。また、widthとheight属性が記述してあってもCSSでwidth: 100%; height: auto;が指定されているとレイアウトシフトが発生してしまっていました。参考： img要素のサイズ属性の記述の有無についてのTwitterのアンケートなんでいまさら？なぜなら、2019年の後半にブラウザにレイアウトシフトを回避するための新たな機能が実装されたか
shoh8 2020/07/02
ブラウザ

css
リンク
1

お知らせ

もっと読む

公式Twitter

@HatenaBookmark
リリース、障害情報などのサービスのお知らせ
@hatebu
最新の人気エントリーの配信

キーボードショートカット一覧

j次のブックマーク

k前のブックマーク

lあとで読む

eコメント一覧を開く

oページを開く

設定を変更しましたx