CSSによるレイアウトの崩れやおかしな挙動を解決するテクニックのまとめ -Defensive CSS
WebページやUIコンポーネントのレイアウトの崩れ、おかしな挙動にあらかじめ対応しておくためのCSSのテクニックを紹介します。 FlexboxやCSS Gridによるレイアウトの崩れ、テキストが長いコンテンツ、固定の幅・固定の高さによるレイアウトの崩れ、子アイテムが増えすぎたり減りすぎたりで崩れたりなど、起こりがちな問題を解決する実践的なテクニックが満載です。 Defensive CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Flexboxでの折り返し スペースの確保 テキストが長いコンテンツ 画像の伸縮を防止する スクロールが連鎖するのを回避 CSS変数のフォールバック 固定の幅・固定の高さによるレイアウトの崩れ 忘れがちな背景の繰り返し 垂直のメディアクエリ justif
自己流の手順書フォーマットを公開してみた | DevelopersIO
手順書フォーマットは千差万別 みなさんは自己流または、組織やプロジェクトで定められた手順書のフォーマットはありますか? 私は自己流の手順書フォーマットがあります。 自己流の手順書フォーマットがあるといっても、かなり扱いがふわふわしているので、備忘やメモの意味合い強めでまとめていきます。 「もっとこうした方がいいよ!!」などフィードバックがあれば、ぜひお願いします! いきなりまとめ 手順書はExcelやスプレッドシートではなく、Markdownで書く 手順書はgitで管理する 5W1Hを意識して手順書を書く 基本的にはCLIを使った手順書にする 手順書はExcelやスプレッドシートではなく、Markdownで書く 手順書をExcelやスプレッドシートで書くメリット・デメリット 手順書をExcelやスプレッドシートで書いている方も多いと思いますが、私はMarkdownで書いています。 Exce
覚えておくと便利なCSSデザインTipsを9つ集めてみた | BUILD Journal
覚えておくと便利なCSSデザインTipsを9つ集めてみたUpdate2023.05.18Release2023.05.18Coding HatenaにシェアするTwitterにツイートするPocketにストックするFeedlyに登録する これまでは画像で表現していたデザインを今ではCSSのみで実装できるものが多くなってきました。今回は覚えておくと便利な現場で使えるCSSデザイン Tips を9個紹介します。いざという時に使えるものばかりですので、ストックしておくことをおすすめします。 見出しの改行位置をCSSで調整する見出しの改行位置を調整する見出しの文章が中央揃えである程度の文字数があると、スマホで見た場合意図したところで改行ができていないことがあります。上の動画をご覧ください。上側の文章は改行されると2行目3行目も中央寄りになるため、画面サイズによっては最終行が1〜3文字になってしまい
【保存版】CSS Flexboxでレスポンシブ対応のレイアウトを実装するHTMLとCSSのシンプルなコードのまとめ
CSS Flexboxで実装するWebページでよく見かけるレスポンシブ対応のレイアウト、カードレイアウト、ナビゲーションバー、サイドバー、聖杯レイアウトなどのHTMLとCSSのコードを紹介します。 コードは非常にシンプルなので、テンプレートやスニペットとして再利用できます。 Master CSS Flexbox 2021 🔥- Build 5 Responsive Layouts🎖️|| CSS 2021 by Joy Shaheb 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Flexboxの構造・各プロパティと値 実装の準備 Level 1: シンプルなカードレイアウト Level 2: ナビゲーションバー Level 3: サイドバー Level 4: 少し複雑なカードレイアウト Level 5: Holy Grai
デザイナーじゃなくても知っておきたい色と配色の基本 | knowledge / baigie
色は私たちの身近に存在する視覚要素であり、日々の生活や行動に多大な影響を与えています。しかし、美術やデザインの専門教育を受けない限り、これほど身近な色を体系的に学ぶ機会はほとんどありません。 近年、ビジネスの現場でもデザインの重要性がよく語られます。ビジネスレイヤーで語られるデザインは課題解決を意味する広義のデザインであることも多いですが、その概念がプロダクトに落ちる段階では、ビジュアルデザインのような狭義のデザインも考えていかなくてはなりません。自分自身がデザイナーではなくとも、デザインを評価・判断すべき立場になることも、当然あるでしょう。 デザイナーでなくても、仕事の中で色を扱うシーンは他にもあります。PowerPoint等を使ってビジネス文書を作成をするとき、誰もが色を用いるでしょう。色の知識があれば、より効果的なドキュメント作成が可能になります。 このように考えると、色はデザイナー
より良いタイポグラフィのための知られざるCSS
CSS組版 Vivliostyle ユーザーと開発者の集い 2020秋 https://vivliostyle.connpass.com/event/189940/
#1 2020年8月にツイートしたHTML/CSS/JavaScriptのTipsまとめ
2020 年 8 月にツイートした HTML/CSS/JavaScript のツイートまとめです。見出しをクリックするとツイート元に遷移するので、気に入ったらフォロー・ファボ・リツイートお願いします。 1. enterkeyhint属性 スマホキーボードのエンターキ表示を最適化でき、フォームが送信されたときの動作をあらかじめ伝えられます。 <input enterkeyhint="enter"> <input enterkeyhint="go"> <input enterkeyhint="done"> <input enterkeyhint="next"> <input enterkeyhint="previous"> <input enterkeyhint="search"> <input enterkeyhint="send"> 各属性値を指定したときの表示は以下のようになります。 2
iOSでも100vhをいい具合に調整して画面の高さいっぱいに要素を表示させる
TAK(@tak_dcxi)です。今回もCSSに関する投稿です。 以前このようなツイートをしました。 メインビジュアルなど、画面いっぱいに要素を表示するためにheightやmin-heightに100vhを指定する。そして、iOSで表示確認した時に以下のような問題が起こるわけです…。 iOSのSafariでの100vhが気に食わない問題 iOSのSafariでは100vhの計算にアドレスバーが考慮されていないため、アドレスバー分押し出されて格好悪く表示されます。ちなみにiOSのGoogle Chromeは中身SafariなのであれもSafariです。 この問題に立ち向かうために、実装者はJavaScriptを利用して高さを指定したり、height: 100%;のバケツリレーを行ってアドレスバーまで考慮した画面いっぱいの表示を実現するために頑張ってきたわけです。 そんな中、先程のツイートから
あなたがまだ使っていないかもしれないHTML5の便利機能10選 - Qiita
こんにちは、たかとーです🧑🎤 こちらは、10 useful HTML5 features, you may not be usingの翻訳記事になります。 当記事は、Tapasさんの許可を得て翻訳しています。Tweet 10 useful HTML5 features, you may not be using HTML5は新しいものではありません。最初のリリース（2008年1月）以来いくつかの機能を使用してきました。100DaysOfCodeの取り組みの一環として、HTML5の機能リストをもう一度よく見てみました。何か見つけたかな？私は今のところあまり使っていません。 この記事では、過去にあまり使ったことがなかったが、今では便利になったHTML5の機能を10個挙げています。また、Netlifyでホストされている、実際に動作する例を作成しました。参考になることを願っています。 htt
知っておくと速い！CSS3に関する「便利」なまとめ
作成：2013/11/25 更新：2014/10/24 Webデザイン > 先週WordPressの自作テーマを作っていたときに、もっとCSSで効率化できないものかと、色々調べてたら結構使ってないものがありました。出来るだけ短縮できるところは短縮したいので、今回はCSSの中でもサイトを作る上で「知っておくと効率的」なものをまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 知っておきたいプロパティ １．カウント数を出力 ２．要素の前後に文字や画像 ３．カーニング ４．画像フィルタ ５．均等幅にレイアウト ６．アニメーション一覧 スマホサイト対策 ７．viewport ８．改行削除 ９．Webクリップアイコン １０．UIリセット／入力フィールド拡張 １１．横並び １２．ボタンサンプル １３．画像を使わない矢印 １４．自動改行 １５．はみ出しを隠す １
rainyday.js
About The idea behind rainyday.js is to create a JavaScript library that makes use of the HTML5 canvas to render an animation of raindrops falling on a glass surface. Simple enough, right? Have a look at the demos to see it in action. Features rainyday.js features extendable API, collision detection and is easy to extend with your own implementations of different animation components. Cross-browse
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.hp-stylelink.com/news/2013/10/20131008.php