今年SublimeText3に乗り換えてからメニューまわりがうまく表示できなかったので再インストールしました。windowsの場合です。 SublimeTextのアンインストール SublimeText 本体をインストール Package Controlをインストール 日本語化 追加した設定・パッケ…

会社にもWindows8 PCがやってきたので游ゴシックの表示をチェックしてみました。 Windowsのchrome、Firefoxでは文字が細く、今にも消えそうな表示。。 Macは持ってないのでsafariやMac版のchromeでの表示がどうなのかはわかりません。想像ではキレイに出てる…

SEOの本では有名なんじゃないでしょうか。「いちばんやさしい」とのことで、SEOの知識がふんわりしてる自分にはちょうどよいと思い読んでみました。

GWに向けて勉強する本を３つピックアップ。

メンテナンスしやすいようにCSSの記述方法を変えてみました。 なにも難しいことはしません。

CSSでfont-familyに小塚ゴシックを使うときに文字の上下位置やアンチエイリアスがブラウザによってまばらになってしまうことがあります。font-familyに小塚ゴシック指定する場合に注意することや確認しておきたいことをまとめました。

ちょっと前、こんな記事が炎上して、ブコメでIEの話題が出ました。 ・早稲田大学のサイトリニューアルがなぜこんなにひどいのか。 - 隣り合わせの灰と青春 IEってたくさんのバージョンがありますが、2014年の現時点でどこまで対応したらいいの？ということで…

Apple - iPhone 6 クライアントの予算に余裕のある時にはセットで依頼があるスマートフォンサイト制作。その作り方も様々です。

HTML・CSSコーディングを会社内で一から教える機会がありまして、教材用に良いサイトが無いか探してみました。 しかし、変に間違った情報を載せていたり、技術が古くなって今は使えないものだったり、そういった情報サイトは数多く存在します。 一応仕事でHT…

大阪でCSSのイベントがあるときいて、しかも気になっていた「Web制作者のためのCSS設計の教科書」の出版記念イベントだということで行ってきました。その内容と感想を。

スクロールボックスを手軽につくりたい時や、JSと併用して使うことが多いCSSのoverflow。 overflowを縦だけに使いたい、もしくは横だけに使いたい時って結構あるんですが、「overflow 縦」で検索するとこのページが上位に出てきます。

たまにデザインを頂く時にギョッとするPSDデータをもらうことがあります。 以下の点などをチェックして渡してくれたら嬉しいなぁ、なんて思いました。

ショートカットキーっていいですね。なかでもボタンひとつで便利な機能を使えるFキー。 よく使うFキーを紹介します。（windowsです）

今までPCサイトに画像ギャラリー系（Lightbox系）のjQueryにcolorboxをよく使ってたのですが、スマートフォンでの表示に動作があんまりな感じだったのでスマートフォンサイト向けのjQueryのプラグインを探してみました。

見出しのアクセントとしてよく使われるアイコン画像。 imgタグで表示させるよりもcssで書いたほうがメンテナンス性にも優れます。 センター寄せをする方法も含め、まとめておきます。

サイトをコーディングしていると、たまにFirefoxだけ意図しない隙間が上下にできる事があります。（主に上に隙間ができます） Firebugで見てみると、marginでもpaddingでもなくcssでは確認できない空白があります。

スクリーンショットでとった画像などをブログにアップするときに、アカウント情報などを隠したい場合があります。その隠したい部分を単色で塗りつぶすよりモザイクをかけるほうが見た目がわかりやすくて良いと思います。 Photoshopネタですがかなり簡単です…

最近はよくcss spriteで画像を表示することが多くなってきました。 アイコンやボタン画像などをまとめておくと画像リクエスト数が減ってサイトの高速化につながります。ですが私自身、どのタイミングで、どこからどこまで使えばいいかは試行錯誤中です。 css…

スマートフォンサイトの制作案件が年々増えてきました。 自分自身もスマートフォンサイトを見るのに慣れてきたので、ネットサーフィンしてる時にスマートフォンサイトがないと「なんだよーPCサイトだけかよー」と思ったりします。 スマートフォンサイト制作…

Photoshopネタですが、ワザ以外の小ネタです。 ツールを一気にウィンドウごと動かしたいってことないですか？ ここで指すツールとは画像の赤枠内のようなものです。 ノートPCでマルチディスプレイを使っている方はよくあると思うのですが、 外出のため外付け…

なにか良いWEB系の本ないかなーと本屋で立ち読みではありますが紹介しておきます。 せっかくWEBの業種で働いてるのでこういう記事もたまには書いておきます。 今回紹介する本はどちらかというとコーディングする人向けって感じです。

ツイートボタンやいいねボタンなどのsnsボタンを並べたとき、たまにこういうふうに頭がそろわない事がないでしょうか。 並びがガタガタであまり印象がよくないです。 というかFacebookボタンだけおかしい？ HTMLのソースはこんな感じです。 <aside class="sns_btn"> <ul> <li>snsボタン</li> <li>sns</li></ul></aside>…

sublime textを使い続けて約1ヶ月ほどになります。 どんな設定よりもカラースキームやらテーマを決めるのに一番悩みました。 そこで見つけたのが「Flatland」というテーマ。色だけではなく、デザインも変わります。 こちらのブログで紹介されてました。設定…

デザインがあがってきたけどフロートコンテンツがコンテンツ幅ぴったりになってるけどどうするの？って経験、あると思います。 こんな感じ。コンテンツ幅がかつかつだとmargin入らないんですけど…って状態です。こんなときはネガティブマージンを使って回避…

IEといえば問題児ブラウザで有名ですが、各バージョンの確認が多少面倒なものです。 chromeみたくバージョン制度廃止してほしいです。自動更新してほしい！ いままではIE TesterなるソフトをインストールしてIEの各バージョンを確認していたのですが、すぐク…

フォームのボタンを画像で表示したいときに <input type="image" src="画像パス" alt="代替テキスト" /> で画像を表示させる方法があります。 が、IE9だけ表示されません。。。 ボタンをcssのbackground表示で解決できるかもしれませんが、大量にボタンがある場合はひとつずつcss書いていくのがさすがに面倒。 htmlの…

CSSでbefore,after要素が表示されなくて困ったときに確認したいポイントをまとめています。疑似要素の簡単な説明と実際に確認するためのCSSの記述方法を紹介しています。

スマートフォンサイトの制作をするために参考サイトをよく見るのですが、 （こことか→iPhoneデザインボックス http://design.web-hon.com） PCでスマートフォンサイトのリンクをクリックするとほとんどの場合、 PCサイトに飛ばされます（泣） スマートフォン…

以前何度かいろんなブログでお見かけしたPNG画像軽量化サイト「TinyPNG」 これが想像以上に軽量化してくれます。 そして見た感じもほとんど劣化がわかりません。（私自身、見分けはつきませんでした…） 実際に試してみると合計700KBが300KBまで軽量されまし…

web制作ではかなりお世話になっているカスタムシェイプ。 よくベクター形式のファイル（アイコン集とかシルエット）が無料素材で落ちているけど、それをPhotoshopのカスタムシェイプに追加すればさらに作業効率がアップします！ （もとからカスタムシェイプ…