CSSの単位（em, rem）を使った、これから取り入れていきたい実装テクニックのまとめ
CSSの相対的な単位（em, rem）を使って、Webページで使われるUIコンポーネントのさまざまなサイズを変化させるスタイルシートのテクニックを紹介します。 em, remは文字の大きさだけでなく、画像やアイコンのサイズ、背景、フォーム、ボタン、配置など、さまざまな指定に利用できます。 Building Resizeable Components with Relative CSS Units 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 フォントのサイズを変化 縦と横の比率を維持したボタン 縦と横の比率を維持した画像 box-shadowを使ったボーダーの幅と高さ アイコンの幅と高さ、そして間隔も キャプション付き画像 装飾された背景 アイコン付き検索フォーム チェックボックスで実装されたトグル ブロックの一行の長さ ボタ
Gentallela - プログラマでも美しく管理画面を作成できるBootstrapテーマ | ソフトアンテナ
「Gentellela」はBootstrap 3を使った無料の管理画面用テンプレートです。デフォルトスタイルのBootstrap 3をベースとして多数のパワフルなjQueryプラグインやツールを組み込んだもので、美しい管理用パネルやダッシュボードを簡単に作成することができます。 テーマにはチャートや、カレンダー、フォーム検証ライブラリ、ウィザードスタイルのインターフェイス、ナビゲーションメニュー、テキストフォーム、スライダー、プログレスバー、通知メニューなどたくさんの有用なライブラリが組み込まれています。 今回はオンライン上で確認できるデモサイトを元に、どのような画面が実現できるのかスクリーンショットとともに紹介したいと思います。 ダッシュボード ▲ダッシュボードのデモでは多様なチャートが表示できることが確認できます。テーマはレスポンシブ対応で画面サイズに応じて適切に描画されます。 フォー
PatternFly
The PatternFly 6 alpha release is available! Our staging website has a fresh look, along with new styles, code samples, and documentation. Go to PatternFly 6 Design and build better product experiences in the open with PatternFlyPatternFly is an open source design system that enables teams to create consistent and scalable enterprise products. PatternFly is sponsored and maintained by Red Hat, but
Bootstrapのレスポンシブなテーブルの列の幅を動的に変える - Qiita
やりたいこと Bootstrapのレスポンシブ対応のテーブルで列の幅を自分が決めた幅で動的に変えたい！ bootstrapのバージョン: 3系 使うHTML <div class="alt-table-responsive"> <table class="table"> <thead> <tr> <th>th1</th> <th>th2</th> <th>th3</th> </tr> </thead> <tbody> <tr> <td>aaa</td> <td>bbb</td> <td>ccc</td> </tr> <tr> <td>ddd</td> <td>eee</td> <td>fff</td> </tr> </tbody> </table> </div>
脱Bootstrapガイド 〜フルスクラッチCSS〜 - Qiita
2021/02/12 追記 この記事を執筆した当時、Bootstrapがどのサイトでも使われていました。 当時のBootstrapはjQueryと密結合していたり、いろいろと剥がす動機があったのですが、 現在のBootstrapは内部的にもflexboxになっていたりと改良されています。 まずは剥がす前に最新版への更新を検討してみてください。 一方で、TailwindやインラインスタイルCSSなど、Bootstrapを採用しづらい場面も増えてきています。 その場合にはやや記述は古いのですが本記事が役に立つ場面もあるでしょう。 ポイントは、腹をくくってFlexboxのプロパティについて真剣に学ぶことです。 追記終わり Bootstrapは便利ですし、デフォルトのスタイルもフラットでかっこいいですね。 デザイナーでなくてもそれなりに整った画面が作れるということで、大変便利なBootstrapで
Photon
The fastest way to build beautiful Electron apps using simple HTML and CSS Powered by Electron Underneath it all is Electron. Originally built for GitHub's Atom text editor, Electron is the easiest way to build cross-platform desktop applications. If you can write a bit of HTML, CSS, and JS, you can build full featured applications. Companies like Microsoft, Facebook, and Slack are using it – why
これは便利！アイコン型WebフォントのCDN「Font Awesome」
まず、以下のコードでWebフォントの呼び出します。 後は、表示したいところにコードを挿入するだけです。サイト内のアイコンをクリックするとコードが表示されます。 この基本形にクラスを追加すると色々とカスタマイズすることができます。 ちなみに「fa」は表示の基本となるスタイルで「fa-sitemap」はアイコンの種類を表します。スタイルの中身はこんな感じです。 .fa { display: inline-block; font-family: FontAwesome; font-style: normal; font-weight: normal; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .fa-sitemap:before { content: "\f
[CSS]日本語にもマッチする、見出しの文字をかっこよくするスタイルシートのまとめ | コリス
This is a Headline ブラウザはChrome, SafariのWebkit系でご覧ください。 各スタイルとともに、スタイルシートを紹介します。 とその前に、HTMLはごくシンプルです。 <h1 class="vintage">美しい日本語</h1> ヴィンテージ風にスタイルします。 .vintage{ background: #EEE url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAIAAAAmkwkpAAAAHklEQVQImWNkYGBgYGD4//8/A5wF5SBYyAr+//8PAPOCFO0Q2zq7AAAAAElFTkSuQmCC) repeat; text-shadow: 5px -5px black, 4px -4px white; font-weight: bold; -webkit
IDを使わないCSSの設計 - kojika17
CSSのスタイリングではIDを使用しない、という話をよく聞くようになりました。 私も最近は、IDを使わずにコーディングしているので所感を書きます。 CSSでIDを使わない 「IDを使わない」ということをHTMLの変化で示すと、以下のようになります。 <div id="header" class="clearfix"> <h1 id="logo"><a href="">logo</a></h1> <ul id="heaeder-info"> <li class="about"><a href="">about</a></li> <li class="sitemap"><a href="">sitemap</a></li> </ul> </div> ↓↓↓↓ <div class="header clearfix"> <h1 class="logo"><a href="">logo</a></
SMACSS 読んだ - CHROMA
Scalable and Modular Architecture for CSS (日本語) を読んだのでそのメモです。 CSSルールのカテゴライズ カテゴライズを行い、それに準じた命名をセレクタに付ける。 ベース レイアウト モジュール 状態（ステート） テーマ レイアウトには1つ以上のモジュールを保持する必要がある。 モジュールは最利用可能なパーツとする。 命名規則 レイアウト、状態（ステート）、モジュールにはプリフィックスを使用する。 レイアウトのスタイルにはlayout-を付ける。または、ドキュメントなどでコーディング規約をまとめてあるなら省略してl-と付けても良い。 状態（ステート）にはis-を付ける。 モジュールは作成される数が多いので、モジュールごとにプリフィックスを付ける。 /* Example */ .comment { } .comment-user { } ベースル
メンテナブルCSS
概要 メンテナブルなCSSを目指し、定義された一般的なCSSルールの紹介と、それらのルールを適用するにあたって活用できるツールを報告します。 1. 序論 CSSは記述ルールが簡素であり、少しの学習コストですぐに記述ができる手軽なツールです。 しかし、大規模なアプリケーションで複数人で開発するケース等では、見栄えだけしか考えずに身勝手にコーディングしてしまうと、 非常にメンテナンスコストがかかる負の遺産が作られてしまいます。 そのためCSSの品質を保つために様々なプロジェクトで、CSSの定義ルールが決められています。 本稿では一般的なCSSの定義ルールと、そのルールがなぜ作られたのかを合せて報告致します。 また、CSSのルールを適用するにあたって、手動・目視でルールの適用をチェックするのは非常にコストが高い作業です。 これらルールの適用を補助するツール群を、合せて報告致します。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Flexbox Patterns
Bootstrap 3 truncate long text inside rows of a table in a responsive way
PCサイトのUIデザインにおける12のトレンド
TECH PROjin
| こくみこのダメブロで…ざす！
Free Bootstrap Admin Template - AdminLTE.IO
re-dzine.net situs togel online toto 2023 -
https://github.com/kiwanami/CSS-Guidelines/blob/master/README.ja.md