PaintCode - Turn your drawings into Objective-C or Swift drawing code1Draw things in PaintCode. You can also import PDF, SVG, PSD, AI and EPS documents. 2Get the Generated code. Choose Swift, Objective-C, Java, C#, JavaScript or SVG.
CSS3のFlexboxを基本から理解して、使い方をマスターしよう！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、王です。デザイナーやってます。 今回は「Flexboxを基本から理解して、使い方をマスターしよう！」ということで、初耳の方でもざっとFlexboxで何ができるか分かるように短い動画を用意しました。 動画の中で使ってたデモをアップしたので、確認してみたい方は以下のリンクをどうぞ！ デモ 昨今では、当然ながらデジタルデバイスサイズの多様化でレスポンシブデザインとやらが流行っています。 同じサイトをさまざまなスクリーンサイズに応じたデザインをしなければならない上に、コーディングにも手間がかかります。制作側からしたら何かと厄介ですよね。 「なるべく手間をかけずに作りたい！」という世界中のデザイナーの声に応えて、「Twitter Bootstrap」をはじめとした数多くのフレームワークが徐々に脚光を浴びはじめて久しくなります。 ただ、これらはあくまで古い技術の組み合わせで、革新的な技術で
Gas138 :> Incar JP Slot Hari Ini Gampang Menang Situs Resmi
Step 1 Find a hard flat surface, tape a piece of blank paper, flush against a wall. Place your foot on the paper, with your heel flush against the wall, stand up straight. Step 2 Have a friend mark the longest part of your foot (referred to as heel-to-toe length) on the paper with a pen or pencil, or measure yourself if necessary. Repeat with the other foot, as right and left sizes may be differen
Bootswatch
Easy to Install Simply download a CSS file and replace the one in Bootstrap. No messing around with hex values. Customizable Changes are contained in just two SASS files, enabling further customization and ensuring forward compatibility. Tuned for 5.3.8 Themes are built for the latest version of Bootstrap. Version 4, version 3, version 2, and other releases are also available to download.
Railsプログラマはこれを入れればすぐにズルいデザインをはじめられます！ | mah365
先日のプログラマ向けデザイン勉強会で発表された「少ない手間と知識で”それなり”に見せる、ズルいデザインテクニック」（by 赤塚さん）の中に書かれていたSassのMixinをRailsで使えるGemにしてみました。 zurui-sass-rails: https://github.com/mahm/zurui-sass-rails sample: http://zurui-sample.herokuapp.com/ うおおずるい！ｗ RT @mah_lab: .@ken_c_lo さんのズルいデザインをGemにしてみました。 github.com/mahm/zurui-sas… サンプルはこちら zurui-sample.herokuapp.com (based on github.com/machida/Custom…) — TAEさん (@ken_c_lo) 11月 7, 2012 @m
少ない手間と知識でそれなりに見せる、ズルいデザインテクニック// Speaker Deck
少ない手間と知識でそれなりに見せる、ズルいデザインテクニック with Sass / Compass (English Version) https://speakerdeck.com/ken_c_lo/zurui-design-technique-english-version 第一回…
Media Queriesの記述を少し楽にしてくれるSCSS（Sass） Mixin（自作） | DevelopersIO
皆さんお久しぶりです。 最近サイトの高速化で忙しく、 ブログの執筆をサボっていました、ごめんなさい。 ブログのテンプレートリニューアルも無事に終わり、そろそろ得た知識をアウトプットしていこうと思います。 最近HTML（5）を利用したWebサイトもレスポンシブやCSS3、Retinaディスプレイ対応でどんどん複雑になってきています。ですが、未だ標準化されていないCSS3でさえ市場の要求に応えるには未熟に思えます。 そこで登場するのがSassやLESSなどのCSS拡張メタ言語です、キリッ（巷で知っている方にとっては今さら感たっぷり）。 今回は第一弾としてSass（SCSS）とCompassについて紹介しつつ、Media Queries（前に書いたMedia Queriesに関する記事）の実装を少し楽にしてくれる自作Mixinを紹介します。なぜSassにしたかは「Sass LESS 比較」と検索
【Webデザイナ－・コーダー向け】すぐに使えるSCSS入門｜基礎編 | DevelopersIO
はじめに 早速ですがみなさん、黒い画面（コンソールやターミナル）はお好きですか？ ちなみに僕は最近やっと黒い画面に対していくつかの呪文使えるくらいになりました。文系理系でもどちらでもなくさらに低学歴の僕にとっては潜れば潜るほど黒い画面がつきまといます。（今では好きですよ、黒い画面） 今回は、すぐに使えるSCSS入門｜基礎編ということで、「黒い画面など見たくない！」というあなたにも、GUI操作だけですぐに使えるアプリケーションのインストールからSCSSの基本的な利用方法について、実際の開発に使えるポイントを押さえて解説していきたいと思います。 SCSSを覚えて生産的で楽しいWebサイト制作・アプリケーション開発をしていきましょう。 まだSCSSを知らない方向けに「SCSS」って？ 前回の記事「Media Queriesの記述を少し楽にしてくれるSCSS（Sass） Mixin（自作）」からの
JavaScriptを使わずにPinterest風レイアウトにする
昨日はJavaScriptを使ってPinterest風レイアウトを実現するスクリプトを紹介しましたが、今日はJavaScript無しでスタイルシートで実現するテクニックを紹介します。 デモページ：幅900pxで表示 実装 HTML HTMLは非常にシンプルで、各パネルをdiv要素で実装し、それらをdiv要素で二重に内包します。 <div id="wrapper"> <div id="columns"> <div class="pin"> <img src="image.png" /> <p>テキスト</p> </div> <div class="pin"> <img src="image.png" /> <p>テキスト</p> </div> ... ... </div> </div> CSS Pinterest風レイアウトをCSSで実現するには、二つの方法が考えられます。 一つ目はfloa
CSS-Only Responsive Layout with Smooth Transitions | Codrops
A tutorial on how to create a 100% width and height smooth scrolling layout with CSS only. Using a radio button navigation and sibling combinators we will trigger transitions to the respective content panels, creating a “smooth scrolling” effect. In this tutorial we will create a responsive 100% width/height layout with some smooth page transitions. The idea is to have some content panels and a na
Google HTML/CSS Style Guide
Revision 2.1 This style guide contains many details that are initially hidden from view. They are marked by the triangle icon, which you see here on your left. Click it now. You should see “Hooray” appear below. Hooray! Now you know you can expand points to get more details. Alternatively, there’s a “toggle all” at the top of this document. This document defines formatting and style rules for HTML
はてなにおけるCSSメタ言語（CSSプリプロセッサ）の導入について - Hatena Developer Blog
こんにちは、id:tikedaです。数年前から登場して以来、利用されるケースが増え続けているCSSメタ言語（CSSプリプロセッサ）。近年、様々な大規模サービスへの導入が進む中、はてなのサービス開発においても導入を行うため、2012/3/6に勉強会を実施しました。その内容を公開いたします。CSSメタ言語そのものの説明よりも、社内導入の為に必要な内容が中心となります。 アジェンダ どんなものがあるか 導入の背景と目的 はてなでの選択 何がやれるか どう使うか 事例・実演 運用ルール 今後の展望 どんなものがあるか Sass(scss,sass) http://sass-lang.com/ Less http://lesscss.org/ Stylus http://learnboost.github.com/stylus/ Tass http://cho45.github.com/tasscs
[CSS]box-shadowを使って、紙がふわりと浮かんだようなエフェクトをつけるスタイルシートのまとめ
Creating Different CSS3 Box Shadows Effects [ad#ad-2] デモ 実装 デモ デモはbox-shadowに対応した下記のブラウザでご覧ください。 対応ブラウザ Internet Explorer 9.0+ Firefox 3.5+ Chrome 1+ Safari 3+ Opera 10.5+ デモページ [ad#ad-2] 実装 基本となるHTML 8つの各デモのHTMLの基本は同じで、class名が異なるだけです。 <div class="box effect"> <h3>Effect</h3> </div> 基本となるCSS div要素とh3要素の基本となるスタイルです。 .box h3{ text-align:center; position:relative; top:80px; } .box { width:70%; height
Bootstrap from Twitter ver1.3.0の使い方を日本語解説して簡単css (web)デザイン - end0tknr's kipple - web写経開発
この解説ページ群の目次 url トップ(このページです) bootstrapの概要「等」 入手と設置(install) http://d.hatena.ne.jp/end0tknr/20111016/1318730072 グリッドシステム http://d.hatena.ne.jp/end0tknr/20111016/1318731266 (固定/可変)レイアウト http://d.hatena.ne.jp/end0tknr/20111016/1318732238 テキスト(ﾍｯﾀﾞ, ﾘｽﾄ, ｲﾝﾗｲﾝﾗﾍﾞﾙ) http://d.hatena.ne.jp/end0tknr/20111016/1318750736 テーブル http://d.hatena.ne.jp/end0tknr/20111016/1318777018 フォーム、ボタン http://d.hatena.ne.jp/
An Introduction To LESS: LESS vs Sass — Smashing Magazine
LESS and Sass share a lot of basics. Both of them are fantastic tools for designers who code, and they can also help developers work more efficiently and quickly. In this post, Jeremy Hixon presents the main difference between them. I’ve been using LESS religiously ever since I stumbled upon it months ago. CSS was never really a problem for me, in and of itself, but I was intrigued by the idea of
CSS拡張メタ言語「SCSS(Sass)」と「LESS」の比較 - (DxD)∞
CSSを拡張するためのメタ言語として、代表的なものに「SCSS(Sass)」と「LESS」があります。今回、導入を検討するにあたり、両者を比較しました。 結果的には、「SCSS(Sass)」を導入することにしましたが、特に「SCSS(Sass)」を選択する決め手となった点に重点を置きつつ、両者の違いをまとめまてみました。 はじめに Webサイト、Webアプリケーションが大規模になるにつれて、CSSの設計・管理にもリソースを割かれるようになります。CSSのモジュール化、コンポーネント化による再利用性を考えたとき、現状のCSSを取り巻く状況は十分とは言えません。 一つの選択肢としてあがるのが「Blueprint」や「960 Glid System」等のCSSフレームワークの利用ですが、その再利用性と構造・表現の分離度はトレードオフです。 そこで、CSSの利点を活かしつつ、再利用性を高めるために
Sass、そしてSassy CSS (SCSS)
CSSを拡張したメタ言語であるSass、そしてその別文法として定義されたSCSSについて、960.gsなどのCSSフレームワークと絡めて、Sass (主にSCSS)の良さを解説する。 CSSフレームワーク Sass Sassy CSS aka SCSS SCSSでCSSフレームワーク 2カラムレイアウトの作成 clearfixやReset CSSの組み込み カラム幅の変更 カラムの入れ替え SCSSで完結することの意義 まとめ 最後に CSSフレームワーク 960.gsやBlueprint、BlueTripなどCSSフレームワークと呼ばれるものは色々ある。フレームワークと名乗るだけのことはあって、それらの生産性はとても高い。テンプレートで適切にクラス名やIDを埋め込むだけなので、複雑怪奇なCSSコーディングを意識することなく誰でも簡潔にきれいなカラム・レイアウトを作成できる。 HTML 4
Sass to CSS
// Variable Definitions $page-width: 800px; $sidebar-width: 200px; $primary-color: #eeeeee; // Global Attributes body { font: { family: sans-serif; size: 30em; weight: bold; }; } // Scoped Styles #contents { width: $page-width; #sidebar { float: right; width: $sidebar-width; } #main { width: $page-width - $sidebar-width; background: $primary-color; h2 { color: blue; } } } #footer { height: 200px;
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://lab-five.com/2010/08/neighbour_selecter/
小久保浩大郎：「Sass徹底解説〜SassがもたらすCSSのパラダイムシフト」其のニ/CPI x CSS Nite「After Dark」（1）, CPI x CSS Nite「After Dark」（1）2010年5月に登場したSass3は、CSS互換構文となり、よう