haru135のブックマーク - はてなブックマーク

Sublime TextでMarkdownを快適に書くためのプラグインと設定

メモ書きやらブログの下書きにMarkdownを使い始めたわけなんですが、まぁこれが快適でして。さっくり下書きできて後で簡単にhtmlに起こせると言うのが嬉しいです。学習コストも大した事ないし。 Markdown使うためにMac、iPhone、iPadに導入したエディタアプリで、↑の記事ではMacでMarkdownを書く時にMouを利用し、ときたまSublime Textを使っていると書いたのですがメインエディタをやっぱりST2にしました。キャレットが増やせなかったり、やっぱりビジュアルが我慢できなかったり、Mouを使ってると「もう〜」ってなる瞬間が多かったので。Mouだけに。Mouと感嘆詞の「もう〜」がかかってます。すごい。そんなわけで今回はSublime TextでMarkdownを快適に書くために導入したプラグインと設定を書いておこうかと思います。（なお、私の環境はMac + S

haru135 2014/07/18

リンク

コピペが出来るなら誰でも出来る、Web制作タスク自動化ツール「Grunt」導入手順

なんだか、Web制作の際に起こる様々な面倒くさいタスクを自動化してくれるGruntというツールがあるらしく、私の周りのWebデザイナーさんやコーダーさんがこぞって導入されておりました。はじめは「へぇ…あちきは別に興味ないからいいでありんすよ」と指をくわえて傍観していたのですが、便利便利の声を聞くにつれやっぱり羨ましくなってきました。だから導入した。使った。良かった。そんな訳で今回は、Grunt.jsの導入から簡単な使い方までを紹介したいと思います。私のような黒い画面に抵抗を持っている初心者の方でも導入できるよう、コピペさえ出来ればGruntが使えるようになる記事にしてあるつもりです。なお、今回導入した私のPC環境はOS X 10.9.1です。Windowsでの導入手順は今更だけどやるgrunt入門編・インストールから基本的な使い方｜WEB Drawerをご覧下さい。 Gruntで何が

haru135 2014/02/07

リンク

Sass初心者から上級者まで超オススメの本！「Web制作者のためのSassの教科書」がいいぜ！！

書籍概要 Webサイト制作に必須のCSSを、より便利に効率的に書けるようにパワーアップさせた「Sass」(サス)についての教科書的な解説書が登場! Sassって聞いたことはあるけど、導入が面倒そうという方 Sassを始めてみたいと思っているが、今一歩踏み出せない方勉強コストとの天秤に掛けて、Sassのメリットがイマイチ見えてこない方周りでSassを使い出した人がいて、焦りを感じている方 CSSを今よりも効率的に書きたいと思っている方これらの方がSassを導入するきっかけとなり、ひと通りSassの機能を使いこなせるようになるのが本書の目標です。（中略）本書では、Sassの機能だけでなく、Sassの概要から利用環境の整え方まで丁寧に解説しています。また、より実践的な内容やCompassなどのフレームワークなど、Sassを使いこなすために必要な内容を網羅しています。 via: Ama

haru135 2013/12/17

わたしも会社におきっぱなしにしていつでも読めるようにしてるｗ

リンク

画像ファイルを一括でリネーム＆リサイズしてくれるMacアプリ「iMage Tools」がとんでもなく便利だ！

使い方使い方は非常に簡単。まずは画像を一式（もしくは画像フォルダを）アプリウィンドウにドラッグ＆ドロップします。するとこんな感じ。画像に一括で施せる処理はリサイズリネームウォーターマーク境界線反射角丸影の7つ。リサイズは横幅、縦幅、パーセンテージ、正方形のリサイズができます。リネームは元の名前、連番、作成日、リネーム日のテンプレートが最初から用意されておりますので適宜使いましょう:) 連番は桁数も選択することが出来るのです。気が利いてるぅ。その他、角丸や境界線など一括で行いたい処理をチョイスしたらStartボタンをクリック。画像の保存先を選択すれば完了です！ご覧の通り、全ての画像のリネーム＆リサイズが一括で出来ましたことよ！！！嗚呼便利！！！

haru135 2013/12/11

リンク

