シンプルウェイ制作班|WEB制作スタッフブログ

css2scss

2016年03月14日

こんにちは。
お久しぶりです。毎度、ネタがないちまきです晴れ

暖かくなって、春もはじまったかと思いきや、寒い日が続きますね。
体調管理をしっかりしなければならないですね汗

さてさて、今回は、CSSとSass。
すでにある、CSSをSassになおしたいと、思いまして、
調べてみたところ、こんなサイトが!

css2scss
http://sebastianpontow.de/css2compass/
css2scss


スクリーンショットは、↑ような感じキラキラ
CSSの中で、どんな色が使われているか、一覧にして把握できたりして、
何度も出てくれば、include等も作成してくれたりして、
CSSからSassに変えるには、便利な使えるツールかなと思いますハート
CSSのリファクタリングだけでも使えますよ!

コレを紹介しておきながら、Sassになおすときは、手作業でやったほうが確実だな、と思うのですがZZZ
でも、面倒くさい単純な修正なら、こちらを使った方が早いし、正確だと思います。

では、この辺で、失礼します~雨

写真の縦横比を固定して拡大縮小値を計算するツール

2015年08月12日

みなさんこんにちは、ひでです。

本日もPhotoshopのお勉強と考えておりましたが、
つい先程@さんに便利サイトを教えてもらったので、
備忘録も兼ねてご紹介します。

みなさんは写真などで縦横比を保った拡大・縮小時の
サイズの計算はどうやってますか?

今まで私はPhotoshop等の画像加工ソフトを開いて、
ダミー画像を拡縮して縦 or 横サイズを取得してました。

そんな時にオススメなのか下記サイト。
「WEB上手」さんの 写真の縦横比を固定して拡大縮小値を計算するツール になります。


上記のように、元になる画像サイズと
拡縮後の横幅を入力します。


すると、自動で拡縮後の縦幅を計算してくれます!!!
その他にも「倍率」やら「アスペクト比」を自動で計算してくれて、非常に便利です。

こういう痒い所に手が届くツールって嬉しいですよね。

自分のデザインスキルがチェックできちゃうゲームのご紹介

2015年07月06日

はじめまして、あいと申します。

梅雨で毎日じめじめとしていますね雨
雨で暇だな~なんて日は、自分のデザインスキルがチェックできちゃうこんなゲーム達はいかがでしょうか?

Creative games for creative designers
Creative games for creative designers

日本語がないのが難点ですが、文字の美しい字詰め、図形の認識など、楽しく勉強にもなりおすすめです★
以下、少しご紹介を。

Shape Type
Shape Type
ゆがんだアルファベットをベジェ曲線で直すゲーム。完成度が%で表示されます。

Kern Type
Kern Type
文字をドラッグしてカーニングを調整する、文字詰め力を確認できるゲーム。

pixact
pixact.ly
ドラッグして指定のサイズのピクセルを描く、ピクセルサイズ認識能力を確認できるサイト。

まだまだ修行中の私も楽しみながら経験をつめそうです...!
これらのゲームはコリスさんのサイトでもっと詳しく紹介されています★

それでは晴れ

CSS3 Patterns Gallery

2014年08月01日

最近、お仕事でCSSの背景パターンを作る機会があったので、
その時お世話になったサイトをご紹介します。

CSS3 Patterns Gallery



すでに背景パターンが沢山用意され、
使いたいパターンをクリックすればそのCSSコードを取得することが出来ます。




正直どうやったらこんなパターンが出来るか分かりませんが、
上記であるようなチェックのパターンは、
比較的分かりやすいかもしれません。


こういうのを見ると、CSS3って本当にすごいですね。


ちなみに試行錯誤したのですが、
結局お仕事で使えるパターンはなかったので、
画像を使ってしまいました…

拡縮自在★アイコンをWebフォントにしよう「IcoMoon」

2014年07月18日

こんにちは。デザイナーの@です。

サイトのデザインを作る際にワンポイントとしてアイコンを置くことが良くあります。
アイコンのデザインにもよりますが、単色でドロップシャドウ…くらいのものならWebフォントにして使うことが多くなりました。

何と言ってもその魅力は、
・拡大しても綺麗なこと
・いちいち画像を修正せずに色が変えられること

マルチデバイス対応などで、端末分の画像を用意しなくても済むのは十分な魅力ですハート


今回はつくばちゃんねるのキャラクター「つくちゃん」をWebフォントにします。


Webフォントを作るサービスは多々ありますが、行き着いたのは「IcoMoon」。
必要なアイコンだけをまとめてWebフォントにできるサービスですが、自分でSVGファイルを用意すればそのファイルをWebフォントにできます。

SVGファイルを準備

まず、SVGファイルを準備します。
サイズは16×16pxで用意しました。
Illustratorで黒だけで描いたオブジェクトを用意して、メニュー「ファイル」→「別名で保存」
ファイルの種類を「SVG」を選択して保存します。


IcoMoonでSVGファイルをWebフォントに



次にIcoMoonで「Import Icons」をクリックして用意したSVGファイルを読み込みます。
「Untitled Set」としてSVGファイルが読み込まれたらアイコンをクリックして選択、画面下にある「Font→」をクリックしてWebフォント化開始です。
その後の画面で「Preferences」なんかで設定をしたりして、「Download」をクリックすればWebフォントの完成!

各ブラウザに対応したフォントファイルと、CSSファイルなどが簡単に生成されます。
できあがりはこんな感じですにこにこ





色つけてドロップシャドウを笑


writer : @

過去記事
最近のコメント
QRコード
QRCODE
読者登録
メールアドレスを入力して登録する事で、このブログの新着エントリーをメールでお届けいたします。解除は→こちら
現在の読者数 1人
新規投稿

新規投稿するにはログインする必要があります。会員IDをお持ちでない方はIDを取得された後に投稿できるようになります。

このページの先頭へ