Bulma: Free, open source, and modern CSS framework based on FlexboxThe most beautifully written framework I've ever had the pleasure of working with.
吹き出しやリストマーカーに使える三角形を CSS で作る
特に目新しい方法ではないですが、デザイン内に出てくることの多い三角形のあれ （謎） を簡単に CSS で作る方法について。 しばらく CSS ネタ的なの書いていませんでしたので書いてみようと思います。 三角形のあれというのは、よくリスト型メニューにアイコン的に使われていたり、メインメニューでアクティブな項目に付けたり、Tips などを表示する際に吹き出し的な見た目を作る場合に使われたりする、下記のような部分のことです。 これを CSS のみで簡単に再現する方法を解説してみます。CSS は class の付け方でカラーやサイズなどを簡単に適用できるようにしてみましょう。また、今どきっぽく Sass 向けに mixin （ミックスイン） のサンプルも紹介しておきますので参考まで。 CSS による基本的な三角形の作り方 いまさら詳しく解説するまでもないですが、下記のように border プロパテ
Bootstrap Studio
Presenting Bootstrap Studio, a revolutionary tool that developers and designers use to create beautiful interfaces using the Bootstrap Framework. Learn more What is it? Bootstrap Studio is a desktop application which you can use to build beautiful interfaces and websites by only using drag & drop. It comes with a large collection of components like charts, maps, data tables, forms, menus, lists,
Bootstrap3移行ガイド
PST（米国太平洋時間）2013/8/19にBootstrap3.0.0が正式に公開されました。これまでのBootstrap2.xから3.xに変更するにはcssやjsファイルを差し替えただけではデザインが崩れてしまいます。そこでBootstrap3の使い方を2.xからの変更箇所を交えて解説しています。 解説は最終版（v3.4.1）に対応しています。 ※2019/7/24をもってBootstrap3のサポートは終了したと発表がありました。 ※Bootstrap4.xの解説は、Bootstrap4移行ガイドをご覧下さい。 ※Bootstrap5.xの解説は、Bootstrap5設置ガイドをご覧下さい。 Bootstrapは、Mark Otto（@mdo）、Jacob Thornton（@fat）の両氏によって2010年の中頃にTwitter社で作成されました。オープンソースのフレームワークにな
スタイルガイドジェネレータの KSS が良さそう - text.ykhs.org
KSS はスタイルガイドジェネレータです。 Github の中の人、Kyle Neath 氏を中心に開発されていて、Github 自体にも使われています。 普段は SCSS で使っていますが、CSS, SCSS, LESS といった形式に対応しているそうです。 KSS · Knyle Style Sheets http://warpspire.com/kss/ Ruby 製のツールで Rails や Sinatra に組み込んで使用します。 そして Github のリポジトリには Sinatra で動かす場合のサンプルも含まれています。 kss/example at master · kneath/kss · GitHub https://github.com/kneath/kss/tree/master/example 上記サンプルの views ディレクトリを見てもわかるように vie
SpinKit
.spinner { width: 40px; height: 40px; background-color: #333; margin: 100px auto; -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out; animation: sk-rotateplane 1.2s infinite ease-in-out; } @-webkit-keyframes sk-rotateplane { 0% { -webkit-transform: perspective(120px) } 50% { -webkit-transform: perspective(120px) rotateY(180deg) } 100% { -webkit-transform: perspective(120px) rotateY(180deg
Bootstrapに270の使えるアイコンを追加できる「Elusive icons」:phpspot開発日誌
Elusive icons, an icons font designed for use with Bootstrap Bootstrapに270の使えるアイコンを追加できる「Elusive icons」 Bootstrap標準アイコンも140種類と豊富に使えますが、これに270種類を追加すれば、アイコンにはもう困らないかも。 Bootstrapを使っている方、使おうと思っている方は是非覚えておきたいですね。 ベクター形式なので拡大してもOK。 今後、アイコンはBootstrap対応をデフォルトにしてくれるとよりBootstrapが素晴らしい物になっていきそうですね。 関連エントリ Bootstrapで矢印を描くのなら「Bootstrap Arrows」 TwitterBootstrapベースのWYSIWYGエディタ「bootstrap-wysihtml5」 Twitter BootSt
CSS Mania · Since 2004
Sponsors Free website builder. Create a website now! EcommerceBooth is an eCommerce resource where you can find useful guides, tutorials, and exclusive deals. WPKube - learn how to get most out of WordPress. Popular Topics Companies (6,703) Freelance / Portfolios (4,828) Technology (6,562) Internet (5,264) Marketing (4,812) Lifestyle (3,905) United States (3,078) United Kingdom (1,713) Weblogs (2,
WordPress をスピードアップする方法、その壱 – わーどぷれすっ!!
最初は 10 Ways to Speed up Your WordPress Blog | Pro Blog Design の１０個だけ紹介しようと思ってたんだけど、このページからたどったらいろいろ出てきて長くなりそうなんで、何回かに分けてご紹介しやす。 まずは 10 Ways to Speed up Your WordPress Blog から、 不要なプラグインを削除する いつのまにか結構増えてたりするんですよねー(笑。本当に必要なものだけにしぼりましょう。あと、テーマに直接入れちゃうのもいいようです 必ずしも必要としない PHP タグを取り除く ヘッダーの<?php bloginfo('html_type'); ?>とか<?php bloginfo('charset'); ?>とか、決め打ちできるやつですね。10個くらいは取り除けそうです。 WP Super Cache を使う これ
携帯サイト（html）の制作に入る前に確認しておきたいチェック項目 │ これからゆっくり考L +α
「デザインは素敵なんだけど、携帯でこれはちょっとできないなー」とか、「無理ではないけどできれば避けておいた方がいいよなー」っていうデザインがあがってくることが多い今日この頃。 モバイルコーディングをやり慣れている人じゃないとモバイルでできることできないこと、cssを使わないと実現できないこと、table使わないと実現できないこと、などが分かりにくいと思うので当然だとは思うのですが。 ですが、知っているのと知らないのとでは工数がかなり違ってきます。 一旦デザインして、コーダーにそれを見せて「ココとココとココは実現不可能。やり直してください。」で差し戻され、デザインをやり直してってなると、デザインも2度手間、デザインをチェックして無理な項目を洗い出すコーダーにも余計な手間がかかります。 今回洗いだした項目は、なんせ自分がコーダーなので、コーダーがデザインファイルをもらった時にバーッと見てチェッ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Honoka - 日本語も美しく表示できるBootstrapテーマ
webフォントの使い方＆日本語対応webフォントまとめ
HTML5.JP - 次世代HTML標準 HTML5情報サイト