こんにちは、Canvasでバリバリ仕事中の@yoheiMuneです。 最近のWebアプリでCanvasを使っているアプリが多いですが、Retina対応できておらず、にじんだ感じになっているアプリが多々あり。。 なので、CanvasでRetina対応できるのかを調べました。今回はその結果を記載したブログとなります。 Canvasで普通に描画するとにじむ Canvasの描画内容をRetinaでない多くのPCブラウザで見る分には問題ないのですが、 iPhoneなどのRetina対応したブラウザで見るとにじんで見えてしまいます。 画像などの表示ではRetina対応を行う事が多いですが、 CanvasでもRetina対応する事でにじまずに描画内容を表現できるようです。 CanvasでRetina対応をする方法は、画像のRetina対応の考え方と同じで、 描画した内容を1/2のサイズで表示することでキ

日本語組版において、縦書きと横書きの選択肢があるということは極めて自然なことですが、Webサイト制作の中で自由な組版を実装するための技術はこれまで標準化されておらず、縦書きの実装はJavaScript等による強引な手段でしか実現できないという問題を抱えていました。 私たち『縦書きWeb普及委員会』は、縦書きと横書きが混在する日本語組版の文化をWebに継承し、自由な組版を実装するための規格をWeb標準とすべく、Webに関連する各種技術の国際標準化団体であるW3Cと協議を重ねながら、CSSにおける新たな組版規格である〝Writing Modes〟の標準化に向け、様々な取り組みを行なっています。 『たてよこWebアワード2017』は、こうした取り組みのひとつとして、CSS Writing Modesを用いた縦書き実装の指標となるような優れたWebサイトを表彰することを目的としたアワードです。 縦

原色大辞典とは 原色大辞典は1997年にオープンしたネットの色見本サイトです。 9種類の色見本と色に関する各種サービスから構成されています。 色見本コンテンツは ブラウザで定義されているHTMLカラーネーム、 日本の伝統色、 世界の伝統色、 Webセーフカラー、 パステルカラー、 ビビッドカラー、 モノトーン、 地下鉄のシンボルカラー、 国鉄制定の塗装色 の9つから構成され、特に日本の伝統色は古来伝わる先人の色彩感覚を現代に伝えるものとして多くの方々から支持をいただいています。 文字列と背景色の組み合わせを試せる配色大辞典、 規則性のある組み合わせから色を選べる配色パターン。 色見本の他にも、今日のラッキーカラー、 コトバから色を解析して調合する成分解析、 ストライプを生成するストライプメーカー、 グラデーションを生成するグラデーションメーカー、 あなたの好きな色と色を調合する色調合、 サ

「パララックス」をはじめとする「スクロールエフェクト」の魅力とは タグ Javascript Webサイト制作 「パララックス」はWebデザインのトレンドとして2012年頃から流行り始め、現在はこの手法を利用したサイトをよく見かけるようになりました。そろそろブームが過ぎるのでは？という意見も聞こえますが、パララックス効果を代表とするスクロールエフェクトはアイディア次第でまだまだWeb利用者たちを魅了する可能性をたくさん秘めているのです。 パララックスとは？ パララックス（parallax）、直訳すると「視差」という意味です。もともと写真用語で、光学式ビューファインダーを使う際、レンズとの位置関係のズレにより、ファインダー視野と実際に撮影される画面にズレが生じる現象を指す言葉です。Webデザインにおけるパララックスは、スクロールといった動作に応じて、複数のレイヤー（層）にある視覚要素を異なる

2017年5月25日 CSS FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。前々からあった技術ですが、ブラウザーによって書き方が違ったり、仕様がころころ変わったりと、イマイチ一歩踏み出せない感があったFlexbox。しかしようやくモダンブラウザーでの利用に難がなくなり、実務にも充分使えるようになりました。今回はそんなFlexboxの魅力と使いドコロを、デモ付きで紹介していこうと思います！ ↑私が10年以上利用している会計ソフト！ 対応ブラウザー Can I use…で紹介されているように、現行のモダンブラウザーでは問題なく利用できます。ただし、Safari用に -webkit- のベンダープレフィックスが必要です。IEについては11から正式に対応。IE10にも対応していますが、書き方が

匿名diaryに書くつもりと思ったけど、実名で書くよ。あえて。 僕たちプログラマーは、ちょっとしたコード生成に、Excelを使いません！ 僕たちプログラマーは、ちょっとしたコード生成に、Excelを使います！ めんどうな作業がわずか数秒に！新人デザイナーが 知らないと一生後悔するExcelを使ったHTML生成 あえて、言わせてもらう。EXCELを"ちょとした"テキスト処理に使うか。あり得ない。*1 僕らプログラマは...Excelでコード書きます」はちょっと無理。 「プログラマ」を本文から消せよ。 まず箱形選択を使う。 Excelを使ってるのは、正規表現が難しいと感じる人で、置換コードを書いたり、マクロを使えないレベルの人ですね。 そういう人は、まず「箱形」を覚えるのが第一歩。 箱形選択は伝統技。古いから使い物にならないというわけでもなんでもない。固定長は使いやすい。 最近はCSV,TSV

