Macで素早く作業する10のTIPS+α
Macで作業するときに知っておくと素早く作業できる10個のTIPSと、素早く作業する以外のTIPSを3個まとめました。 主に macOS Sierra 向です。 MacからiPhoneに素早くたくさん単語登録 #MacTips iPhoneの日本語入力にたくさんの単語登録をするのは面倒だが、実はMacで単語登録したものを同期できる。 ［システム環境設定＞iCloud＞iCloud Drive］にチェックを入れ［システム環境設定＞キーボード＞ユーザ辞書］で登録するだけ。 — なつき@スマフォコーディング講座まもなく (@Stocker_jp) 2016年12月7日 素早くテキスト読み上げ ［システム環境設定＞アクセシビリティ＞キーを押した時に選択しているテキストを読み上げる］にチェックを入れると、opt+escで簡単にテキストの読み上げができる。 私は速度を速めにして原稿内容のチェックに使っ
意外と知られていないHTMLの基本の話
私はWeb制作が初めての方向け講座だけでなく現役の制作者の方向けに様々なWeb講座をしていますが、現役のWeb制作者の方でもHTMLに関して意外と知られていないんだなと思うことがいくつかあります。 特に、HTML5以前の古いHTMLの使い方のまま覚えている方が多いように思われますので、この記事ではそれを中心に取り上げてみました。 なお、この記事はHTML 5.1およびWHATWG HTML Standardの仕様書を参考に書いています。 width=”100%” のように数値以外の文字列を “” に入れるのはNG たとえばimg要素などで、ブラウザの幅いっぱいに画像を表示したいという場合、昔はimg要素に width=”100%” のような属性をつけることがありましたが、HTML5からはwidthなどの属性値に数値以外を含めることができなくなっています。（つまり%などの単位を含めることがで
Chromeが重くなった時にやるべきこと
Google Chrome は軽量で高速なWebブラウザーですが、長く使っていると「重い」と感じるようになってくることがあります。 この記事では「Chromeが重くなった時にやるべきこと」についてまとめています。 1. シークレットウィンドウによる問題の切り分け 最初に書いておきますが、どんなWebブラウザーでも、拡張機能（アドオン/エクステンション）をたくさん入れたり、履歴やキャッシュが溜まってくると重くなるのは必然です。 「最近新しくセットアップした PC なのに Chrome が重い」という方もいらっしゃるかもしれませんが、Chrome を使用して Google にログインした時点で、以前使用していた拡張機能などが再びインストールされるため注意が必要です。 Chrome が拡張や履歴などのせいで重いのか、PC や Chrome そのもののせいで重いのかを切り分ける簡単な方法があります
Macintosh HDを整理し、空き容量を効率よく増やす方法
MacBook Air などのラップトップ型の Mac を長く使っていると、Macintosh HD（内蔵ハードディスクや SSD などのストレージ）の空き容量がなくなってきて困ることもあるかと思います。 私の場合、MacBook Air の 256GB モデルを使用しており、先日どうしても Macintosh HD に 64GB 以上の空き容量が欲しかったので、以下の方法を試したところ 90GB 以上の空き領域を作ることができましたので紹介します。 ※この記事は、ファイルの移動や削除、パーティションの作成などについて書いています。それらの作業を行う際は、必ずバックアップを取ったうえで作業を行い、必要なファイルやパーティションを誤って削除しないよう、細心の注意を払って作業を行ってください。 この記事を参考にしたことで発生した、いかなる損害も一切補償できません。 何がHDを占領しているか調べ
WebデザイナーのためのPhotoshop CC 2014の新機能まとめ
この記事は、Photoshop CC 2014 の新機能をWebデザイナー視点からまとめた記事です。 6月19日の「Adobe Create Now 2014」および、6月23日の「アドビ 報道関係者向けCreative Cloud 最新製品 デモセッション」で聞いた話を含みます。 新機能の一覧 現在私が把握している、Photoshop CC 2014 の新機能は以下のとおりです。 Webデザイン制作に深く関係しそうなものは太字にしています。 ぼかしギャラリーのモーション効果 文字ツールでフォント検索が可能に ライブフォントプレビュー 開いたPSDにフォントが存在しなかった場合、Typekit のフォントで置換可能に スマートガイドでオブジェクト間の距離を表示、均等に配置が可能に リンクされたスマートオブジェクトのレイヤーカンプの切替が可能に 焦点領域 埋め込まれたスマートオブジェクトをリ
Macの基礎の基礎: テキスト入力と編集とテキストエディット編
このブログをお読みの方であれば、「テキスト入力や編集、テキストエディットなんてさすがに分かってる」という方が多いかもしれません。 しかし、以下のことをご存知でしょうか？ Mac は、control キーを使用することで、マウスを操作することなくさまざまなテキスト編集が可能である Mac には文字列を一時的に保持しておくための「クリップボード」のようなものが2つある。それらを使いこなすことでより効率のよいテキスト編集が可能である 「テキストエディット」では、複数行の検索や置換が可能である もしこれらのことをご存じなかった場合、この記事を読む価値があるかもしれません。 写真素材: ぱくたそ この記事では、前半は基本的な文字の入力方法、後半は control キーなどを使用したやや高度なテキスト編集の方法、テキストエディットの使いこなしなどについて書いています。 なお、この記事では Apple
WebデザイナーのためのPhotoshop関連記事まとめ
「2014年4月の、これだけは押さえておきたいWeb関連の動き」という記事を書いていたところ、あまりにもWebデザイナーのためのPhotoshop関連記事が多かったため別の記事としてまとめました。 Fireworks からの乗り換えの方向けの記事からより速く制作するためのテクニック、Adobe が開発中の CSS をコピーしたり画像アセットをダウンロードするためのWebアプリなど。 基礎〜現役Webデザイナー向けの制作テクニック FireworksユーザーがPhotoshopでwebデザインカンプを作る時、注意が必要なポイントとその解決策 | tipsBear シェイプやスマートオブジェクトを別の PSD に複製する方法 テキストボックスのサイズを変える方法 シェイプなどのサイズを取得する方法 など、普段 Fireworks をお使いの方が Photoshop でWebデザインしようとした
Photoshopで長方形などのシェイプを移動・変形・複製するJSXをアップデート
PhotoshopでWebデザインカンプなどを制作している方にはかなり役立つ、「シェイプを移動・変形・複製」するJSXをアップデートし、シェイプを移動・変形・複製する際に、まれに数値のズレが発生するバグを修正しました。 以前から、以下の記事で「数値を指定してシェイプを作成」するJSXと「シェイプを移動・変形・複製」するJSXを配布していました。 PhotoshopでのWeb制作効率を向上させる「JSX」とは 「数値を指定してシェイプを作成」するJSXは問題なかったのですが、「シェイプを移動・変形・複製」するJSXには時々「間違ったサイズを取得してしまう」という致命的なバグがあり、どうすればそれが直せるかわからないままでした。 しかし、ようやく解決方法を思いついたので、「シェイプを移動・変形・複製」するJSXの修正版を配布します。以下からダウンロードしてください。 使い方 ダウンロードした
Macの基礎の基礎: Spotlight編
「Windows から Mac に乗り換えたけどよく分からない」「いまいち使いこなせない」という方のための連載、2回目は「Spotlight」です。 Spotlightとは Mac を使い始めたばかりの方にとって、Spotlight は「ファイルやフォルダを検索する時に使うもの」のように見えるかもしれません。 確かにそれは Spotlight の主要な機能ですが、Spotlight はあらゆる調べ物に利用することができます。 Spotlight を使いこなせるようになると、たとえば以下のようなことができます。 コーディング（HTML/CSS/JavaScript などの記述）の時間を大幅に短縮する 英語を書く時間を短縮する 言葉の意味を調べる 複雑な計算を素早く行い、結果をクリップボードにコピー マウスカーソルを動かさずにアプリケーションの起動や切替えをする 指定した期間に作成したファイル
「PhotoshopによるWebデザインカンプ制作はFireworksに比べて効率が悪い」という都市伝説について
2013/5/7に、Adobe Fireworks の事実上の開発終了が発表されました。 ただし、「バグ修正やセキュリティ関連のアップデートは継続する」とのことですが、いつまでも使い続けられることを保証するものではないので、Fireworks ユーザーの方はそう遠くないうちに別のアプリケーションに乗り換える必要があると思います。 Adobe、Web画像ツール「Fireworks」終了へ – ITmedia ニュース 移行先アプリケーションの候補の1つである Photoshop について、Twitterを見ていると「Photoshop でのWebデザインは制作効率が悪い」という方が多いようですが、私はそんなことはないと思っています。 なぜそう言えるのかについて、簡単にまとめてみました。 目次 FireworksとPhotoshop、それぞれのメリットとデメリット なぜ「Photoshopは効
WordPressサイトをデザインする時に気をつけていること
この記事は、2011/9/11 に神戸芸術工科大学で開かれた「WordCamp KOBE 2011」で私がお話しした「WordPressサイトをデザインする時に気をつけていること」というセッション内容をブログ記事として起こしたものです。 当日はたくさんの方にお越しいただきありがとうございました。 会場に入れなかった方もいらっしゃったそうですみません。 この記事で、少しでも内容を共有できればと思います。 このセッションでは、オリジナリティのあるWordPressサイトのテーマをデザインする際に私が気をつけていることについてお話させて頂きます。 このセッションでお伝えしたいことは「4つ」あります。 いずれも、私がオリジナルのWordPressテーマをデザインする際に気をつけていることです。 このセッションで伝えたいこと このセッションでお伝えしたいことは「4つ」あります。 いずれも、私がオリジ
JavaScriptなしで地域ごとに色が変わる日本地図を作る
HTML、CSS、画像だけで、マウスオーバーした地域ごとに色が変わる日本地図を作る方法です。 文字だけではちょっと意味がわかりにくいかもしれませんので、とりあえず↓の日本地図の上にマウスカーソルを載せてみてください。クリックするとページ遷移しますが、このデモでは Not Found になりますのでご注意ください。 デモページを別のタブで開く このデモをダウンロード（ZIP） 2009年に仕事で「日本地図をクリックすると地域ごとに違うページに飛ぶ」ページを作らなければならなかった時に、当時 JavaScript も書けないし Flash は PC に入っていなかったので、HTML と CSS だけで作ってみました。 このデモはDOCTYPE宣言が HTML5 になっていますが、当時 HTML 4.01 で、IE6 でもきちんと動くように作りました。 ですので、特殊なタグやプロパティは使わず
私が月に1度やってるMacのメンテナンス方法 | Stocker.jp / diary
私はメインマシンとして Mac を使用していますが、一時期全くメンテナンスをせずに使っていたら、10ヶ月ほどで買った時より明らかに動作が遅くなってしまいました。 そこで、最近は毎月1回メンテナンス作業を行うことにしています。 具体的には以下のような感じです。 関連記事: Windows 10を快適に使用し続けるために月1回やった方が良いメンテナンス ディスクユーティリティ メニューバー右端の検索アイコンをクリックするか、command + space または control + space キーを押して Spotlight を起動します。 disk と入力します。すると、候補にディスクユーティリティが出てくるはずなので、Enter キーを押して起動します。 ディスクユーティリティでディスクを検証 ディスクユーティリティの［First Aid］ボタンをクリックし、［実行］をクリックするとMa
MacBook Air 2012のレビューとWeb制作者のための設定など
約1ヶ月前に MacBook Air 2012年版 が発売されたので、早速2011年版 MacBook Air から買い替えました。 今回購入したのは、13インチ / Core i7 / メモリ 8GB / SSD 256GB です。 去年の記事 では MacBook Pro 13インチから MacBook Air 13インチに買い換えた時の感動を中心としたレビュー記事でしたが、今回は時期的に、欲しい方はもう購入されていると思いますので、レビューだけではなく私がイントールしたアプリとその設定を中心に書いていきたいと思います。 目次 なぜMacBookを買い換えたのか なぜそのスペックにしたのか Apple Store店員の話 検証 その他のレビュー 私のMacBook Airの使い方 インストールしたアプリ 外付けスピーカー いくつかの問題点 気になった点 総評 なぜMacBookを買い換
MacのKeynoteでプレゼンする際に気をつけていること
先日の WordCamp KOBE では、Mac の「Keynote」というプレゼンテーションソフトを使ってプレゼンしたのですが、その際「なつきさんは iPhone をタップしながらプレゼンしてる？」など気になるツイートがあったため、どうやってプレゼンしていたかここで回答させていただきます。 Keynote は、Apple 社製のプレゼンテーションソフトで、Steve Jobs 氏が Mac や iPhone などの新製品の発表の際に使用していることでも有名です。 Mac 版と iPad 版がありますが、ここでは Mac 版について書いています。 どちらも、App Store でダウンロード版を購入 するか、Amazon などで購入できる iWork パッケージ からインストールすることができます。 PowerPoint との違い プレゼンテーションソフトといえば Microsoft の
HTML5カンファレンス2012の資料まとめ
HTML5カンファレンス2012の講演資料のまとめです。 HTML5カンファレンスは非常に有意義なものでした。講演頂いた方、スタッフの皆様ありがとうございます。 HTMLとかCSSとかAPIとか -2012秋編-（矢倉眞隆さん） HTML5 や CSS3 の新しいタグやプロパティについての解説。 でもその前に、W3C と WHATWG についての話。 一部のメディアで、W3C と WHATWG が決裂したかのような報道がされたが、実際は問題ないとのこと。 W3C と WHATWG の Editor を務めていた Ian Hickson氏は WHATWG の HTML に集中し、バグ修正が加速しそうです。 セッションでは紹介されていませんでしたが、こちらの記事に Ian Hickson氏からのメールの邦訳など載っています。 HTML5仕様をめぐるW3CとWHATWGについて、Ian Hick
ついに出た！Chrome版「Page Speed」の使い方
2011/3/22に、GoogleがようやくGoogle Chrome版「Page Speed」拡張機能を公開しました。 「Page Speed」は、項目をある程度理解できれば自分や自社のサイトの表示速度の改善にとても役立つツールです。 この記事では、「Page Speed」のインストール方法から各調査項目の見方や改善方法を中心に使い方を解説します。 ぜひ、ご自身のサイトの改善に役立てていただければと思います。 そもそも、なぜサイトの表示速度を速くする必要があるのか？ 例えば、Amazonの調査によると「表示速度が0.1秒遅くなると、売上が1％減少する」といい、Googleの調査によると「表示速度が0.5秒遅くなると、検索数が20％減少する」と言われます。 また、GoogleはWebページの読み込み速度をアルゴリズムに取り入れたことを発表しています。 大手サイトや大規模なECサイトに限らず
Coda 2 ファーストインプレッション
Coda 2 が5月24日の0時に発売され、「本日限り半額（App Storeで ¥4,300）」ということで、発売直後から Twitter でだいぶ盛り上がってましたね。 私もせっかくなので、半額のうちに買いました。 最近はスクールの準備でちょっと忙しいし、レビューは後日でもいいかなーと思ってたところ Webクリエイターボックス の Mana さんに下記のように脅されたため、泣きながらこの記事を書きました。 @stocker_jp 皆がCoda2のレビュー書かないのは、本日中にナツキさんがうｐするレビュー記事を見てから購入予定だからですよ :) ﾎﾚﾎﾚ…ﾝ? — Manaさん (@chibimana) 5月 24, 2012 結論から言うと、Coda 2 はかなり気に入りました。 これは、特に CSS 書くのが速くなるのではないでしょうか。 実は私は Coda は体験版しか使ったことが
[連載]WordPressでWebサービスを作る方法（7:ソーシャルメディアマーケティング） | Stocker.jp / diary
さて、SEOを意識してコーディングしたところで、サービスをオープンしてすぐに人が来てくれるわけではありません。 昔は新しいサイトやサービスを作ってもすぐには人が来てくれないのが当たり前で、色々なサイトに相互リンクを申し込んだりして地道に人が来るのを待っていたものですが、今は Twitter、Facebook、はてなブックマークなどのソーシャルメディアを少し活用するだけで初日から沢山の方に来て頂けるので楽しいですね。 この記事では ソーシャルメディアとは何か なぜソーシャルメディアマーケティングが重要になったのか サイト制作・運営者はソーシャルメディアとどのように付き合い、活用すべきか について考えてみたいと思います。 この記事を書くにあたり、「ソーシャルメディアマーケティングとは何か」ということについて、渋谷にあるソーシャルメディアマーケティング会社 株式会社ハロ 取締役の @ossam
![[連載]WordPressでWebサービスを作る方法（7:ソーシャルメディアマーケティング） | Stocker.jp / diary](https://cdn-ak-scissors.b.st-hatena.com/image/square/fcc7e7f44a9a1fede96818673a980b1b08f318ab/height=288;version=1;width=512/https%3A%2F%2Fi0.wp.com%2Fstocker.jp%2Fdiary%2Fwp-content%2Fuploads%2Fsmo2-1.png%3Ffit%3D500%252C300%26ssl%3D1)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
“Macの基礎の基礎” の検索結果 – Stocker.jp/diary