サーバー移転などでDNSを変更したのに、ブラウザの表示がなかなか変わらないことがあります。
そんなときにはPC内のDNSキャッシュを削除してみると、表示が変わったりします。

Windowsの場合

Windows7で作業した内容です。

  1. コマンドプロンプトを立ち上げます。
    スタートメニューの検索で「cmd.exe」と入力して検索。
    「cmd」をクリックすると、黒い画面が立ち上がります。
  2. 下記コマンドでDNSキャッシュを削除。
  3. ブラウザで確認。

おまけ

Windowsでのhostsファイルの変更は、c:¥windows¥system32¥drivers¥etcの中のhostsファイルをメモ帳などテキストエディタで開いて編集。

Macの場合

Yosemiteで作業した内容です。

  1. ターミナルを立ち上げます。
  2. 下記コマンドでDNSキャッシュを削除します。
  3. ブラウザで確認。

おまけ

Macでhostsを変更、設定するには、ターミナルを立ち上げて、以下コマンド

参考サイト

いつものごとく、Google先生にお伺い。以下のサイトを参考にさせていただきました。

OS X Yosemite (v10.10 ) で DNS キャッシュを削除するコマンド – Qiita
http://qiita.com/dounokouno/items/04ff6158bf32d1183713

WindowsのDNSキャッシュをクリアする方法
http://freesoft.tvbok.com/tips/net_tips/flushdns.html

スポンサードリンク

会社のWindowsでフォルダ内のファイル名の一覧をテキストで書き出す必要がありました。
コマンドで書き出し。最近、黒い画面にも少し慣れてきました。

例えば、デスクトップのphotoフォルダの中のファイル名をデスクトップのFile.txtに書き出しする場合。

左側がファイル名を取得したいフォルダのパスで、右が書き出すテキストファイルのパス。

あ、会社の環境はWindows7です。

スポンサードリンク

時々パワーポイントからIllustratorのデータを作成してほしいという依頼があります。
できるだけ効率的に作業する手順をメモ。(Windowsで)
といっても紙媒体の経験が多いわけではないので、もっと早くやれる方法をご存じの方もいるかもしれませんが。

使用ソフト:PowerPoint2013、IllustratorCC(2015)

PowerPointから画像だけ取り出す。

  1. 拡張子がpptの場合は、pptxで保存し直す。
  2. pptxのファイルをコピーして、拡張子をzipに変更する。ほんとにいいの?って聞かれてもOKで。
  3. zipを解凍する。
  4. 解答したフォルダのpptの中のmediaフォルダ内に画像が入っているので、作業用Illustratorと同じフォルダの中に移動し、後はPhotoshopでEPSに変換するなど、Illustratorでの作業に使える形式にする。

パワーポイント→PDF→Illustratorのデータへ変換。

  1. パワーポイントを開く。
  2. ファイル→Adobe PDFとして保存。
  3. PDFをIllustratorで開いて、Illustrator形式で保存し直す。
  4. すべて選択(Ctr+A)
  5. オブジェクト→クリッピングマスク→解除(Ctr+Alt+7)を2、3回でクリッピングマスクを解除。
  6. すべて選択したまま、オブジェクト→パス→パスの削除でクリッピングマスク用のパスを削除。

後は、画像を入れ替えたり、デザインを整えたりといった作業をします。
画像は解像度粗々で小さいことも多いので、別途もらえそうならもらうことが多いです。
もらえない時は、最大限Photoshopでマシな状態にしておいて、それでも粗いですけどいいですか?って確認してもらいます。

スポンサードリンク

blockquoteタグで囲んだ引用部分をスタイルシートで見やすく装飾します。
画像は使いません。

引用サンプル

スポンサードリンク

アンケートフォームを作っていて、エクセル原稿からコピペする時に、文字列の頭に文字を追加したかったのですが、計算式だと結合している部分がある時に面倒です。
こちらの知恵袋で見つけたマクロを使うやり方が、ものすごく簡単で一瞬でできたのでメモ。

エクセルの文字列の頭に同じ文字を一気に入力することはできますか? – Yahoo!知恵袋
http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1019564565

VBEを開き(Alt + F11)、VBEのメニューバー→挿入から標準モジュールを挿入。
出てきた画面に下記マクロをコピペ。

頭に文字を付けたい範囲を選択した状態でマクロを実行。

追加する文字の中にエスケープしなければならない文字がある場合、その文字の前に「”」を追加。
例:「<p class=”ex” >」を追加したい。→上記マクロの「追加する文字」の部分に「<p class=””ex”” >」

追記:文末に文字を追加するマクロ

追記:文頭、文末に文字を追加するマクロ

スポンサードリンク

ページを読み込んだ時の画面幅でtableの表示方法を変える。
768px以上なら普通にtableで表示。768以下の場合はタグをdivに置き換えて、リストっぽい表示にする。

