cssに関するhideki_aのブックマーク (402)
-
hideki_a 2013/08/11
-
Bootstrap List Styles with CSS3: Exploring
In the realm of web design, lists are fundamental for organizing content. Bootstrap, a popular front-end framework, offers powerful tools for creating and styling lists. In this article, we’ll dive into the world of Bootstrap list styles enhanced with CSS3. We’ll explore various techniques to make your lists more visually appealing and engaging. The Bootstrap List Foundation Bootstrap provides a s
-
Absolute Horizontal And Vertical Centering In CSS — Smashing Magazine
In this article, Stephen Shaw introduces a technique for perfect horizontal and vertical centering in CSS, at any width or height. The techniques works with percentage-based width/height, min-/max- width, images, position: fixed and even variable content heights. This article was updated on January 31, 2019 to update the below provided information. The old information is not wrong, however is the
-
CSS Breadcrumb Navigation: Enhance Your Experience
Breadcrumbs are an essential navigation feature on websites, helping users understand their position within a hierarchy and simplifying the process of navigating to higher-level pages. By implementing breadcrumbs, you can enhance the user experience and reduce the number of steps required for users to find their way around your site. In this tutorial, we’ll explore how to create visually appealing
-
CSS Click Chart | CSS3 Browser Support and Information
Can I Use ? Data on support for the default feature across the major browsers from caniuse.com.
-
Language-wide Features in CSS
In addition to the unique property/value pairs that CSS offers, there are also a small handful of language-wide features that can come in handy, including a few that are brand new in the spec. These often go unnoticed, especially by beginners, because when CSS properties and their possible values are discussed (in tutorials, books, or even in the spec), these features are usually omitted for brevi
-
Maintainable CSS with BEM | Integralist
integralist BBC News Engineer: Object-Oriented Design principles using Ruby, PHP, BEM, AMD, TDD and BDD More info about me… What we'll cover reading time: approx. 7mins Introduction BEM: Block, Element, Modifier Example Why BEM over the others? Conclusion Introduction This is a super quick post to introduce you to a method of writing more maintainable CSS by using what's called "BEM". Update: @nec
-
Bootstrap
BootstrapBootstrap v5.3 (switch to other versions) v5 releases Latest (5.3.x) v5.2.3 v5.1.3 v5.0.2 Previous releases v4.6.x v3.4.1 v2.3.2 All versions Get Security Updates for Bootstrap 3 & 4 Build fast, responsive sites with Bootstrap Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life w
-
ぼくのかんがえたさいきょうのしーえしゅえしゅ - MOL
俺ももう30だし、夏なんで、CSSフレームワークはじめました。 とりあえず、UIエレメントとか作ってないし、CSSフレームワークとか言いながら、GithubのLanguage Staticsは98.3%、JavaScriptってな感じでGrunt Taskばかり充実してるような感じです、現状。 とりあえず、設計方針としてはマシなCSSを書くことを目標としている。この一年、スマホアプリのHTML/CSSコーディングをやってきたわけだが、度重なるUIの変更に耐えうるCSS、そして肥大化しないCSSとは何かずっと考えていて、特に答えという答えもで見つかっていわけだけど、とりあえずはこうしたほうがBetterなんじゃないかというの自分的に固まってきたので、公開してみた。 てか、最強のCSSなんて存在しないからなっ！！ t32k/maple - GitHub ありがちな落とし穴 これを作るにあたって
-
Centering Percentage Width/Height Elements | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! If you know the exact width/height of an element, you can center it smack dab in the middle of its parent element easily with this classic trick: top and left set to 50% and negative margins half the width and height of the element. That’s great if you know the width and height of the elemen
-
-
CSS Flexible Box Layout Moduleで均等幅にレイアウトする - くらげだらけ
最近ではベンダープレフィックスも無くす方向に向かっているようですね。 数年前に比べればCSS3プロパティも使えるような状況になってきているような気がします。いや気がしているだけかもしれません。 まぁ、現状webkitが支配しているモバイルブラウザ環境ではCSS3だって使えますしね。 display: box 横幅を均等に分けてレイアウトしたいみたいなときにFlex boxは便利なプロパティですが、どんな感じにするのがいいのかを書いてみようと思います。 Flexible Boxの仕様はころころ変わってて、最初は「display: box」最新は「display: flex」だったりしますが、まずは「display: box」でやってみます。 http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/ <div class="flex-box"> <
-
Responsive Tables Demo
Code The approach I've presented here assumes you know the index of the columns to be hidden. This probably isn't always appropriate, and isn't all that semantic. Another option is to give the <th> and <td> classes based on importance level and code your CSS accordingly. <table> <thead> <tr> <th>Code</th> <th>Company</th> <th class="numeric">Price</th> <th class="numeric">Change</th> <th class="nu
-
Pure.css
CSS with a minimal footprint.Pure is ridiculously tiny. The entire set of modules clocks in at 3.5KB* minified and gzipped. Crafted with mobile devices in mind, it was important to us to keep our file sizes small, and every line of CSS was carefully considered. If you decide to only use a subset of these modules, you'll save even more bytes. * We can add correctly :) the numbers above are individu
-
-
Two Tools to Keep Your CSS Clean
Tim has been working on the web since 1997, and specializes in developing custom publishing systems with responsive HTML5 interfaces. His eye for design and serious affinity for clean code allow him to painlessly integrate his templates into larger systems without sacrificing user experience or aesthetics. Tim started in the non-profit world, moved on to start-ups, shifted to an agency, upgraded t
-
Styling Checkboxes with CSS: A Comprehensive Guide to Creating Unique and Customizable Designs
Styling Checkboxes with CSS: A Comprehensive Guide to Creating Unique and Customizable Designs Checkboxes is a HTML element that is possibly used on every website, but most people don't style them so they look the same as on every other site. Why not make your site look different by styling your checkboxes, you could even make them look nothing like checkboxes. In this tutorial we are going to cre
-
-
-
Printing The Web | Blog | Hans Reinl
While it is possible to consume nearly all means of content on your smartphone or tablet it seems like the dream of a paperless office comes true for a lot of web developers. But digital natives are not the only ones who are on the web. There are still some people that like to print web sites on paper. Once you are aware of that you might want to include a dedicated print stylesheet into web sites
公式Twitter
- @HatenaBookmark
リリース、障害情報などのサービスのお知らせ
- @hatebu
最新の人気エントリーの配信
キーボードショートカット一覧
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
