niwadesign

ホームページ制作のネタ発信

バンカーリングを1年半使ってみた感想

2016/02/25   -iPhone

約1年半前にiPhone6 Plusを購入した際にあわせてバンカーリングを購入しました。 今でもPlusのサイズに馴染めず後悔しているが、バンカーリングのおかげである程度使用感がマシになった。 次回は …

iPhoneのフォームでフォーカスがズームされるのを防ぐ方法

2016/02/25   -CSS講座, iPhone
 

スマホ用のサイトを作っている時にフォームのテキストフィールドやセレクトをタップすると、画面がズームされることはありませんか? そんな時はフォントサイズを16px以上にするとズームされるとこなく、入力す …

パーセント(%)指定したボックスにボーダーを指定する方法

2015/08/31   -CSS講座, 小ネタ

最近はスマホサイトの制作も増え、ボックスの幅をパーセント(%)指定することが増えてきました。 その際にボックスにボーダーを追加するとボーダー分幅が広くなりカラム落ちすることがあります。 そんな時は、ボ …

SmartyでGoogleアドセンスを表示させる方法

2015/08/09   -html

7,8年前に制作したサイトをスマホ化対応させようと思ったら、 Googleアドセンスの表示でつまずいた。。。 まず、新規発行したアナリティクスコードを貼り付けると、画面が真っ白!!! すべての要素が表 …

Chromeのディベロッパーツールを別ウィンドウにする方法

2015/04/30   -html, 仕事術

最近PCを買い替えていつものようにディベロッパーツールを使おうと開いたら、ブラウザから分離できない。。。 調べてみたら、下右に移動させるアイコンを長押しすると別ウィンドウのアイコンが表示される。 わか …

no image

IE10以降にだけにCSSを適応するハック

2014/12/25   -CSS講座
 ,

最近あまりIE用のCSSハックを使うことが無くなったけど、どうしてもハックする必要がでてきたのでメモ。 @media all and (-ms-high-contrast:none){ .red { …

iPhoneの画面をMacで録画する方法

2014/12/20   -iPhone, mac, 動画

iPhoneの画面を録画したい時ってありますよね? 例えばパズドラの画面をYouT­ubeにアップしたりなど! 今までは専用のアプリなどを使わないとできなかったことが、 MacのOS10.10(­Yo …

FlashAirの設定から撮影、スマホ転送までの使い方

今回Wi-Fi機能のついたSDカード(FlashAir)の設定から撮影、スマホ転送までの使い方をご説明します。 詳しくは下記の動画を見て下さい。 動画後半ではニコンのD80で試してダメだったけど、同一 …

幅いっぱいのスマホサイトのメニューで1pxのボーダーを追加する方法

2014/12/01   -CSS講座, 小ネタ
 

基本的にスマホサイトを作る際はリキッドレイアウトにすることが多いと思う。 その際1つ1つの要素に対して%(パーセント)指定をするが、1pxのボーダーを要素の間にいれようと思うと、 これがなかなかうまく …

Photoshopで何度も戻りたい方法(連続して戻る方法)

大体のアプリで共通して戻る(取り消す)場合command + z で戻り、連続して押すと何度も戻ることができますが、Photoshopの場合は取り消しとやり直しで行ったり来たりで1回しか戻ることができ …

[CSS]iPhoneのSafariで背景画像のposition: fixed;が効かない時の対処法

2014/11/18   -CSS講座
 ,

スマホ用のサイトを制作中にiPhoneのSafariで背景画像のposition: fixed;が効かなかったので、それの対処法の備忘録。 この「ああああああ」のボックスが上のメインビジュアルの上を移 …

スマホサイト(iPhone)のソースコード(htmlソース)MacのSafariで確認する方法

2014/11/01   -html, iPhone, mac, Safari
 , ,

前回ブックマークレットを使ってのソースコードの確認方法を紹介しましたが、 今回はMacのSafariを使ってのソースコードの確認方法をご紹介します。 ■iPhoneの設定 設定 > Safari > …

スマホサイト(iPhone)のソースコード(htmlソース)確認方法

2014/10/29   -html, iPhone, Safari
 ,

スマホサイトを制作する時に、たまに実機でjsの挙動などソースコード(htmlソース)を確認したい時があります。 そんな時、役に立つ小技をご紹介。 Bookmarklet(ブックマークレット)を使った方 …

pngyu

png画像をより軽くする方法

2014/10/24   -仕事術
 

pngyu 最近のWEB制作ではpng画像をよく使います。1つ1つはそれほど重くなくても、数が増えるとやはり、表示速度が遅延する原因になります。 そこで、クオリティをほとんど落とさずにpng画像を軽量 …

Dreamweaverでよく使うショートカット

普段ボクがコーディングする上でよく使うショートカットの紹介 ⌘(コマンド)+1〜6 h1〜h6 ⌘(コマンド)+Shift+P pタグ ⌘(コマンド)+B strongタグ ⌘(コマンド)+alt+T …

no image

バンカーリング iPhone6 Plusをバンカーリングで上手に使う

2014/10/20   -iPhone

読み込み中 デカすぎて現状後悔しかしていないiPhone6 Plusをバンカーリングでカバーできるかな!? Instagramで閲覧 iPhone6 Plusを購入して約1ヶ月。未だにiPhone5か …

sass 引き算

Sassで引き算(演算)を使うときの注意点

2014/08/26   -Sass

久しぶりに簡単な事でハマった。sassを使っていて引き算をする場合は、-(マイナス)の前後に半角スペースが必要だった。 //sass .demo { width: 100px – 20px; } // …

続:Mac OSXでhostsファイルを編集する方法2014年版

2014/08/07   -mac, osx
 , ,

4年ほど前に書いた記事が意外にアクセスが多かったので、最近のボクのhosts書き換えの方法を公開。 昔の記事:Mac OSXでhostsファイルを編集する方法 つい先日まではターミナルから昔の記事同様 …

Macでディレクトリ階層の一覧を作る方法

2014/08/07   -mac, 仕事術

仕事をしていてよく納品ファイルの一覧が欲しいと言われることがあります。 ファイル数が少なければフォルダ内にあるファイルを選択肢てエディタに貼り付けるだけでいいのですが、 階層も深くファイル数も多い場合 …

Macで同階層のFinder(ファインダー)をもう一つ開く方法

2014/06/26   -mac, osx
 ,

Macを使っていてFinderで深い階層まで行った時、隣り合わせに同じ階層のFinderをもう一つ表示させたい時がある。 今までは新規でFinderを開いて奥の階層にドンドン進んでいったが、すごく面倒 …