【Rails】デザイン〜プログラム作業の連携 KRAYの場合
お寿司大好き！ KRAY の亀井です （好きなネタは炙りサーモンです） 巷ではデザイナーとプログラマーの協業についてのブログ記事を見かけたり、webプログラマーの「HTMLのzip納品つらい」という声が聞こえたりします。 デザイン（HTML コーディング）とプログラムの連携作業については、悩んでいる人が多い印象を受けます。。 デザイナーとプログラマーの協業 KRAY でもデザインとプログラムの連携については改善を試みています。 今回は KRAY でのデザイン 〜 プログラム間の連携作業について書いていきたいと思います。 KRAY は Rails を主に使っているので、Rails の場合の話になります どちらかというと HTML コーディング 〜 プログラム間の作業の話が主です 今までのやりかた KRAY はシステム開発専門の会社なので、社内にデザイナーがいません。 なのでデザインはパートナ
MacBookAir の容量がきついので Vagrant 環境を外付けに移した話
僕は普段 MacBookAir の 128GB を使っているのですが、最近 Vagrant でローカルに開発環境を作るようになり、複数の VM が容量を圧迫するようになっていました。調べてみると Vagrant の環境を外付けHDDなどに移すことができるようだったので、手持ちのポータブルHDDに移してみました。 ここでは下記の構成で移動させました。 ファイルディレクトリ /Volumes/data/htdocs/www.example.jp/vccw/Vagrantfile Vagrant データ /Volumes/data/htdocs/vagrant_home/ VirtualBox データ /Volumes/data/htdocs/vagrant_vms/ VirtualBox Vagrant の環境を外付けに移すには、まず VirtualBox の設定を変更する必要があります（僕は
【CSS】横幅が可変な要素を中央寄せにする - tanihiro.log
margin: 0 auto;で中央寄せするためには要素の幅を指定しないといけないので、横幅が可変な場合はこの方法では中央寄せにできません。 inline-blockを使えばできるみたいです。 <div class="pager_wrapper"> <ul class="pager"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> .pager_wrapper { text-align: center; } .pager { display: inline-block; } 中央寄せにしたい横幅が可変な要素を更にdivタグなどで囲い、外側の要素にtext-align: center;を指定します。 中央寄せにしたい要素は、display: inline-block;を指定します。 これで、親要素のte
jQueryでコンテンツ要素を点滅させる方法｜BLACKFLAG
Webページ上のテキストや画像などの要素を点滅させるには、 古いものでは＜blink＞タグだったり、CSSでの「text-decoration:blink;」などがあったりしますが タグ自体が廃止タグだったり、ブラウザが対応していなかったりであまり使い物になりません。 そこで、テキストや画像などのコンテンツ要素を jQueryで簡単に点滅させる方法について自分用メモ程度に紹介してみます。 jQueryで点滅 jQueryでの点滅はいろいろやり方がありますが シンプルな方法として、対象物に対してfadeInとfadeOutを続けて指定することで 簡単に実現することができます。 例として、画像＜img＞タグを点滅させる場合のスクリプトは以下のようになります。 ※今回はHTML／CSSはあまり重要でないので割愛します。 ◆SCRIPT <script type="text/javascript"
Photoshopで写真を手書きの鉛筆画風に加工する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーの王です。絵を描くのが趣味です。 最近は絵を書く時間が全く持てなくて困っています……。 どうにか早く描けないものかと悩んだ末、表題の通り、「写真から絵を作ってしまおう」という結論に至ったわけです。 折角だし、絵が描けなくて困っている方たちにも役に立つテクニックなのではないかということで、やり方をさくっと説明してみたいと思います。 【こちらもおすすめ】 ☞ Photoshopで初めて写真加工をするときに知っておくべき基本手順まとめ 素材写真を用意する 鉛筆画らしく見せるためには、まず写真を切り抜いておきましょう。 アウトラインを抽出 次に、以下のステップを踏んで、アウトラインの抽出を行います。 cmd + Jでレイヤーを複製します。 cmd + Iで反転させます。 Shift + Alt + D で 描画モードを「覆い焼き」にします。 「色相 ・ 彩度」の調整レイヤーを
Illustrator新機能で簡単にシームレスパターン
こんにちは。デザイナーの白浜です。桜もそろそろ散り始めるころでしょうか？ 今回は春っぽく桜のモチーフを使ったシームレスなパターンの作り方をご紹介します。IllustratorCS6からの機能「パターン作成」を使えば作成も編集もあっちゅうまなのです。 モチーフを準備する まず、モチーフを準備しましょう。春らしく桜のオブジェクトを用意しました。 次になんとなくこんな感じの柄にしようかな～と思ったイメージでオブジェクトを配置していきます。 ちょっと色も替えたりすると華やかですね！ 「パターン作成」を使う シームレスパターンにしたいオブジェクトをすべて選択して「オブジェクト」→「パターン」→「作成」を選択します。 すると… 先ほど選択したオブジェクトがスウォッチに追加され、同時にパターン編集画面が表示されます。 周りにパターンを適用した際のプレビューが表示されているので、わかりやすいですね！ パタ
【MovableType】記事内の最初の画像を取得して表示する | 電脳備忘録
記事内の最初の画像を取得して表示する必要があったので、対応したときの備忘録。 MT5スマフォオプションのカスタマイズ第三弾: OGP設定とcanonical @kaoritter BLOG上記のサイトのコードをそのまま利用させていただきました。 <img src="<mt:EntryBody regex_replace="/<[^i].*?>|<i[^m]*?>|<iframe.*?>|<input.*?>|<ins.*?>|<isindex.*?>|\s/g","" regex_replace='/(.*?src=")(.*?)(".*)/g','$2' regex_replace='/^[^\.\/h].*/g',''>" /> 正直、正規表現は苦手です...。
ブログ記事本文中の最初のimgのURLを取得する | テンプレート | かたつむりくんのWWW
Movable Type のブログ記事の本文中で、最初に出てくる画像の URL（つまり img タグの src 属性）を、regex_replace モディファイアを使って取得する方法です。 regex_replace モディファイアは、MT タグが出力する結果に対して、実際に出力する前に正規表現での置換を行うことができるモディファイアです。どの MT タグにも利用できるグローバルモディファイアですね。 このモディファイアを利用して次のように書けばOKです。 <mt:EntryBody regex_replace="/<[^i].*?>|<i[^m]*?>|<iframe.*?>|<input.*?>|<ins.*?>|<isindex.*?>|\s/g","" regex_replace='/(.*?src=")(.*?)(".*)/g','$2' regex_replace="/^[^
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Easily Identify Any Webfont With Type Sample · Typewolf
HTML5J 勉強会 – visualizing.jp
Amazon.co.jp: モダン・タイポグラフィの流れ: ヨ-ロッパ・アメリカ: 田中一光, 向井周太郎: 本