お客さんから送られてきた、Excelデータからせっせとリストや表のHTMLをコーディングしているあなた！そろそろ手がが疲れてきていませんか？ そんなあなたは、この記事で紹介するExcelテクニックをぜひ覚えてください。 面倒な作業が、わずか数秒で終わります！ Excelを使った高速HTML生成 僕たちプログラマーは、ちょっとしたコード生成に、Excelを使います！ DreamweaverでもCSVファイルを取り込むことはできるのですが、<dl>タグでマークアップしたい時とか、カスタマイズしたい場合は、これから紹介するExcelを使った方法が簡単で、効果的です。 さぁ、↓のようなお客さんから送られてきたExcelデータから ... こんな感じの、<dl>タグでマークアップされたHTML生成する流れを説明します。データ数はうんざりするくらいあると思ってください。 Let's Excel 1)

【Web制作などの依頼で「概要」しかわからないのに「とりあえず見積が欲しい」と言われたとき、私はこんなことに気をつけています】 どうもです。いきなりですが、私は毎年この年末から来年の3月末あたりまで、段階的に仕事周りが騒がしくなって来る時期だったりします。決算期の都合もあるんでしょうかねぇ。似たような状況の方も多いのではないかと思います。ほんと、最近依頼が多いです。 ところで、仕事の依頼があるって嬉しいことです。 普段あまり交流のなかった方から突然の依頼や、または、人づてで紹介を受けたりなど。紹介を受けるってことは「仕事ちゃんとしてくれるよ」ってのを認めてもらえた証拠だと思っています。本気でうれしいです。 と、ここで「依頼」についてちょっと掘り下げたいな～と思いました。本題に入る前に、少しだけ前置きにお付き合いくださいますと幸いです。 ・・・「依頼」っていろいろありますね。 「ハマる依頼」

私は大学生時代の4年間、キャバクラでキャバ嬢としてアルバイトをしてたんやけど、その時はナンバー1までは行かずとも、そこまで売れてないわけではなかった。 でも、最高でそのお店でナンバー3を取るくらいの人気を得ることができてたから、決して悪い成績ではなかったかなーとは思ってて笑 そんな私が4年間キャバクラ業界にいて、稼げるキャバ嬢と稼げないキャバ嬢の違いについて、気づいたことをここで書いていくね。 大阪のキャバクラで稼ぎたい、そう思ってる女の子はこのことについて1回考えてみて欲しい！ 稼げるキャバ嬢の特徴① 常に学ぼうとする意識がある キャバクラに入りたての頃は、仕事や接客の方法について学ぼうという意識を持つやろうけど、ある程度経って仕事にも慣れてきた頃が要注意。 キャバ嬢の仕事に慣れてきたからと言って、何も学ぼうとしないのはNG！ 接客の方法がワンパターンやと最初に持ったお客さんも、だんだん

CSSセレクタって意外と分かっていなかったりするので勉強ついでにまとめてみました。比較的実用的かなと思うものを20個紹介していきます。いい復習になればと思います。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 また、IEが対応しきれていないCSS3のセレクタもありますが、IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」 で紹介したようにCSS3セレクタはie対策も容易なのでぜひお試しください。 SelectivizrはCSSを外部ファイルで指定した方がいいのですが、今回のサンプルはCSSを外部ファイル

WebクリエイターボックスのX: @webcreatorboxでは毎日Webに関する記事や美しいデザイン・写真などを紹介しています。その中で今週人気だったWeb関連の情報トップ10を紹介します。見逃してしまった人はこちらでチェック！まだフォローしてない人はお気軽にフォローしてみてくださいね！ 続きを読む オンラインスクールでWebデザインを教えているのですが、よく担当している生徒から良い案件や求人情報の見分け方を質問されます。経験が増えると「これなんとなく胡散臭いなー」というのが見えてくるのですが、最初のうちは難しいですよね。ブラック案件やブラック企業にあたらないように、チェックしたいポイントをまとめました。 続きを読む WebクリエイターボックスのX: @webcreatorboxでは毎日Webに関する記事や美しいデザイン・写真などを紹介しています。その中で今週人気だったWeb関連の情報

追加直後のカスタム投稿タイプで、入力した記事を表示しようとすると「ページが見つかりません」と表示される場合があります。 たとえば、「書籍」というカスタム投稿タイプを追加して、作成した記事を表示してみます。 カスタム投稿タイプの投稿を表示すると… 「表示」をクリックしても、ページが表示されません。 投稿が表示されない その場合、「設定」‐「パーマリンク設定」メニューで「変更を保存」ボタンをクリックしてください。 パーマリンクを設定 パーマリンクの設定は変更する必要はありません。「変更を保存」ボタンをクリックするだけです。 これで、追加したカスタム投稿タイプを反映するようにパーマリンクの設定が更新されます（WordPressデータベースのwp_optionsテーブルのrewrite_rulesが書き換えられる）。 もう一度、カスタム投稿タイプの投稿を表示すると、今度はうまく表示されるはずです。