emuramemo

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

HTML・CSS

Markup Meetup #1 in Osaka に行ってきました

なんと、マークアップがメインのイベントが開催されました。 フロントエンドに恐れる我々としては非常にありがたい内容でした。 その時のメモです。 markup-meetup.connpass.com Reset CSS 2019 大塚さんのセッション。 Reset CSSの最新情報について。 自作…

アクセシビリティの祭典 2019に参加してきました

イベントからずいぶん日が立ってしまいました。 アクセシビリティの祭典 2019に参加した感想です。 アクセシビリティはたくさんの人に恩恵がある アクセシビリティを知る機会がないのかもしれない アクセシビリティをどうやって社内に広めるか まずはできる…

html picture要素の分岐が動かないとき

picture要素を使うことで、ウィンドウ幅ごとに読み込む画像を変更することができます。 しかし、どの幅でも同じ画像が表示されてしまい困りました。 ソース 以下、分岐が動作しないソース。 以下、修正したソース。 aタグをpicture要素の外に出してやるとち…

Webアクセシビリティの学校 in 京都に行ってきました

株式会社インフォアクシアさんが開催している「Webアクセシビリティの学校 in 京都」に行ってきました。 「Webアクセシビリティの学校 in 京都」にご参加いただいた皆さん、昨日はありがとうございました!アンケートのURLをご案内するフォローアップメール…

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

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

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の場合です。 SublimeTextのアンインストール SublimeText 本体をインストール Package Controlをインストール 日本語化 追加した設定・パッケ…

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に小塚ゴシックを使うときに注意すること

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

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です)

emuramemo(c) All Rights Reserved.