カテゴリー: 未分類

Alfredを使った計算がCSSの記述に便利。

最近ほとんどsass(sass記法)で書くことがおおくなったのですが。
たまに変更や、レギュレーション、効率etcで生CSSを書くこともしばしば

要素のサイズ及び、文字のサイズetcは、ほぼvwを使って書くのですが。その時のTips

px > vwへの計算を簡単にシームレスに行う。

いろいろ何かツールとかも考えたのですが、Alfredの計算機能が便利。

https://www.alfredapp.com/

基本ランチャーのアプリなのですが、計算式を入れると結果を表示しれくれます。

これを利用します。まずはデザインソフトで矩形などのサイズを確認します。(私は目視で直接入力しますがコピペでも良いかも)

そこに 617に次いで “/640*100”と入力すると結果が表示されます。のでそこでそのまま[エンター]をクリック。→これでクリップボードにコピーされます。
(※640はカンバスのサイズ)

あとはCSSのエディタにアプリを切り替えて(Cmd+Tabなどで)貼り付けて、Cmd+Vなどで貼り付けて、’vw’と打てば完了です。

ポイントしては、

デザインソフトでサイズを測る箇所以外がすべてキーボードで完結するのでタイプが早く慣れなる分だけかなり効率化できてきていると感じています。

数字キーは簡単なテンキーで入力したくなると思いますが、将来的なことを見据えるとホームポジションでブランドタッチができるようにテンキーでなく通常のキーから入力するほうが他にも応用が効くのでおすすめです。

IE10,IE9でjQeuryでページスクロールできなかった

By admin

オン 2017年8月9日

カテゴリー: 未分類

IE10,IE9でjQeuryでページスクロールできなかった

よくアルやつ、ページの下までいってボタンを押すとスクロールしたりするタイプのスクリプトで通常はなんともないのですが、なぜかIE10以下でできないことがありました。(今更IE10とかなのですが、世の中の大企業では更新がやたら遅い仕様があり。。)

以下の通りの実装でしたが、aタグにイベントを紐付けていたらエラー、外包しているdivにイベントつけるとOKでした。謎でした。

# html部分
<div id="pagetop">
    <a data-role="pagetop" href="#"><img src="/journey/img/icon_pagetop.png" alt="pagetop"></a>
</div>

# script部分 NG
$('[data-role=pagetop]').on('click',function(e){
    e.preventDefault();
    $('html,body').animate({scrollTop:0},1000);
});

# script部分 OK
$('#pagetop').on('click',function(e){
    e.preventDefault();
    $('html,body').animate({scrollTop:0},1000);
});

イラストレーター(illustrator)でパスや線をアウトライン化(矩形化)する方法

By admin

オン 2017年8月7日

カテゴリー: 未分類

イラストレーター(illustrator)でパスや線をアウトライン化(矩形化)する方法

イラストレーターで作成されたデザインをアセットの書き出しで普通にSVG書き出しすると、「＞」が線
で書かれており、それにしたがいSVGファイルも線となってオンラインのicomoonでうまくiconフォントにできなかったので、線から矩形(アウトライン)に変更しました。

方法は簡単で、イラレで該当の線SVGファイルを開いて、メニューから[オブジェクト] > [パス] > [パスのアウトライン]を選ぶだけ。

Xcode8.3.3 macOS Sierra のiOSシミュレーター(Simulator)の場所

By admin

オン 2017年8月7日

カテゴリー: 未分類

Xcode8.3.3 macOS Sierra のiOSシミュレーター(Simulator)の場所

少し前にmacをクリーンインストールしてSimulatorどこいったーってなったのでメモ。
ApplicationsのXcodeアプリに内包してありました。
具体的には以下にあります。

/Applications/Xcode.app/Contents/Developer/Applications

Finderで Cmd + Shift + G　を押して上記パスを入力してもよいし、

Applicatinoフォルダに行ってXcodeを右クリックして“パッケージの中身を表示”をクリックしてFinderを移動しても良い。

あとは”Simulator.app”をDockにドラッグとかしておけばいつでもすぐに起動できます。

bowerでURLを直接指定してインストールする方法

By admin

オン 2017年8月6日

カテゴリー: 未分類

bowerでURLを直接指定してインストールする方法