[有楽町・日比谷]昭和の香り漂う店内でいただく牛骨ラーメン！24時間営業で締めにもピッタリの「ちょい呑み餃子」さん

先日親友の結婚式終わりで朝まで飲んでいたのですが、「締めにラーメンが食べたい」とのたまう所持金が1,000円の友人らを引き連れ、有楽町はコリドー街近くにあります「ちょい呑み餃子」さんへ行ってまいりました。有楽町駅、日比谷駅から歩いて数分の場所。まるで昭和にタイムスリップしたかのような通りにお店はございます。店内もこんな雰囲気。わたし、こういうお店大好きなんです。さぁて注文…餃子やっす！！よーしそれじゃあ餃子と牛骨ラーメンおくれやす！いい年して所持金が1,000円の友人。待つこと5分…やってきました牛骨ラーメン！！ネギたんまり！朝まで飲みほうけていた私たちにはもってこいだぜ！麺はご覧の極細麺。牛骨スープとよく合います！何やらこのラーメン、ゴマとコショウをたんまりとかけるのが美味しくいただく秘訣とのこと。店長さんの教え通り、「やりすぎじゃなかろか」というほどかけてみました。こ、

haru135 2013/12/11

リンク

[RICOH GR]代々木公園の紅葉が綺麗だったので写真を撮ってきました。

先日代々木公園を全裸でふらっと訪れたのですが、紅葉が綺麗でしたので愛機RICOH GRでパシャパシャやってきました。セッティングとかエフェクトは全然覚えておりません。紅葉とは関係のない写真も時折ありますが折角なんでシェアしておこうと思います。

haru135 2013/12/03

リンク

Web初心者だった私がWEBデザイナーになって1年半で勉強したこと・使用しているツールまとめ

プロフィールに記しておりますとおり、私は現在デザイン会社にて働いております。昨年の3月、5年ほどやっていた「DTP・グラフィックのデザイン・レイアウト業務」から「Web担当」に相なり、日々勉強しながら仕事に臨んでおると言う状況です。そのちょっと前までHTMLは妖精が書いていると思っていた私にとって、あまりに勝手の違う作業内容。最初は途方に暮れておりましたが、Twitter等で知り合うことのできた先輩Webデザイナーさん達のおかげもあり、現在では自分でWordPressのテーマを作成できるまでに成長することができました。頭を叩くと「ｾﾏﾝﾃｨｯｸ!」と音が鳴るまでになりました。そんなわけでここいらで一度、自分がDTP→WEB担当になるにあたって勉強したこととか使っているツールとかをデロッとまとめておきたいと思います。まずは業務をする上で必要不可欠になった言語や、作業効率を上げるために

haru135 2013/11/05

リンク

〜無料写真素材界に革命を〜無料写真素材サイト「PAKUTASO（ぱくたそ）」さんにてモデルデビューしました

ガラス戸にたたきつけられたはんぺんみたいな顔をしている私@OZPA ですが、このたび、WEB制作向けの無料写真素材サイトPAKUTASO（ぱくたそ）さんとコラボレーション企画を行いまして、モデルデビューをしてしまいました。コラボレーションのタイトルは究極の喜怒哀楽～踏まれる男と色んないいね！～となっております。究極の喜怒哀楽～踏まれる男と色んないいね！～ | PAKUTASO/ぱくたそ-WEB制作向けの無料写真素材/商用可コラボ内容ブログ「OZPAの表4」の管理人OZPA（おつぱ）をモデルに、様々な感情を露わにする男性の様子をリリースしました。 via: コラボ情報：究極の喜怒哀楽～踏まれる男と色んないいね！～ | PAKUTASO/ぱくたそ-WEB制作向けの無料写真素材/商用可立案→準備事の起こりは今年に入って@susipaku さんと食事をしたときのこと。 @susipak

haru135 2013/07/11

リンク

[罰ゲームもあるよ！] 株式会社LIGの皆さんと「HTML5カルタ」で壮絶にバトってきました