cssだけでとか、色々な方法があるけれど、軽量でシンプルな方法を探していて、Design Spiceさんの下記のページの「jQueryでタグを書き換える」方法に。1ページに複数のtableがあるページがあったので、ちょっとjsをアレンジした。

レスポンシブWebデザインでテーブルを使う時の小技 │ Design Spice
http://design-spice.com/2012/11/01/responsive-table/

※ページを読み込んだ時の画面幅なので、読み込んだ後に画面サイズを縮小しても変化しない。ま、タブレットやスマホで画面サイズをグリグリ動かせるわけじゃないのでOK。

htmlはこんな感じ。tableタグのclassに「responsive_table」を指定する。

jQueryと一緒に使用する。tableの各タグの置換えは、ページ全体の構造や好みで変えれば良いと思う。

スタイルシート。

スポンサードリンク

縦横中心にボックスを配置するCSS。どこかで使えそうなので、メモ。

Some Mini Sass Mixins I Like by Chris Coyier on CodePen
http://codepen.io/chriscoyier/blog/some-mini-sass-mixins-i-like

スポンサードリンク

画面サイズによる、画像の切り替え。

色々使ってきたけれど、「BlackFlag」さんのやり方が使いやすい。ありがたい。

jQueryでレスポンシブ対応の際にウィンドウサイズによって読み込む画像を切り替える実験 | BlackFlag
http://black-flag.net/jquery/20120808-4047.html

1.小さい画面ように「photo01_sp.jpg」、大きい画面ように「photo01_pc.jpg」を準備しておく

2.以下のスクリプトを記述。(外部ファイルにして読み込んでもOK)

3.classに「switch」を指定。(上記のscriptで指定したclass)

スポンサードリンク

IE8でもvideoタグで動画を埋め込むのに、こちらのjsを利用させてもらいました。

HTML5 video
http://html5media.info/
github
https://github.com/etianen/html5media

  • 自動再生はvideoタグにautoplayを追加してやる。でも、基本的に自動再生は迷惑だと思っている。
  • コントローラーのデザインはブラウザによって異なります。
  • Flowplayer HTML5 (https://flowplayer.org/)を使用しているので、読み込みが遅かったりすると、Flowplayerへのロゴとリンクが表示されることがある。
  • IE8はheightを指定しないと小さくなってしまった。レスポンシブの場合はautoとかで良いのかな?未検証。
  • autoplayにしない場合、IE8とFirefoxでは画面が真っ暗になったので、posterで表示する画像を指定してやる。
    chromeは最初のフレームが表示されてた。
  • Firefoxがmp4に対応していないようだったので、webmも読み込ませてるけど、どうやら現在(2014年3月)時点の最新のFirefoxではmp4もOKのようです。
    まあ、中途半端に古いfirefoxを使っている人がいそうな会員サイト(どんなん?)のようなので、念のため入れとく。
  • preload指定したら、なぜか同僚のIE8が再生されなかったので外した。たぶんファイルサイズが大きすぎて読み込めてなかったんだと思うけど未検証。

スポンサードリンク

Google Fontsから、ちょっと使ってみようかなと思ったWebフォントのメモ。

sans-serif

1.Montserrat

字幅広め 丸っこい 軽い
本文には太すぎると思う

2.Source Sans Pro (Normal 400)

軽い winでも比較的きれい
他にもウェイトがたくさんある

3.Lato (Normal 400)

オーソドックスで使いやすい
winでも比較的きれい 少し重い
Source Sans Proよりやわらかい印象
他にもウェイトがたくさんある

4.Syncopate (Normal 400)

幅広 個性的だけれどシンプル Boldもある
見出しやロゴっぽく使うのに良さそう


serif

5.Rokkitt

軽い winでも比較的きれい
カチカチした 新聞とか

6.Merriweather

軽い シンプルで使いやすそう
スタイルがたくさんある
Merriweather sansもある

7.Sorts Mill Goudy

字幅広め 軽い 
Rokkittよりエレガントな印象  winでも比較的きれい


cursive

8.Homemade Apple

鉛筆で書いたような質感がある手書き筆記体
フォントサイズが大きいとデコボコ感があまりきれいじゃない

9.Calligraffitti

手書き筆記体
縦に長く流れるような感じ

10.Zeyada

手書き筆記体
くちゃっと勢いがある感じ

11.La Belle Aurore

手書き筆記体
クラシックな手紙のような

12.Shadows Into Light

手書き
素早くカツカツ書いた感じ

13.Amatic SC

手書き 細長い 少し力をいれてまっすぐな線で書いた感じ

14.Patrick Hand SC

手書き 太めのサインペンで書いたような子どもっぽいかわいさ

15.Special Elite

タイプライターやスタンプみたいな感じ
少し重い

16.Poiret One

細くて丸い 幅広

<link href=’http://fonts.googleapis.com/css?family=Poiret+One’ rel=’stylesheet’ type=’text/css’>

17.Kranky

手書きでレタリングしたみたい

 

スポンサードリンク