ミドリデザインワークスHOMEABOUTWORKSBLOGお問合せHOMEABOUTWORKSBLOGお問合せ最近の投稿メタタグ1行追加で画像リンクがhttp→httpsに!SSL化作業の効率化に一役。2018/07/20アナリティクスのデータが削除される?まだ間に合うデータ保持変更の設定。2018/05/07ブログ作成にGoogle音声入力ツールを使ってみて気がついたこと2018/02/02アナリティクスで自分のアクセスはいらない。動的IPアドレスを除外した解析データのとり方2017/08/28「一生続ける技術」著書の青木仁志さんの無料セミナーに行ってきました。効率的に角丸やグラデーションのCSSコーディングベンダープレフィックスとセットのCSSコーディングで時間を掛けたくないというケースに便利なんじゃないかな~と思われるAdobe社のPhotoShop機能の一つをご紹介します。PhotoShopで描いたオブジェクトのCSSコードをワンクリックで書き出してくれます。PhotoshopオブジェクトからCSSコピーするにはシェイプから図形オブジェクトを描きます。今回は「角丸の四角形」で、「レイヤースタイル効果」も使用しています。次に、オブジェクトを描いたレイヤーをアクティブに(カーソルで選ばれた状態)にして、右クリック。「CSSコピー」をクリックすると、CSSコードがクリップボード(一時記憶)に保存されますので、CSSファイルやメモ帳にペーストしてみると...ジャン!「おお~、一瞬でCSSコードが記述された!!」と、なります。CodePen.ちなみに五角形で試してみたところ、CSSは四角形の内容が生成されました。いうのはダメみたいですね。「円」は正円でも楕円でもOKでした。「JavaScriptコードがありませんでした」というエラーの解決例(Windowsの場合)はじめて使った時ですが、「JavaScriptコードがありませんでした」というエラーメッセージが出て「CSSコピー」機能が使えませんでした。原因はこの機能を持つファイルを作成したエンジニアが英語圏であったためBOMなしの設定であり、日本語環境ではBOMエラーになるらしい。解決法としては、ファイルをBOMありにすればOKです。2015.5\Required\CopyCSSToClipboard.jsx」です。このファイルを「メモ帳で開き(ここポイント)、上書き保存」します。メモ帳はutf-8を保存するときデフォルトでBOMを付けるという仕様なため、これを活かした手法です。その他のディスカッションまとめこの「CSSコピー」はHTMLはホームページ作成ソフトで作れるけど、部分的な装飾を変更したい・・けど難しい」なんていうときにも使える機能だと思います。PhotoShopを持っているという条件はマストになりますが...汗PhotoShopには他にも、Retina用画像と通常画像を一括で生成する「アセット生成機能」があり、この機能を一度使ったらもう元に戻れないんじゃなかろうか...というくらい便利です。そんなPhotoShopの便利な機能に興味がある方は、PhotoShopのみを使ってみてはいかがでしょうか。Adobeのアプリケーションは現在ライセンス制になっており、月額あるいは年額でライセンス料を支払うスタイルになっています。Adobe税なんて呼んでいる人もいます、まあ...たしかに。ライセンス契約をすることで、自宅のPCに限らずノートPCなどからも契約したAdobe製品を使えるようになります。時間そのものをお金で買うことはできませんが、効率化を図ることで他のことに当てられる時間が増えそうですね。Midori空間バランスの良いデザインを得意とします。「育てていくサイト作り」をコンセプトにサイト制作をしています。制作事例BLOGお問合せ。