昨日の更新にて株式会社LIGさんに遊びに行ってきた事をお伝えいたしましたが、段田さんに吹っ飛ばされるのがメインだったわけではありません。そんなわけで、遊びに行った本来の目的である（聞かされてなかったけど）、HTML5KARUTA対決に臨んでまいりました:) チーム戦がアツイ！「HTML5KARUTA」は、これからのweb制作という技術において必須とされるマークアップ言語「HTML5」を遊びながら学ぶことが出来る、学習のためのツールです！札には一枚一枚、HTML5における要素を定義するタグが印刷されており、プレイヤーは読み札で読み上げられるタグの説明から、該当するタグの札を探し出し、札を取ります。 via: HTML5KARUTA カルタで遊びながらHTML5を学べる学習ゲーム HTML5全タグの名称・意味を学ぶために作られた「HTML5KARUTA」。私もお正月に一度やらせて頂きまし

haru135 2013/04/10

リンク

社長を砂浜で埋める事で有名な株式会社LIGさんへ遊びに行って、プログラマーの段田さんに吹っ飛ばされてきました

個人的にはAltタグとtitleタグで遊んでいる会社と言うイメージしかないのですが、WEBCRE8.jpの@glatyou さんが「LIGに遊びに行くんですけど、おつぱさん行きませんか？」と誘ってくださったのでちょっくらどんな会社なのか見学に行ってまいりました。（なお、写真の一部は@susipaku さんからご提供頂きました。ありがとうございます！）最寄り駅は入谷 20:45鴬谷駅に集合した一向。メンバーは@glatyou さん、@susipaku さん、@YumiSora さん、@poyosi さん、@kojika17 さん、@Bamboo_C さん、@haru1351 さん、@madloverxxx さん。（@Yumisora さんは後から合流）「21:00から会社にお邪魔する」とのことでしたので当然それを見越しての集合だと思っていたのですが、約20分程歩かされました。@glat

haru135 2013/04/10

リンク

ショートカットが一目でわかる、Photoshop・Illustrator初心者にうってつけのシール！「Ps/Aiショートカットステッカー」

Photoshop、Illustratorを効率良く使いこなすには切っても切れないテクニック。そうそれがショートカット。関連：[備忘録]Mac使うなら当然覚えておくべき、ショートカット時に使用する修飾キー記号の読み方についてただ、アプリを使いはじめのころはショートカットをなかなか覚えきれず、イライラがつのって爪を噛み切り、キーボードに血がにじんだりするものです。そうです、鮮血のキーボードです。そんなあなたにうってつけの、ショートカットが一目でわかるシール「Ps/Aiショートカットステッカー」のご紹介です。（商品をファーイーストガジェット様よりご提供頂きました。ありがとうございます！） Ps/Ai shortcut sticker（Ps/Aiショートカットステッカー）重ねて使えるこちらがショートカットステッカー（Photoshop ver.）です:) 裏面には様々な説明書きがござい

haru135 2013/04/03

リンク

imgタグを記述するだけでダミーの画像を表示してくれるサービス「lorempixel」が便利

Web制作をしていると、ダミー画像を用意しなければならない！なんて時が頻繁にあってわりかし手間なのですが、こういうサービスあったんですね…知らなかった。と言うわけで、WEBマーケティングブログさんで紹介されていた、imgタグ内でサイズ・ジャンルなどを指定すれば自動的にダミー画像を作成してくれるサービス、lorempixelがとっても便利でしたのでご紹介。 lorempixelの使い方まずはlorempixelへ訪れましょう。 lorempixelでは、imgタグ内のsrcをhttp://lorempixel.com/width/height/カテゴリ/ダミーテキストのように記述することで、サイズ・ジャンル・カラーorモノクロ指定したダミー画像を読み込んでくれます。 [html] <img src="http://lorempixel.com/500/350/food" alt=""

haru135 2013/01/29

ダミー画像

リンク

[食べた]渋谷で鮮魚！お魚の美味しい「魚真渋谷店」さんに行ってきた！

