emuramemo

製品レビュー、HTML/CSS、webデザイン、音楽、その他いろいろ

HTML・CSS

今のコーディング方法を知るのに最適な書籍「現場のプロが本気で教える HTMLCSSデザイン講義」

・ヤフーの現場で使っているCSS設計方法とは? - linotice* | Yahoo! JAPAN RECRUITMENT 上記の記事がきっかけで、「現場のプロが本気で教える HTMLCSSデザイン講義」を読んでみました。大手ヤフーで、どんなコーディングをしているのか気になりますよね。

CSS blend-modeとPhotoshopの描画モード

CSS3からblend-modeというプロパティが使えるようになりました。 Photoshopでいう描画モードがCSSで使えるわけですね。 他社さんからデザインをもらった時、PSDのレイヤーが乗算で乗っていることがありますが、実際に再現してみようとCSSを書いてみると自分…

WordPress archive-○○○.phpの投稿一覧が表示されない時の解決方法

WordPressで投稿ページをデフォルトのもの以外にも追加することがあると思います。その時に専用の記事の一覧ページも作る必要があります。 しかし一覧ページに投稿したコンテツが表示されなくて困りました。

ウィンドウサイズよりも大きい画像をサイズをそのままで横スクロールバーを出さずに中央表示する

タイトルを書いてみてすごく伝わりにくいんですが、メイン画像がコンテンツよりはみ出ているデザインがよくやってきます。最近続いたのでメモ。

CSS Firefox テキストをhoverでboldにするとテキストの上下位置がずれる

依頼案件で見つけたのでメモ。 家のPCではなぜかずれる現象が再現できなかったのですが、同じ症状が起きた時は試してみてください。

WordPress duplicatorのサーバー移行(ロリポップ→さくらサーバー)でつまずいた点など

WordPressで制作したサイトを別サーバーへ移行する作業が必要になり、方法をしらべるとduplicatorというプラグインで楽々に出来ることがわかりました。 サーバー移行で一通りやった流れを参考サイトを元にまとめておきます。細かい手順は参考記事が参考にな…

WordPressの多言語化プラグイン qtranslateX

WordPressの多言語化の方法は何種類かありますが、一番とっつきやすそうな「qtranslateX」を使ってみることにしました。

ロゴを作りました

ロゴ、ウサギです。

初めてのWordPressの対応にもオススメ WordPress 仕事の現場でサッと使える!デザイン教科書

この間WordPressを使ったサイトの修正依頼があったのですが、普段自社CMSしか使わないのでほとんどWordPressって触ったことがありません。 編集したいページがサーバー上のどこにあるの?とか、そのくらいのレベルでWordPressがわからなかったのですが、この…

IllustratorのデータをSVGで保存してHTMLで表示する

会社の制作テンプレートを一新することになったのでSVGデータを使ってみることにしました。

IE9でテキスト飛ばし text-indent: 100%;が使えない

いまごろIE9ですって!?という方も多いかもしれません。 CSSでテキストを飛ばして画像を表示させる方法がありますが、IE9でテキストが飛ばしきれていなかったようです。 こんな感じに「EWS」と飛ばしたかったテキストが画像の上に表示されてしまっています。

Dreamweaverの使いどころがなくなってきた

重い、UIがごちゃごちゃしてる、デザインビューが微妙(CS4~のライブビューで改善されたらしい)、などなどあまり良い評判を聞かないDreamweaver。 近年、SublimeTextなど軽量で優秀なエディタが増えてきたこともあってますます出番はなくなってきているし、A…

Androidのchromeでハートマークに色が自動でついてしまう

あるサイトにハートマークをクリックしてカウントする機能をつけることになって「♥」とテキストでソースに書いたのですが、Android端末(nexus5)のchromeでチェックしてみるとCSSで指定した色とは別の色で表示されているよう。

SublimeTextを再インストールしてパッケージや設定を整理しました

今年SublimeText3に乗り換えてからメニューがうまく表示できなかったので再インストールすることにしました。windowsの場合です。

CSS font-family 游ゴシックが読みづらい

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

デザイナーも読んでおきたい「いちばんやさしい新しいSEOの教本」

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

はてなブログにメニューをつけてみました

まよ犬さんの記事に触発されて僕もGWになんかせないかんと思いたち、メニューを付けてみました。 はてなブログのカスタマイズ! 特にモバイルページには手を加えておこう! - いつもマイナーチェンジ!mayoi-inu.hatenablog.jp

WEB制作まわりで気になる本 2015春

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

メンテナンスしやすいようにCSSの記述方法を変えてみた

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

CSSでfont-familyに小塚ゴシックを使うときに注意すること

web制作で色々と悩ましい日本語フォント。 最近はwebデザインでのスタンダードなフォントに、メイリオ・ヒラギノ角ゴに加え、游ゴシックも普及しているのでしょうか。 ですが、小塚ゴシックで作られてるwebデザインデータをもらう機会が増えている気がします…

IEのバージョンはどこまで対応すべきか?(2014年)

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

画面サイズの多様化。スマートフォンサイトの作り方はこれからどうなるか

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

HTML・CSSを初心者からしっかり勉強できる良質なサイト3選

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

CSSオジサン#0 at 大阪に行ってきました

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

overflow-x、yがIE以外のブラウザにも対応していた

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

web制作でよく使う 地味だけど便利なFキー

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

スマホサイトに簡単に実装できる画像ギャラリー系jQueryプラグイン IMAGE LIGHTBOX

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

cssで見出しにアイコン画像を表示させる方法いろいろ

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

firefoxで上下に意図しない隙間ができるclearfix問題

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

css spriteで使うcssプロパティを理解する

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

emuramemo(c) All Rights Reserved.