bower install でURLでgitを直接指定するだけ。
本家のように git://で始めるとエラー
リポジトリのURLをhttps://から直接いれると入った。

今回はこちらのリポジトリをURL直接でインストール
https://github.com/karappo/jquery.kerning.js

$ bower install --save https://github.com/karappo/jquery.kerning.js.git

入れた後の bower.json

title

インストール後のローカルのツリー

参考ページ
https://bower.io/

イラストレーター(illustrator)でガイドが動かせない場合はロックを外す

By admin

オン 2017年8月6日

カテゴリー: 未分類

イラストレーター(illustrator)でガイドが動かせない場合はロックを外す

イラレを使っていてガイドを動かせないと、いつもまようのでメモ。
メニューの[表示] > [ガイド] > [ガイドをロック] を外すだけ。
ショットーカットは Cmd(Ctrl) + Opt + ;

PHPStorm(WebStorm)のクリップボートの件数を10件から変更する方法

By admin

オン 2017年8月6日

カテゴリー: 未分類

PHPStorm(WebStorm)のクリップボートの件数を10件から変更する方法

HTMLのマークアップ、コーディングをしているとコピー＆ペーストを利用する頻度はとても多いです。
エディタでPHPStorm(WebStorm)を使っていますが基本10件のクリップボードの内容を保存していてくれて、繰り返し使うブロックや、単語、フレーズなどを記憶してくれて便利です。其の設定方法。

環境設定で件数を変更するのみです。

30件ほどに増やしました。
１ページ内で利用する程度のブロックや、単語、フレーズはほとんど収まりますので作業効率が良くなりそうです。

Mac OS SierraでDreamweaverCS6を使う方法

By admin

オン 2017年7月31日

カテゴリー: 未分類

Mac OS SierraでDreamweaverCS6を使う方法

こんにちは、HTMLのマークアップはPHPStormを利用しているのですが、唯一Imagemapに出くわした場合だけ、GUIで座標をしていできるDreamweaverを重宝してました。

が、MacがSierraになってCS6のDreamweaver起動ができなくなっていたのでその対応方法。
しらべるとJavaはつかってないけどチェックしていて起動できないだけらしい。
(これって簡単に更新できそうだけどしないのか。

参考ページ
ここに習ってチェック用のディレクトリのみを作成手順としては、

1. リカバリーモードで起動(Cmd + R を押したまま起動)

2. メニューのユーティリティーからターミナルを起動

3. ルートレスを無効化し再起動

$ csrutil disable

4. 管理者アカウントでディレクトリ作成

$ sudo mkdir -p /System/Library/Java/JavaVirtualMachines/1.6.0.jdk /System/Library/Java/Support/Deploy.bundle

そして起動テスト

5. 再度リカバリーモードで起動してルートレスを有効化して再起動

$ csrutil enable

svg画像をリピートしたり密着すると余白がでてしまう場合の解決方法

By admin

オン 2017年7月31日

カテゴリー: 未分類

svg画像をリピートしたり密着すると余白がでてしまう場合の解決方法

svgファイルをXMLとして開いてviewBox,viewPortなどを変更する方法もありそうですが、イラレストレーターで直すのが簡単みたい。

とりあえずイラレで開いて、端の方を拡大。

アートボードから少しだけはみ出すくらいに設定

するとリピートしても隙間ができ内容に調整できます。

イラストレーター(Illustrator)でアセットの書き出しパネルで、SVGを書き出すと文字のサイズが変わる件

By admin

オン 2017年7月30日

カテゴリー: 未分類

イラストレーター(Illustrator)でアセットの書き出しパネルで、SVGを書き出すと文字のサイズが変わる件

普通にイラレ→SVGに書き出しているだけで文字によってサイズが変わってしまうことがありました。SVGの書出形式設定を調整することで解消できました。
(以下アセットの書出しパネルを利用していることを前提としています。)

まずアセットの書出しパネルの右下のボタンを押す。

→スクリーン用に書出しパネルが開く。

更に設定ボタン(ギア)を押す。

→形式の設定がひらく

形式の設定

サイドバーの[SVG]をクリックして、小数点以下の桁数を2 > 3に変更しました。

これでサイズが変わってしまうことは解消できました。

投稿者: admin Page 22 of 47