しこ名を付けるなら「魚好山」ですかね… と、言うわけで渋谷は道玄坂にあります「魚真渋谷店」さんに行って参りました！お店は渋谷の道玄坂方面。ドンキホーテを越えてちょっといったあたり。ホテル街の入り口なので色々あれだ！カウンターには新鮮なお魚天国が。有無を言わさずどんどんいきましょう。まずは白子ポン酢！とろっとろの白子が口の中でとろけます。まるで新鮮な白子のよう。最近このおつまみよく見る気がしますが気のせいでしょうか？クリームチーズの味噌漬け！うまい！そしてお待たせしましたウニ入りのお刺身盛り合わせ！！うまそー！！ウニは…いいよね… ほんとに新鮮で美味しかった！ブリも最高だったなー当然お寿司もおいしいですしおすし！日本酒も各種取り揃ってました。こちらは「酒一途」という純米吟醸。スキッとしてて好きっそしてこちらが店員さんオススメ、ブリカブト！「フン…喰えるモンなら…喰って

haru135 2013/01/24

リンク

Webページの表示速度アップに欠かせないCSSスプライトを超簡単に作成してくれるサイト「SpriteMachine」

Webページの表示速度をアップするために、アイコンやロゴなどの画像を1枚にまとめるテクニック。それが「CSSスプライト」なのですが、これって画像の作成とか位置の指定とか色々と面倒くさいんですよね。そんなCSSスプライトを簡単に実装するためのWebサイトSprit eMachineのご紹介。スプライトマシーン…すごく…イイ名前です… imgを圧縮してアップロードするだけサイトに訪れたらまずは画像配置のレイアウトと吐き出すコードのフォーマットを決めます。ちなみにフォーマットはCSSだけではなく、SCSSやSASSも選択可能です。次に、CSSスプライトにする画像をひとまとめにして、そのフォルダを圧縮、ZIPファイルにしましょう。そしてそのファイルを上の場所にアップロードすると… 自動的に「sprit emachine」というフォルダがダウンロードされます:) フォルダの中身はpng画像とc

haru135 2013/01/17

リンク

よく使用するWebアプリを「アプリケーション化」してくれるMacアプリ、「Fluid」が超便利だ！

よく使うWebアプリを「アプリケーション化」！こちらのMacアプリ「Fluid」は、先日のPogoplug Family ブロガーミーティングの中で[N]ネタフルの@kogure さんが紹介されていたモノです。早速起動してみましょう。その使い方は非常にシンプルです。まずは、アプリケーション化したいWebアプリのURLをコピーします。今回は、Webアプリ版のEvernoteをアプリケーション化してみましょう。「URL」欄にコピーしたURLを入力、アプリ名を作成します。「Icon」は、WebページのFaviconを使用する場合はそのまま「Use Website Favicon」を選択すればOKです。なんか上手くいかない時もあるのでそういう時は別途pngファイルを用意しましょう。保存先を選択して、Saveをクリック！でけた！アプリが作成されたらFluid自体は終了して構いませ

haru135 2013/01/16

リンク

[Web練習帳]ブログの表示速度をアップするために「CSSスプライト」を導入してみたのでその手順メモ

CSS Carved Pumpkin / mauricesvay どうも、Webのおべんきょうちゅう、おつぱ（ @OZPA ）です。今回は、ブログの表示速度を少しでも上げるために「CSSスプライト」を実装してみました。 CSSスプライトとは Webページ内で使用する複数の画像をひとつにまとめ、ポジションを指定することにより表示をさせるという手法、それが「秘技 CSSスプライト」。今回はストライプじゃ無くてほんとにスプライト。関連：[ｼｭﾜｼｭﾜ]Webページの表組み（table）を「スプライト」にする[ｼｭﾜｼｭﾜ] | OZPAの表4 詳しくはWebクリエイターボックスさんの以下の記事をどうぞ。 CSSスプライトで画像を円滑に表示させる | Webクリエイターボックスさて、練習がてら、jQueryをいじってはブログの仕掛けに取り入れている私。ブログトップに、位置固定のソーシャル

haru135 2013/01/12

CSSスプライト

リンク

WebページのCSSプロパティ・値をワンクリックで表示してくれるブックマークレット「XRAY」が神便利！！！

