サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
大谷翔平
creator.aainc.co.jp
こんにちは。すーさんです。 今日は、普段よく使うアイコンが439個もパッケージされたウェブフォント「Font Awesome」のご紹介。 アイコンはベクターデータなので、サイズの指定も自由自在、色やアニメーションなどCSSでの装飾も簡単にできて非常に使いやすいです。 Font Awesome ではさっそく使っていきましょう。 1.準備 上記サイトからファイルをダウンロードすることも出来ますが、今回はCDNを利用します <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" />
こんにちは、フロントエンドエンジニアのあつこです(ΦωΦ) 夏が終わりそうですね・・・今年はまだスイカ食べてないのに・・・ さて今回のブログからしばらく、HTML5で追加されたAPIで遊んでみようと思います。 第一回目はDrag and Drop APIについて。今回はひとまず動かすところまで。 そもそもHTML5のAPIって何よ APIというのはApplication Programming Interfaceの略なのですが、まぁ簡単に言うと便利機能をいろんなところで使いまわせるようにしたセットみたいなものです。(超ざっくりですが) ここで言う便利機能と言うのは色々な物を指しますが、 Twitterのつぶやきを取得したり出来るTwitter API 郵便番号から住所を検索できる郵便番号検索API Googleマップを自サイト内に設置できるGoogle Maps API など、多岐に渡りま
こんにちは、フロントエンドエンジニアのあつこです(ΦωΦ) 先日どうしてもSassでHSBを使用したかった際の、経緯と対処法を紹介します。 もくじ RGBとHSLとHSB 何故HSBなのか RGBとHSBの相互変換関数を書く まとめ RGBとHSLとHSB そもそもHSBは色空間の一種で、RGBやHSLと同じように3つの要素から色を特定する方法です。 ここでは代表的な色空間である、RGBとHSLとHSBについてざざっと紹介します。 RGB WEB屋さんにはお馴染みの加法混色です。 赤(Red)緑(Green)青(Blue)値はそれぞれ0→255の間で設定し、すべて足すと白になります。 HSL 色相(Hue)彩度(Saturation)輝度(Lightness)の3要素から成る色空間。 色相は0°→360°の角度、彩度と輝度は0%→100%(もしくは0→255)の間で設定します。 CSS3で
どうも。マークアップのタムラです。 今回、マークアップエンジニアとして作業しやすい環境を整えるxamppの設定方法を書きたいと思います。 xampp初心者なのですが、下記設定だけしておけば、ローカルでコーディングの作業しやすい環境がつくれます。 目次 XAMPPインストール ローカルでページを表示させてみる サイトのルート環境を複数作成する ssiを使用できるように設定する xamppをドライブから別のドライブへ移動 XAMPPインストール まず、xamppを下記サイトからインストールします。 https://www.apachefriends.org/jp/index.html インストール手順はこちらに分かりやすく記載されてますので参考にして下さい。 PHPをこれから勉強する人必見!xamppでローカル環境構築 ローカルでページを表示させてみる xamppをインストールするとhttp:
こんにちわタムラです。 ここ最近雨続きでしたが、やっと晴れ間が見えましたね。 今年は特別に夏が短かった気がしてます。 夏好きの自分としてはちょっと悲しい気持ちです。 今回はインスタグラムをコーポレートサイトや、ポートフォリオページなどに うまく取り入れてるサイトを紹介したいと思います。 インスタグラムのこだわった綺麗な写真が集まりやすいので、 その特性をうまく取り入れてると思ったサイトを集めました。 さぬきうどん未来遺産プロジェクト https://www.sanukiudon-mirai.jp/ #さぬきうどん未来遺産プロジェクト というハッシュタグで、画像を収集してます。 デザインもスッキリしていておしゃれで、新聞を見ているような感覚になります。 うどんが食べたくなるサイトです。 DANCE for 1 don't fight, just move. http://dancefor1.
こんにちは。制作部の近藤です。 今日は、CSSで扱う単位の話しをまとめてみたいと思います。 CSSでなぜ単位が必要か? 伝えるべき/伝えたい内容を伝わりやすいデザインにするためには、 様々な手法があると思いますが、もしここで単位が無かったらとても大変ですね。 主観的な基準しかなかったら、 依頼主:「ここ、めちぇくちゃでかめ、で表示したいです」 作り手:「めちゃくちゃでかめ、でやってみました」 依頼主:「めちゃくちゃでかすぎですね。ちょいでかめよりちょいでかいくらいかな??」 などのやりとりが多発し、大変困りそうです。 ブラウザに、「ちょいでかめ」と指示を出すのは難しそう・・。 単位があれば、上記すべて解決できるわけではありませんが、 ブラウザに指示を出しやすくなります。 CSSで使える単位一覧 CSSで指定できる主な単位には、以下があります。 単位 概要 基準 px
こんにちは、デザイナーのてっちゃんです。 これを書いている現在ハロウィン真っ最中です。渋谷を避けて行動しましたがそれでも仮装しているひとを見かけましたね。 みなさんは参加されましたか? さて今回は、レスポンシブHTMLメールを作ったのでその時の感想をまとめてみました。 まずは、そもそもなんでレスポンシブなの?意味あるの?ってはなしですが、 背景 Email Monksの調査によると、2013年に43%のemailがモバイル経由で読まれており、年末には50を超えるだろうとの予測がされていることから2015年の今ではこれだけとってもHTMLメールはレスポンシブ対応をしないとユーザーは読んでれくないでしょう。 出展:EmailMonks 仕様 レスポンシブなのでmedia queryをを使う必要がありますが、そもそもmedia queryが使えない場合もあるので最低限PC表示で崩れないようにする
こんにちは、フロントエンドエンジニアのあつこです(ΦωΦ) 今回は、現行サービスのCSSをリファクタリングした話とどんな影響があったかをまとめたいと思います。 もくじ 経緯とか 実際にした5つのこと まとめ 経緯とか 開発期間約9ヶ月、リリースして1年の現行サービスのCSSが大変なことになっていたので リファクタリングすることにしました。 ちなみにリファクタリングとは、 ソフトウェア開発では、ソースコードの作成が進むにつれて、中途での設計変更やバグフィックスなどでプログラムは冗長で汚いものとなっていくことが多い。これらの問題点を解決し、将来の仕様変更に柔軟に対応できるようソースコードの手直しを行うことを「リファクタリング」という。 リファクタリングとは|refactoring - 意味/解説/説明/定義 : IT用語辞典 ということのようです。 問題点は大きくわけて2つ。 1. コーディン
こんにちは。すーさんです。 今日はkeynoteの使い方のご紹介!と言ってもプレゼンスライドの作り方ではなく、keynoteを使ってアニメーションプロトタイプを作るとプロジェクトが円滑に進むよ!って感じのお話です。 「ボタンを押すと上からぐいぃーん!てボックスが出てきて、シュッ!シュッ!シュッ!って要素が出てくる感じ〜。。。。。」って言うよくあるシーンでとっても活躍してくれます。 完成型 「ボタンを押すと上からぐいぃーん!てボックスが出てきて、シュッ!シュッ!シュッ!って要素が出てくる感じ」のニュアンスを伝えるアニメーションを作ってみました。PCサイトのヘッダー部分の動きです。 どうでしょうか?言葉では伝わりきらなかった動きの速さやタイミングが明確に理解出来るようになったと思います。では早速イチから作って行きましょう 1)新規ドキュメントの作成 まず新規ドキュメントのサイズを設定します。右
こんにちは。ディレクターの中橋です。 GWが近づいてきましたね。海外旅行を予定されている方もいるんじゃないでしょうか。ああ羨ましい。。 ということで、旅に出る人も出ない人も、旅が好きなら絶対グッとくる旅行系メディアを紹介してみたいと思います。 旅行系メディアをピックアップ TABI LABO http://tabi-labo.com/ まずは有名なTABI LABO。世界で起きているあらゆるトピックを扱う「世界とつながるネクストマガジン」なんだそうです。写真が活きるシンプルで洗練されたデザインですね。レスポンシブでよく考えられているUIは勉強になります。 RETRIP - 旅行キュレーションメディア http://retrip.jp/ Trippiece が提供するキュレーションメディア。今のところ圧倒的に日本の記事が多いですね。キュレーターとして承認されるとまとめ記事を作れるようになり、
こんにちは、フロントエンドエンジニアのあつこです(ΦωΦ) まさかgulpネタをこんなに引っ張ることになるとは思わず、アイキャッチは使いまわしです。 今回は、細かい便利な機能をgulpに乗せてみましょう。 今までの記事はこちら gulp入門その1―とりあえず動かすところまで gulp入門その2―ファイルの監視をしてみる もくじ 同期処理をする ローカルサーバを立ててライブリロードする CSSのminifyしたりプロパティを並び替えたりする package.jsonでモジュールを管理する まとめ ※今回は手順にプラグインのインストールを含めません。 インストール方法は前回・前々回の記事を参照にしてください。 同期処理をする 初回からさんざん書く書く言っていた同期処理です。 そもそもgulpは非同期処理なのでタスクの完了が早いわけですが、どうしても同期的に処理したい場合もあります。 そこでru
先週もblogを書かせてもらいましたタムラです。 最近は矢沢永吉とPerfumeを作業用BGMとして仕事してます。 今回はコーダーが知っとくと効率が上がるPhotoshop操作を5つを紹介します。 項目は下記になります。 目次 選択範囲をそのままコピーする。 gif画像を直接編集したい。 たくさんのサムネイル画像を量産したい! レイヤーからスライスを作成する 選択範囲からスライスを作るアクション作成 1.選択範囲をそのままコピーする 「Ctrl+Shift+C」で選択範囲をそのままコピーできます! レイヤーがばらばらの状態モノのを 選択範囲をとってCtrl+Shift+Cでコピーしてあげることで そのままペタって貼り付けることが出来ます。 2.gif画像を直接編集したい gif画像を直接photoshopで開くとレイヤーに「インデックス」とかいてあり、直接編集できないようになってます。 そ
指定した要素がスクロールで画面内に入った時、イベントを発動させるjQueryプラグインjquery-scrollInFunc.js 前回公開した「指定した要素がスクロールで画面内に入った時、内包要素を順番にフェードインするjQueryプラグインjquery-scrollInTurn.js」ですが、最近このプラグインだけでは物足りなくなってきました。 「指定した要素がスクロールで画面内に入った時」、特定のアニメーション効果などを実装したいときが多々あったので、その部分に特化したプラグインをもうひとつ作りました。 その名も「指定した要素がスクロールで画面内に入った時、イベントを発動させるjQueryプラグインjquery-scrollInFunc.js」です! ファーストビューに入っていない要素に対してのアニメーションを、スクロール位置によって発動させることができます。 もくじ Demo Do
こんにちは。すーさんです。 今回はGoogleが提唱したデザインガイドライン「MaterialDesign」をWEBに取り入れる為のUIフレームワークをご紹介します。 Materialize まずはBootstrapライクなCSSフレームワーク。コンポーネントとドキュメントも一通り揃っており使いやすそうです。 Materialize Material Design for Bootstrap こちらはBootstrapベースのCSSフレームワーク。BootstrapコンポーネントもすべてMaterialDesignになっています Material Design for Bootstrap Paper Bootswatch for Bootstrap こちらもBootstrapベースのCSSフレームワーク。Bootstrapのテーマとして配布されています http://bootswatch.
こんにちは、ディレクターの岡田です。 今回は、世界でヒットしている日本初のゲームアプリで僕が気になったものを下記3つをご紹介させて頂きます。 1.脳トレゲームアプリ「BrainWars」 2.無駄タップアプリ「100万のタマゴ」 3.急成長中ベンチャー「KOYONPLETE(コヨンプリート)」の「オトメゲーム」 脳トレゲームアプリ「BrainWars」 http://translimit.co.jp/services/brainwars.html 公開半年で700万ダウンロード。海外ユーザー比率95% まず1つ目は、脳トレゲームアプリの「BrainWars」です。 今年2014年5月14日に公開してから、半年で700万ダウンロード到達という急成長をしており、そのうち海外ユーザー比率は95%ほどとなっているようです。(2014年11月時点) 急成長ぶりがすごいですが、広告なしで達成というとこ
こんにちは、フロントエンドエンジニアのあつこです(ΦωΦ) 前回に引き続き、gulpについてつらつら書いていきます。 前回の記事はこちらgulp入門その1―とりあえず動かすところまで 同期処理やらについても書きたかったのですが、書き始めてみたらやたら長くなってしまったので分割。 今回は、ファイルの監視(+エラー時の通知)をしてみます。 もくじ デフォルトで実行されるタスクを設定する ファイルの監視をする タスクの監視中にエラーが起きた場合 エラーによる監視の強制停止を回避する エラーメッセージを表示する まとめ デフォルトで実行されるタスクを設定する 何はともあれgulpを起動したら一番最初に実行したいタスクを設定します。
前回書いた静的サイトジェネレータ「Phest」導入のメリット5の続編です。 前回は初期コーディング時に導入した際の話を書きました。 今回は既にあるサイトのリニューアルや、商品追加などのある程度規模の大きい更新に対してPhestを使ってみた時の話です。 リニューアルや更新はもしかしたら初期構築よりややこしいかもしれません… 既存のソースを理解し、影響範囲を常に意識しながら作業する必要があります。 だいたい既存のソースをある程度ひっぱってきてテスト環境を作り、変更したファイルを書き留めながら進めます。 小さい規模だとこのやり方でいいのですが、規模が大きくなってくると手に負えなくなってしまいます。 なので、Phestで楽になりましょう! もくじ そもそも静的サイトジェネレータとは? メリット1:変更のあるファイルのみをまとめておき、編集できる メリット2:既存のcssファイルに対して、sassを
こんにちは、てっちゃんです。 みなさんはお花見しましたか?今年は安定した暖かさで例年よりもすごしやすかったなと思いました。 そして、私事ですがこの春から花粉症デビューになりそうというお話をいただきまして、毎日マスクが手放せません。いやー、のどのイガイガがたまらなく嫌ですね。 今回は、cssの設計について調べたことを書いていこうと思います。 弊社でもフロントエンド陣によりある程度のコーディングガイドラインは決まっていますが、 記述の細かい仕様までには及んでいません。コンポーネントの作り方なども人によって差異が出てきます。 複数人で作業とも慣れば尚更その差異は大きくなります。cssは記述自体はとても簡単でそれゆえに、とてももろくすぐに壊れてしまいます。 参考:なんでCSSすぐ死んでしまうん そこで壊れにくcssを設計するためには以下が重要だと言われています。 拡張性 保守性 明瞭性 参考:CS
こんにちは、フロントエンドエンジニアのあつこです(ΦωΦ) 春ですね!新年度ですね!一年が過ぎるのがどんどん早くなっていく気がします… 今回はStyleStatsというツールを使ってCSSの健康チェックをしたいと思います。 それだけではつまらないので、+αとして健康状態のデータを継続的にJSONファイルに溜めるようにしてみましょう。 ついでに出てきたファイルを使ってD3.jsでグラフを書きます。 もくじ StyleStatsってなに? 使ってみる ファイルに吐き出してみよう おまけ:D3.jsでグラフをつくろう まとめ StyleStatsってなに? CSSとは実は非常に脆いものです。 複数人での開発や、大規模案件など、CSSは常に汚染の危機に晒されています。 似たような色をいくつも使っていたり、!importantが乱発されていたり、Sassのネストが深すぎてセレクタ祭だったり…… 考え
こんちには! ファッションやお買い物が大好きなかとぅーです! 今や生活にしっかり浸透してきているEコマースやソーシャルメディア! 最近ではスマホのアプリでモノを気軽に売るできるC2Cコマースサービスの登場で 個人でも簡単に「売り手」になることができるようになってきました。 今回は私が良く利用しているおすすめの「フリマアプリ」をご紹介します!!! LINE MALL(ラインモール) 企業:LINE メインターゲットユーザー層:20代以降の女性が中心 料金:出品・購入手数料無料、購入代金の1%はポイントとして加算され次回の購入時に1ポイント1円として利用できる。 LINE MALLはUIがシンプルでかわいい感じが気に入っています。 特徴はユーザー同士の直接的な金銭のやり取りはなく、最初から最後までLINE MALLが管理してくれること! 金銭的なトラブルを防止できるので、安心です。 Fril(
こんにちわ。 マークアップの田村です。 2週連続でクリエーターブログを書かせていただきます。 今回はコーダーの皆さんはぜひ使っていただきたい「photoshop2014」のアセット機能を紹介したいと思います。 アセット機能とは? photoshopヘルプから引用させていただきます。 PSD ファイルのレイヤーまたはレイヤーグループのコンテンツから JPEG、PNG または GIF 画像アセットを生成できます。サポートされている画像形式の拡張子をレイヤー名またはレイヤーグループ名に追加すると、アセットが自動的に生成されます。また、生成される画像アセットの画質およびサイズパラメーターを指定することもできます。 PSD ファイルからの画像アセットの生成は、マルチデバイス Web デザインで特に役立ちます。 上記に記載の通り、スライスで画像を書き出すのではなく、レイヤーから画像を生成できます。 切
あとは右側にcssと記載されている箇所がありますのでそこをコピーするだけです。 cssの:beforeで設定してあげて下さい。 シェイプをcssで作成したい場合下記サイトもおすすめ。 CSS3 Shapes ボックスのシャドウを簡単に生成「box-shadowジェネレーター」 http://www.bad-company.jp/demos/box-shadow/ ボックスにシャドウをcssで付けたいときに使用します。 各値を変更することでソースコードの値が変更されるのでコピーしてから、 コーディングしているcssにペーストするだけでcss3のbox-shadowが適用されます。 cssをsassに変換「CSS 2 SASS/SCSS CONVERTER」 http://css2sass.herokuapp.com/ cssをsassに変更できます。 昔cssで書いたのをsass/scssで
こんにちは、フロントエンドエンジニアのあつこです(ΦωΦ) 去年の11月辺りから、メインマシンがWinからMacに変わりました。 Winちゃんもサブマシンとして頑張ってくれています。主に検証に使用していますが、、、 メインマシンの交代を機にgulpを導入したので、方法やら所感やらをちょこちょことまとめていきます。 今回は、簡単なタスクを登録して動かすところまで。 その2で、ファイルの監視や同期処理などを覗いていきたいと思います。 もくじ タスクランナーってなに? Gruntとgulp 必要なものを準備する タスクを書いて、実行しよう まとめ タスクランナーってなに? メインマシンがOSごと変わったので、自分の開発環境を整理・再整備する際に (´-).。oO(いっちょ最近流行りのタスクランナーでも入れてみようかね…) と思い立った次第です。 大学時代のトラウマから黒い画面はあまり好きではない
こんにちは!てっちゃんです。 今日は12月24日クリスマスイブですね。皆さん今夜は予定があるんですかね? 僕は安定の...(´・ω・`) 年末になりボチボチ今年を振り返ろうかなって時期なので今年のまとめとして僕が個人的に気になった2014年のツールとかサービスを10選ほどご紹介しようと思います。 選定と感想は僕の独断と偏見なのであしからず。 HTML5勧告 http://www.w3.org/2014/10/html5-rec.html.ja 2014年10月28日、HTML5の仕様が勧告となりました。「勧告」とはすべての仕様が確定したときにするもので、これによりHTML5という仕様が「正式な規格」になったことをさします。とはいえ、制作側としてHTML5を使っていく以上安定した制作が出来るとは限りません。ブラウザの実装が完璧ではなく周辺技術の仕様には差がでているのが現状ですが、今後もバージ
Webでも写真をよく使いますが、写真の質によって見た目の印象はだいぶ変わってきますよね。 撮影したものをそのまま使うのではなく色合いを整えてから使うとサイト全体が引き締まります。 というわけで、 今回は写真を少し加工してかっこよくしてみたいと思います。 ↓できあがりはこんな感じ。 ちょっとクールなインスタグラム風。 こちらが元の写真です。 1.トーンカーブで明るさを調整する 写真自体の明るさ・色味は調整レイヤーでつけていきます。後で変更できるので便利です! まずは明るさの調整。微調整がきくのでトーンカーブをよく使っています。 「レイヤー」>「新規調整レイヤー」>「トーンカーブ」で↑のように点を打ちます。 今回はソフトな感じではなくシャープな印象にしたいのでコントラストをしっかりつけます。 同じくトーンカーブで色味を調整していきます。 青みを強める感じで。 2.コントラストを調整する 「明る
こんにちは、フロントエンドエンジニアのあつこです(ΦωΦ) 最近一段と寒くなってきましたが皆さんいかがお過しでしょうか。 私は寒さに弱いので、早速コートを出してきました。冬本番になったら何を着たらいいのだろう…… 先日GoogleスプレッドシートのデータをJSONで扱う機会があったのでここで、ちょっとまとめておきたいと思います。 もくじ 事の発端 Google Sheets APIとは 4ステップでデータを取得する JSON形式のデータをjQueryで整形する まとめ 事の発端 社内で運用しているチェックシートをもっと手軽にできないか、という要望があったのでチェックフォームを作りました。 チェック項目のデータはその他のものにも転用したい為、Googleスプレッドシートで管理しています。 イメージとしてはこんな感じ。 Googleスプレッドシートを選んだ具体的な理由はこちら。 wikiにWY
静的サイトジェネレータがブームだとか聞きます。 私の場合は、大変な要件が来た時になにかいい方法はないものか・・・と辿り着いたのが 静的サイトジェネレータでした。 初期に集中して構築した結果、その後の修正や運用でとてつもない工数の削減ができたので、 導入は大成功となりました。 静的サイトジェネレータですが、初期コーディングの時点でも威力を発揮しました。 ここでは初期コーディングにおいての静的サイトジェネレータのメリットを5つまとめました。 もくじ そもそも静的サイトジェネレータとは? 選ばれたのはPhestでした メリット1:同じことを複数記述しなくていい メリット2:ルールを把握しやすい メリット3:パスの設定方法が豊富 メリット4:テスト用、本番用ファイルの生成が楽 メリット5:パターンのテストが簡単にできる 最後に そもそも静的サイトジェネレータとは? 選ばれたのはPhestでした メ
Ctrl+Tした時 タグの編集 一部のテキストをタグで囲う時に使用します。 選択してからCtrl+Tでタグを入力することで選択した開始と終わりにタグをいれることができます。 初期のDreamweaver環境設定だと改行<br>に対して一行改行されるので 「編集」→「環境設定」→「コードフォーマット」→「高度のフォーマット:タグライブラリ」 で改行の設定をしてあげます。 ※細かく設定してあげるとコマンドのコードフォーマットする際に設定したインデントでフォーマットされます。 私はXHTMLでは基本的に、ブロック要素は改行、インライン要素は改行なしで統一してあげてます。 HTML5コーディングについては浅岡さんの記事で詳しく書かれてます! デザインビューでEnterで改行しながらコーディングすると自動的に段落の<p>タグがはいります。 初期はすべてPタグでガツガツ要素をながしこんで、その後に適当
次のページ
このページを最初にブックマークしてみませんか?
『アライドアーキテクツのクリエイターブログ』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く