The children flex properties can be applied at child level, separate for each child. See the results below and change some of their properties. Hover with the mouse pointer or touch the fields to see the property name.
Visual Guide to CSS3 Flexbox: Flexbox Playground |
The children flex properties can be applied at child level, separate for each child. See the results below and change some of their properties. Hover with the mouse pointer or touch the fields to see the property name.
Flexbox playground
About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-
Coveloping
box-shadowでふわりとした影をつくるCSSのジェネレーター、レスポンシブのチェック、アスペクト比の計算機、CSS/JSの軽量化など、たくさんの便利な時短ツールがありますが、それらの便利なツールを一つの場所にまとめたCovelopingを紹介します。 FacebookのOPGチェックやGoogle Mapsの地図生成ツールもあり、新しいプロジェクトを始める時にも役立つものが揃っています。 Coveloping 便利ツールは現在23種類、アスペクト比の計算や一つのカラーに黒と白を加えたバリエーションを生成したり、box-shadowでふわりとした影をつけたり、jQueryのアニメーションのエフェクトなどがあります。 これからもどんどん増えていくそうです。 その中から、いくつか紹介します。
スタイルシートの内容はそのままで、可読性・保守性を高めるオンラインサービス -CSS Trashman
サイトやブログで使用しているスタイルシートをリファクタリングし、可読性・保守性を高めたCSS（Sassも）に変換してくれるオンラインサービスを紹介します。
HTML5/CSS3にも対応、HTML/CSS/JavaScriptを整形・チェックするオンラインツール -Dirty Markup
Dirty Markup [ad#ad-2] Dirty Markupはウェブ制作者がよく使う下記のツールをまとめたような感じです。 HTML Tidy CSS Tidy JS Beautify Dirty Markupの使い方は簡単で、右側にコードをペーストし、左側でHTML/CSS/JavaScriptを設定し「Clean」ボタンをクリックするだけです。
Codepad - Share Code Snippets, HTML5, CSS3, JS Demos
ActionScript Ajax AngularJS Apache AppleScript ASP.NET Bash C C# C++ Coffee CoffeeScript ColdFusion Command CSS Delphi Django ES6 GLSL Grunt Gulp HAML Haskell HTML iOS Jade Java JavaScript jQuery JSX Less LUA MDX MySQL Objective Other Pascal Perl PHP Plain text PowerShell Processing Progress Prolog Pseudocode Python Rails RegExr Ruby SASS Scala Scheme SCSS SmallBASIC Smarty SQL Stylus SVG Swift Ty
Cloud9 - Your development environment, in the cloud
A cloud IDE for writing, running, and debugging code AWS Cloud9 is a cloud-based integrated development environment (IDE) that lets you write, run, and debug your code with just a browser. It includes a code editor, debugger, and terminal. Cloud9 comes prepackaged with essential tools for popular programming languages, including JavaScript, Python, PHP, and more, so you don’t need to install files
オンラインカジノの主な特徴と魅力
オンラインカジノは、リアルにあるカジノの世界を、ネット上でエンジョイする事が出来る、ギャンブルゲームです。 現実の上でのカジノと変わらず、インターネット上と言いましても、リアルマネーをかけることが可能となっています。 したがって、ギャンブルを満喫する事が行なえるので、とてもスリリングな世界観を満喫できます。 そして、オンラインカジノについては、賞金額もかなり高いのが持ち味だと言えます。 オーソドックスなギャンブルとして市民権を得ている、パチンコやスロットのケースでは、稼ぐことができたとしても、1日あたり数十万円ぐらいになります。 しかしながら、オンラインカジノについては、1日あたり数千万の高額当選も想定でき、具体的に1億円を的中させたプレイヤーもいます。 ひと晩で億万長者になれることが望めるギャンブルとなっています。 そして、オンラインカジノについては、好きな時間に好きな場所で満喫する事が
最近よく使ってる、Web制作に役立つWebサービス的なやつ
少し前に聞いてくれた方がいたのでついで にシェアしてみます。個人的に最近よく好ん で使っている、Web制作に役立つWebサー ビスみたいなものをご紹介。全部既出で 珍しいものは無いんですけど、一覧にする のもたまにはいいかもですね。 というわけで、場合によっては誰得な記事ですけどご了承下さい。僕がここ最近でよく使ってるWebツールを古いのから新しいのまで、順不同でご紹介していきます。 web計。 → 黄金比・白銀比をサクサク計算 計算が面倒な黄金比や白銀比を、数値を入力するだけでサクサク出してくれます。動作も軽くてストレス無しです。 web計。 simplelib → よく使うjQueryコードをパッケージで配布 めっちゃ楽です。jQueryで作りたい機能だけを選択して、1つのjsファイルにパッケージにしてくれますよ。ページスクロールとかタブとか需要の高いものが揃っています。ちょっと機能を
ごちゃごちゃしたCSSを見やすく自動整形してくれるサイト「ProCSSor」*二十歳街道まっしぐら（FC2ブログ時代）
「ProCSSor」はごちゃごちゃしたCSSを自動整形してくれるサイトです。 自分の書いたCSSをみて、「あーごちゃごちゃしてて見にくいなぁ」て感じてる方には朗報！ CSSを貼りつけて、変換すると綺麗に整形されたCSSをはきだしてくれます。 無駄な改行やらも省いてくれるという気が利くサイトです。 以下に使ってみた様子を載せておきます。 まず「ProCSSor」にアクセスしましょう。 「ENTER OR COPY-PASTE YOUR CSS HERE」に整形したいCSSを貼りつけます。 「options」より、整形のルールを決めることができます。 「process」をクリックして、変換開始！ するとこのように整形されたCSSがはきだされます。 「download」からダウンロードできますよ。 この色付け、けっこう見やすいので、CSSを整形＋色付けしたいときにも使えそう。 やっぱり綺麗にコー
CSS Sprite Generator
What are CSS Sprites CSS sprites are a way to reduce the number of HTTP requests made for image resources referenced by your site. Images are combined into one larger image at defined X and Y coorindates. Having assigned this generated image to relevant page elements the background-position CSS property can then be used to shift the visible area to the required component image. This technique can
Cacoo - Web上で図の作成とリアルタイムコラボレーション
Online diagramming tool for collaborating on wireframes, flowcharts, and more
オンラインCSS自動整形 : akiyan.com
/* background-color */ body, div.navigation { background-color : #fff } div.contents { background-color : #e0e0e0 } /* color */ body, div.navigation { color : #000 } div.contents { color : #333 } /* font-size */ div.contents { font-size : 100% } div.navigation { font-size : 80% } /* margin */ div.navigation p { margin : 1em 10% } /* padding */ div.navigation p { padding : 1ex } /* background-color
複雑なWebサイトデザインを容易に実現するテンプレート·YAML MOONGIFT
なぜデザインとYAMLが関係するのだろうと思ったが、ここでは「Yet Another Multicolumn Layout」の略らしい。つまりマルチカラムのデザインを容易に実現するためのCSSテンプレートということだ。 整ったデザインが簡単に手に入るのはすばらしい！ Webプログラマの一番の悩みどころがデザインだ。特にCSSを使ってマルチカラムや入れ子になっているデザインは難しい。高さをそろえたり、メニューを横並びにしつつ、次の要素では違う表示など、複雑になればなるほど放棄したくなってくる。それがFirefox/IE/Safariなどのブラウザにも対応するとなれば尚更だ。そこで登場するのがYAMLだ。 今回紹介するフリーウェアはYAML、複雑なマルチカラムデザインテンプレートだ。 YAMLでは多数のサンプルが用意されている。単純な2または3カラムを基本として、グリッド化されてページの幅に応
Drawter.com - DrawAble Markup Language
Drawter is a tool written in JavaScript and based on jQuery library. It provides you the possibility to literally draw your website's code. It runs on every single web-browser which makes it really useful and helpful. Each tag is presented as a layer you have drawn. Currently Drawter is available in Pro version, which means that it is intended for webmasters use only - knowledge of HTML and CSS is
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSのセレクタがちょっとあやふやな人はやってみて！ 楽しみながらCSSのセレクタを学ぶ -CSS Diner
Rendur 2.4