こんな便利なんあったん… Webページ制作でよく利用されるのが「Firebug」などのデベロッパーツールですが、もっと超絶簡単にCSSプロパティを確認できるブックマークレットがありました。っていうかその存在を知りました。そんなわけでXRAYと言うブックマークレットのご紹介。使い方は簡単、サイトに訪れたら中央部分にあるボタン状のブックマークレットをブックマークバーへD&Dします。これにて準備は完了。 CSSを覗きたいサイトを訪れたら先ほど登録したブックマークレットを起動。 XRAYが立ち上がります。あとはページ上の要素をクリック！すると、その要素のプロパティ・値がご覧のように表示されるのです！なにこれお手軽！便利！要素のwidth・heightも確認できます。そんなわけで簡単ではございますが、CSSを表示してくれるブックマークレット「XRAY」のご紹介でした。ちょっとしたCSSデ

haru135 2013/01/11

tool

リンク

[Mac OS]OS Xにおけるフォント（font）ファイルの保存場所3ヶ所とその意味について｜およびインストール方法

昨日フォントのおはなしをしましたのでちょいと関連した記事をば。 Macには「フォント」を司るフォルダが3つ存在しております。その場所と意味をきちんととらえていないと時たまとんでもない事故が起こったりするので記しておきます。フォントファイルは3つ Macのフォントファイルは合計3つ。システム/ライブラリ/Fonts ライブラリ/Fonts ユーザ/ライブラリ/Fonts の三ヶ所。システム/ライブラリ/Fonts Macintosh HD内、「システム」の「ライブラリ」にあるフォントフォルダ。ここにはMacのシステム自体が使用するフォントが収められています。システムが使用するフォントですので、このファイルを弄ることは基本厳禁で、ファイル内のフォントを消去したり、追加したりすることはやめましょう。とんでもない事が起こったりします。ライブラリ/Fonts 次にMacintosh H

haru135 2013/01/11

リンク

[食べた] 江ノ電を見ながらあんみつを…鎌倉・和田塚にある甘味処「無心庵」さん

えっのっでんーぼっおっやはーみらいをはこーぶーそんなわけで先日、鎌倉から江ノ電で一駅の和田塚駅より徒歩0分の場所にございます甘味処「無心庵」さんにいってまいりました:) 徒歩0分は伊達じゃない…っていうか駅のホームからお店が見えてます。線路に面したお店。なんとも風情があります。外観と庵内の写真。落ち着いた雰囲気です。入ってすぐの場所には囲炉裏もあり、忙しい現代から隔絶された世界に訪れたような気分になりました。あんみつ！あんみつぅー！右側の器にはたっぷり黒蜜が入っております。苗字を自由に変えられる権利を手にいれたら「黒蜜」にしようと思っているほど黒蜜好きの私。あっと言う間に完食でした！風情…？風情で腹が膨れるのかい！まぁそれは冗談で、いつもと違う空気の中でいただくあんみつは本当に格別でございましたよ:) ごちそうさま！またくるぜ！

haru135 2013/01/04

リンク

2013年、明けましておめでとうございます。29歳になりました

2013年の膜が間違えた幕が開けました。 OZPAの表4をご覧の皆様、明けましておめでとうございます！元日が誕生日の私。本日を持ちまして人間で言うところの29歳、犬で言うところの3歳くらいになりました。もう、あの日から、そんなに経つのですね。節目である30代まであと1年。全然実感が湧かないのですが、本年も一日一日を大事に過ごして参る所存です。当サイトにおきましても、今まで通りばかばかしくも役に立つ、そんな更新を続けられるように頑張って参ります。今年の目標は篠崎愛ちゃんに会うことです。まぁ、そんなこんなで本年も何とぞよろしくお願いいたします:) P.S.トップの画像、お正月バージョンの私の似顔絵はSNS用似顔絵サービス、「ふじもなおのアトリエ」さんよりプレゼントしていただきました！めっちゃかっこいい！ありがとう！ SNSアイコン向け、かわいい似顔絵『ふじもなおのアトリエ』

haru135 2013/01/01

リンク

はてなブックマーク

タグ

ブックマーク / ozpa-h4.com (59)

お知らせ

今週のはてなブックマーク数ランキング（2025年2月第3週）

今週のはてなブックマーク数ランキング（2025年2月第2週）

月間はてなブックマーク数ランキング（2025年1月）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス