タグ

ブックマーク / webimemo.com (6)

  • アイコンフォントの欠点である意味不明な文字列をリガチャ(合字)で解決したWEBフォント『Ligature Symbols』

    こんにちは、霙(@xxmiz0rexx)です。 興味はあったけれどなかなか手が伸びなかったアイコンフォント。 そんな私をやっと使う気にさせてくれた素晴らしい発想のフォントに出会ったのでご紹介いたします! そもそもアイコンフォントとは アルファベット1文字1文字にアイコンが割り当てられたフォントで、例えばスマートフォンサイトの製作をする時 画像でアイコンを用意する場合は通常用とRetina対応用で2サイズ用意しなければならないところを フォントであれば読み込んでCSSを設定するだけでOKという・・・面倒くさがりの私にはRetina対応の救世主とも思える存在です!! フォント=ベクターデータなので大きさ自由自在!解像度も関係なし!なのです :) しかしそんなアイコンフォントにも欠点はあり、アイコンを表示させるためにソースに意味のないアルファベットを書かなければならないのが気になるところでした。

    アイコンフォントの欠点である意味不明な文字列をリガチャ(合字)で解決したWEBフォント『Ligature Symbols』
  • スクロールしてもついてくる!ブログにソーシャルボックスをつけよう。

    こんにちは、霙です。 ウェビメモ製作時に、ページをどんなにスクロールしても横にくっついて来るソーシャルボックスを作りました。 コードを教えて欲しいという方がいたので、他の方にも需要あるかな?と思い、記事にしてみました:) 自分のサイトに使いたい方はコピペしてご自由にどうぞ! (IE6対応版にはこちら) 読者が利用するタイミング みんなが設置しているソーシャルボタン。いざ自分のブログにつけるとなるとどこに置こうか迷いますよね。 記事の最初に設置するもよし、最後に設置するもよし、両方設置するもよし。 とにかく設置するにあたって重要な事は 「どこに置けば読者の方々に押してもらいやすいのか」です。 自分が読者の立場になった時はどうですか?? 私は寂しがり屋なので、常に隣に居て欲しいんですよ・・・///// てゆうのは冗談ですが、自分だったら記事を読む前にツイート数、はてブ数を見てます。 タイトルを

    スクロールしてもついてくる!ブログにソーシャルボックスをつけよう。
  • ヌルヌルの秘訣はCSS!Googleスマホ版で採用されている使い心地のよいスライドメニューを再現した『jSlideMenu』

    以前『スマホサイトにおすすめ。jQueryプラグイン『PageSlide』を使ってFacebook風メニューを再現してみました 』という記事を書きましたが、今回は『Qiita [キータ] – プログラマの技術情報共有サービス 』にてGoogleでも採用されているCSS3のアニメーションを使ったスライドメニューというものを発見したのでご紹介します。 jQueryプラグイン『jSlideMenu』 なんでも作者の方はGoogle先生のソースコードを調査し、あのヌルヌル動くスライド部分のアニメーションがJSではなく実はCSS3のtranslateで行われていることを突き止めたんだとか。 CSSGoogleから学ぶ ヌルヌルサクサクなスライドメニュー – Qiita [キータ] スマートフォンのブラウザではjavascriptでのアニメーションはどうしてもガタガタになってしまうし、ちらつきや

    ヌルヌルの秘訣はCSS!Googleスマホ版で採用されている使い心地のよいスライドメニューを再現した『jSlideMenu』
    typista
    typista 2013/08/29
    ヌルヌルの秘訣はCSS!Googleスマホ版で採用されている使い心地のよいスライドメニューを再現した『jSlideMenu』|ウェビメモ
  • アプリデザインの参考になるギャラリーサイト+クオリティを格上げできるセンスのいい素材配布サイトの紹介

    最近、会社でも個人でもアプリの制作に関わることが徐々に増えてきた霙(@xxmiz0rexx)です。 勉強のため、そしていざ制作!となった時の強い味方をメモしておきたいと思います。 まずはインプットから。アプリのデザインはWEBデザインとはまた違うものなので、時間のある時にギャラリーサイトを眺めることは引き出しを増やすのにとても大切なことだと思います。 Mobile Patterns 画面の種類ごとに分けられているのでとても見やすいです。 アプリデザインは全体を見たいというよりはフィード画面の参考画像が欲しい!などと具体的な要望が多いのでありがたいですね。 iOS Mobile Patterns Library こちらも画面の種類ごとに分けられております。アプリのギャラリーはこういうモノなのかな。WEBデザインだとパーツごとに分けられてるのが多いですよね! こちらは拡大レンズがついているので

    アプリデザインの参考になるギャラリーサイト+クオリティを格上げできるセンスのいい素材配布サイトの紹介
    typista
    typista 2013/03/13
    ぽけったー アプリデザインの参考になるギャラリーサイト+クオリティを格上げできるセンスのいい素材配布サイトの紹介
  • 恋する速度を爆速化。Sublime TextでZen-Codingを使用する際の設定メモ

    先日「恋に落ちるエディタ」Sublime Textの勉強会に参加してきた霙(@xxmiz0rexx)です。 エディタの便利さ、優雅さ、魅力などを語るのは別の機会にするとして、 今回はそのSublime Textで、爆速コーディング用プラグイン「Zen-Coding」先生を使えるようにする設定方法を学んできましたので、備忘録もかねて記事にしたいとおもいます。これから使ってみようと思っている方は是非! Sublime TextにZen-Codingプラグインを入れる手順 他のアプリみたいに設定画面で操作できないので変な感じですが、やってしまえば意外とあっさり終わります。 1.Sublime Textをダウンロードする まずはSublime Textがなくては始まりませんね。 公式サイトに行ってダウンロード、そしてパソコンにインストールしましょう! 参考:Sublime Text: The te

    恋する速度を爆速化。Sublime TextでZen-Codingを使用する際の設定メモ
    typista
    typista 2013/02/02
    ぽけったー 恋する速度を爆速化。Sublime TextでZen-Codingを使用する際の設定メモ
  • [商用利用OK]デザインに行き詰まった時に刺激をもらえるUIエレメント検索サイト『UICloud』

    あけましてめでとうございます。年末年始 魔の9連休により完全にダメ人間化した霙(@xxmiz0rexx)です。2013年一記事目は最近出会った素敵なサイト『UICloud 』のご紹介をしたいと思います ;) 『UICloud 』は、ボタンやフォームなどの細かいパーツからダッシュボードのデザインまで幅広いUIデザインを検索でき、ありがたい事にすべてpsdデータがダウンロードできる素晴らしいサイトでございます。 サイトで使われている言語は英語ですが、検索する単語は慣れ親しんだWEB用語(buttonとかsearch formとか)ですし、 ライセンス表記もぱっと見て分かるところ(サイドバー最上部)にあるので特に困ることはないですね :) クオリティの高いデザインばかりなので見ているだけで刺激になりますよ! もちろん、商用利用可能なので素材をそのまま使ってもOK! いくつか見たところライセンスは

    [商用利用OK]デザインに行き詰まった時に刺激をもらえるUIエレメント検索サイト『UICloud』
    typista
    typista 2013/01/16
    ぽけったー [商用利用OK]デザインに行き詰まった時に刺激をもらえるUIエレメント検索サイト『UICloud』
  • 1