colopixie

Webkit系ブラウザでの印刷・box-shadowのバグ？

chinatsu — Mon, 20 Feb 2012 14:00:07 +0000

(実際にChromeやSafariなどでプリントプレビューしてみてください)

何があったのか

Chromeで960pxがあるコンテンツのPrint CSSを書いていて、印刷プレビューすると途中でコンテンツが切れてしまうという現象にぶち当たりました(-_-)/~~~ピシー!ピシー!

そこで、Box-Shadow(inset)を使ってどこまで印刷（なんpx）できるのか試していたのです！

以下ソース





無題ドキュメント








950px


900px

850px

800px

750px

しかし

分かりやす行く色分けしていたのですが、印刷プレビューをみると・・・・・！？

あれ…

全部一番内側のBox-shadowの色になってね…

どういうことなんでしょうね…

ふしぎです。

何か

このソースおかしくね。バカじゃねーの。まじありえなーい。などありましたら@puzzeljpまでリプライくれると、やべーまじ感謝だわー。といって喜びます。
これまじバグ！とかくれると、てへぺろ〜〜〜〜といって納得してバグ発見かも〜と喜びます。

File View

(実際にChromeやSafariなどでプリントプレビューしてみてください)

無料で漢字が使えるフォントまとめ

chinatsu — Tue, 10 Jan 2012 03:00:20 +0000

色々なところで紹介されている日本語で漢字が使えるフォントを字体で分けてみた。
利用規約や商用利用などは各自で確認し、使用してください。

明朝体
ゴシック体
手書き風
その他

明朝体

花園フォント

Hanazono fonts
はんなり明朝

フォント無料ダウンロード｜ Typing Art

ゴシック体

M+

M+ OUTLINE FONTS
梅フォント

Ume-font Wiki – SourceForge.JP
VL Gothic

VL Gothic Font Family
GD-高速道路ゴシックJA

5r4ce2[Fiber Force2] pumpCurry's Website – fontJunction at hogera.com
戸越フォント

戸越フォント
美咲フォント

8*8ドット日本語フォント「美咲フォント」

手書き風

あんずもじ

あんずいろapricot×colorフリー写真素材・手書きフォント・人物写真素材
ホリデイMDJP03

HOLIDAY-MDJP03 | ホリデイMDJP03 | Maniackers Design | Design Font
みかちゃんフォント

オリジナルフォント【みかちゃん】
たぬき油性マジック

TrueType形式のフリーフォント「たぬき油性マジック」を公開しました。: たぬきフォント
ふい字

ふい字置き場
KFひま字

KF STUDIO | ひま字
きろ字

SecondWave » 手書き風総合書体 – きろ字
S2Gうみフォント

S2Gうみフォント
ほにゃ字

ほにゃ。
ミウラLINER_jr

MopStudio
あくびん
**萌萌可愛字體あくび印**

その他

しねきゃぷしょん

#Font – Cinecaption
怨霊フォント

暗黒工房日本語フリーホラーフォント怨霊
モトヤバーチ1,モトヤアポロ1/モトヤシーダ1

全文字フリーフォント
衡山毛筆フォント

衡山毛筆フォント
白舟篆書教漢等

白舟書体。伝統的書体から遊び心溢れるデザイン筆文字のフォントまで
88zenなど

無料ピクセルフォントダウンロード
コミックW4-IPA

コミックW4-IPA | フォント910

HTMLソースからCSSセレクターを吐き出してくれるウェブサービス

chinatsu — Fri, 06 Jan 2012 11:15:46 +0000

膨大なHTMLをZen-Codingでbody#body>div#container>(div#header>h1#sitetitle+div#headermenu>ul>li*5>a)+(div#contents>(div#content>div.entrylist*5>(h2.entrytitle>a)+span.date+p.entrytext+span.entryfooter)+(div#aside>div.side*5>h3.sidetitle+p))+(div#footer>(ul.footermenu>li*5>a)+p.copyright+span.pagetop>a)みたいなのを書いてCmd+Eで展開したのはいいけど、CSSのセレクターを書くのが面倒になってしまったときは下で紹介するサービスが便利ですよ。
2つサービスがあるのですが、ちょっと仕様が異なるので用途によって分けるといいと思います。
サンプルにてヘッダーだけを生成して見ました。

CSS Selector Generator | CSS のセレクタ一覧を一発で自動生成！

さっきのZen-codingしたやつをしてみると

@charset "UTF-8";

/* ///////////////////////////////////////////////////////////////////

[header]
	[headermenu]

/////////////////////////////////////////////////////////////////// */

a:link {
}
a:visited {
}
a:hover {
}
a:active {
}

/* =========================================================
header
========================================================= */
div#header {
}

div#header h1#sitetitle {
}

/* =========================================================
headermenu
========================================================= */
div#header div#headermenu {
}

div#header div#headermenu ul {
}

div#header div#headermenu ul li {
}

div#header div#headermenu ul li a {
}

PrimerCSS

さっきのZen-codingしたやつをしてみると

/* CSS Generated by Primer - primercss.com */

div#header {

}

h1#sitetitle {

}

div#headermenu {

}

ID,CASSSをつけてくれないのとつけてくれないっていう違いが大きですね。
CSS Selector Generatorhはオプションが選べたり。
ただシンプルにID,CLASSだけのセレクターを生成したければ、PrimerCSSでいいと思います。

ちなみに全部展開したHTMLはこちら

紹介したもの

CSS Selector Generator | CSS のセレクタ一覧を一発で自動生成！

PrimerCSS

jQueryのプラグインをまとめたサイト「jQuery Clip」をリニューアルしました。

chinatsu — Tue, 03 Jan 2012 08:43:25 +0000

あけましておめでとうございます。
ふくちです。

元日にjQuery Clip – jQueryのプラグインをまとめました。をバージョンアップしたものを公開しました。
以前から（９月くらい）制作していたのですが仕事のほうが忙しく進みませんでした。が、やっとの思いで公開できるくらいまでに作ることが出来ました。せっかくなのでアクセスも少なく影響しないだろう元日にメンテナンスを行い、公開を致しました。

以下の機能等を追加しました。
・登録後プラグインを追加することができるようになった
・関連するプラグインを表示可能になりました。
・追加頻度の向上（※跡で紹介します

まず、登録（こちらから登録できます）することが可能になりログインすることでお好きなプラグインを追加できる様になりました。

・関連するプラグインが表示されるようになった

プラグイン任せだったのをPHPの方で表示できるようしました。

・追加頻度の向上

以前はWPの管理画面でプラグインを追加していたのですが、現バージョンからはadd_plugin.phpから投稿できるように成りました。
そうすることで簡単にプラグインを追加できるように成りました（以前はキャプチャーもとっていましたが現在はWPのAPIから取ってきています。

使用したいプラグインなど紹介したいのですが、Howtoや利用規約などが途中なのでそれが公開できたら掲載したいと思います。

では

jQuery Clip – jQueryのプラグインをまとめました。
をよろしくお願いします！！！

[まとめ記事] じゃあね、2011年

chinatsu — Fri, 30 Dec 2011 15:37:56 +0000

2011年最後の記事。
今日で2011年も終わりますねッ
2011年色々ありました。
その中でも、地震が一番大きな出来事だったと思います。

個人的にはjQuery Clipを公開できたこと。
ただ後悔しているのは、更新が大変すぎたこと。
現在はベータ版で動いているやつがありますが、そこでは簡単に追加できるようになっています。
ちょっとお仕事でWPを触ることが多かったので、最近になって「ああ、こんなのあるんだ」等が多く、それを使って色々とできるようになったんじゃないかと思います！（適当ですね

夏休みには、ブランドサイトデザイン | FICC inc.さんでインターンをさせて頂きました。
Web制作会社ってどんなとこやろーと思っていたんですが（1年生デザイナーの1週間 – Webデザインとグラフィックの総合情報サイト – MdN Design Interactiveらへんを見ながら）、実際にいろいろなことをやらせてもらってとっても勉強、新しい発見ができました。（問題があれば消しますのでTwitterとかで言っていただけるとッ…！

2011年ですね！
ことしは、いろいろと発見、勉強ができた一年だと思いました。

＼どどーん／

＼Macユーザーになって1年目／
＼MBAかったど／
＼iPhoneを Genius Bar で交換してもらって新品になったよ／
＼Lionになったよ／
＼iOS5になったよ／

＼Apple／

今年はあまりブログとか更新できなかったわけですが、更新したなかでも来年役立ちそうな（役立つやろか）な記事をピックアップ。

iPhone4(iOS5)でテザリングできる夢をみた | colopixie

まだ使えるッ…！意外と早かったソフトバンク回線。

簡単に振り返ってみる2011年のWebデザインのトレンド。 | colopixie

振り返ろうぜ

Checkboxを綺麗にするん | colopixie

意外と使えそうなCheckboxをきれいにするTIPS

[ソフト] Dreamweaverで挿入の部分だけが文字化けし、治す方法（強引） | Bonnie styles.

DWを強制終了しまくって文字化けしたときに

[サイト] puzzel.jpをメディアクエリ化してみました。 | Bonnie styles.

メディアクエリ化とかするときにみたい

Lucky Design » Custom Field Templateで指定した画像の表示

まんま

Lucky Design » 稀にimgの下に与格ができてしまう時の対処法

たまにこれが起きていらっっとする

Lucky Design » チェックボックスを選択したときに文字も同時に選択する

作る側は面倒だけど、実際操作する側は便利だと思う

Lucky Design » Chrome で input の青い枠を消す

くろーむてめぇ…とまぁ消せます

まぁ色んなブログにバラバラしすぎですが、こんなもんだと思います。

さーて。今年も今日で最後！紅白を見てネットとかあけおめメール用の年賀状つくりましょ。

ではでは！

ちなみに一番の悲しい出来事はりかちゃんが消えたこと

Checkboxを綺麗にするん

chinatsu — Thu, 15 Dec 2011 15:01:49 +0000

Checkboxにあるチェックをなくしてなんかクリックしてこれ選択してるんじゃいって感じにできるようにしてみた。

⇒⇒⇒⇒⇒Checkboxを綺麗にするん

▼こんな感じです

HTML



	Checkbox

......

CSS

label input {
	width: 500px !important;
	position: absolute;
	display: block;
	padding: 5px 15px;
	height: 20px !important;
	left: -20px
}
label{
	position: relative;
	height: 20px !important;

	border: 1px solid #ddd;
	display: block;
	float:left;
	margin: 5px;
	line-height: 20px !important;
	border-radius: 3px;
	padding: 5px 15px;
	background: url(check.png);
   	overflow: hidden;
}

checkbox部分はleft:-20pxでぶっ飛ばしてから親のlabelにoverflow:hiddenして消し去ってます

jQuery

使ってます。
自分で頑張って売っていたのですが、諦めてグーグル先生に聞いてみたら
jQuery – チェックボックスがチェックされたらスタイルを変更する | 1：n – DETELU Blogの記事にありましたので、使わせて頂きました。ありがたやありがたや…

$(function(){
	$("#form :checked").each(function(){
		var isl = $(this).attr("id");
		$("label[for="+isl+"]").css({"border":"1px solid #cb003a","color":"#fff","background":"url(checked.png)","text-shadow":"-1px -1px 0px #a4002f"});
	});
	$("#form :checkbox").click(function() {
		var isl = $(this).attr("id");
		if($(this).attr('checked') == true) {
			$("label[for="+isl+"]").css({"border":"1px solid #cb003a","color":"#fff","background":"url(checked.png)","text-shadow":"-1px -1px 0px #a4002f"});
		} else {
			$("label[for="+isl+"]").css({"border":"1px solid #ddd","color":"","background":"url(check.png)","text-shadow":""});
		}
	});
});

jQueryの方は元サイトをみた方がいいと思います。

とりあえず、Checkboxの見た目をがらーんと変えたい人へ。
押す場所が大きくなる（できる）ので押しやすい！というメリットがあるような。

サンプルです：Checkboxを綺麗にするん

簡単に振り返ってみる2011年のWebデザインのトレンド。

chinatsu — Mon, 05 Dec 2011 11:20:43 +0000

今年のウェブデザインのトレンドを振り返って、2012年に使える何かを得てみてはどうでしょうか！

HTML5/CSS3
スマートフォン対応
固定されたメニュー
ベクターイラストの使用
カルーセルメニューの使用

HTML5/CSS3

HTML5のvideovideo 要素 – html5doctor – HTML5.JPやaudio（audio 要素 – 組込コンテンツ – HTML要素 – HTML5 タグリファレンス – HTML5.JP）要素などを使用されるようになりました。（colopixie:ベータ版ではありますが、YoutubeもHTML5のVideoを採用していますね。）
最新で人気のケータイOSではFlashでなくても、搭載されているウェブブラウザでHTML5のVideoなどを楽しむことができます。

CSS3では、角丸やボックスへの影付けなどを、画像を作らずとも簡単に短時間で実現できます。
また、自由に数行のコードでグラデーションも使えます。

＞2012年では、更にHTML5/CSS3を使う開発者が増えるでしょう。
また、Javascriptなどを使いもっと動的なサイトができるようになるでしょう。

スマートフォン対応

スマートフォンのブラウザでウェブサイトを閲覧することが多くなっています。しかしながら、ほとんどのサイトはパソコンで見られるように最適化されているので、スマートフォンの表示に最適化された表示にする必要があります。
WordPressユーザーならスマートフォン向けにWPtouch（WordPress › WPtouch « WordPress Plugins）を使って、テンプレートを開発するといいでしょう。

固定されたメニュー

ポートフォリオサイトに良く使用されています。
スクロールをしてもメニューが固定されているため、わざわざ上部などにスクロールせずにメニューを使うことができあます。

こちらのサイトでは、上部にメニューがついていなく右側についています。
メニューをクリックするとスクロールでコンテンツ部分に移動します。任意でスクロールした時もアイコンが切り替わります。

ベクターイラスト

ベクターイラストを使うと可愛い物ができ、訪問者の印象にのこすことができます。

最近では、ウェブサイトのデザインをベクターなどで作っていることもあります。

カルーセルメニューの使用

画像をただ置くという静的なものではなくコンテンツに合わせて動的にしましょう。jQueryのプラグインにはたくさんのカルーセルプラグイン15 jQuery Space-Saving Content Sliders and Carouselsがあるので使ってみましょう。
このプラグインを実装するには数行のコードを書き加えるだけで可能です。
注意を引くには、サイトの上部に大きく置いてみてください。

thanks

Quick look at some of the Popular Web Design Trends from 2011を意訳したものです。多少の書き加え等あります。

何か問題・間違えなどありましたらお手数ですが@puzzeljpまでリプライしていただければと思います。　

2011年12月6日22時27分 – カルーセルに直しました。すいません。

WordCamp Tokyoに参加します。

chinatsu — Sat, 26 Nov 2011 14:19:10 +0000

WordCamp Tokyo 2011 | 2011年11月27日(日) 品川シーサイド楽天タワー2号館

お久しぶりです。
明日開催のWordCamp Tokyoに参加します！
残念ながら懇親会には参加できませんが、カンファレンスには参加しますので↓の様なシャツ来てたらぜひよろしくお願いします_(:3」∠)_

Photoshopのパターンやブラシなどを簡単にバックアップする方法

chinatsu — Tue, 08 Nov 2011 11:07:31 +0000

ポターンやブラシ・グラフィック・アクションをバックアップする必要があったのでメモです。
フォルダーとか触らなくて良いので楽かと思います。

例）パターンの場合（他の場合もほぼ同じ方法でできます）

パターンを選択する画面で、右の再生ボタンを押して「パターンを保存」を押します。

保存ダイアログが出てくるので任意のフォルダーに保存します。

保存したパターンを復元したいときは、先ほどの三角ボタンのパターン読み込みまたはダブルクリックで復元が可能です。

また、アクションの場合は右上の▼≡みたいなのを押してアクションを保存すればできます。

以上です。
たくさん登録されていると時間がかかると思いますが待ちましょう…

Firefoxユーザーに戻りました。使っているアドオンなど。

chinatsu — Sat, 05 Nov 2011 14:47:24 +0000

こんにちは。この前からChromeが遅いとか言っていたのですが、最近文字入力の際にくるくるしだすのであーもー！と思って以前使っていたFirefoxに戻って来ました。過去にネスケ→Firefox。
ネスケとか懐かしいですね。

とりあえず、Firefox7速い。アドオン。

BarTab Lite :: Add-ons for Firefox
タブを開くまで読み込まず、開いてから読みこんでくれる。
Download Statusbar :: Add-ons for Firefox
ダウンロードウィンドウを出さずにステータスバーの上に表示してくれる。
Fasterfox Lite :: Add-ons for Firefox
読み込み速度など高速化してくれる
Firebug :: Add-ons for Firefox
HTMLやCSSの検証等
Top – FireMobileSimulator.org
携帯サイトを制作する際にユーザーエージェントを変更してくれる
Greasemonkey :: Add-ons for Firefox
ユーザースクリプトを追加してくれる
Hatena Bookmark :: Add-ons for Firefox
はてなブックマークのアドオン
Speed Dial – Main
Operaにあるようなよくアクセスするページを新規タブなどに表示
Tab Mix Plus :: Add-ons for Firefox
タブの表示を拡張してくれる
Xmarks | Bookmark Sync and Search
Chromeなどとブックマークを同期できる。※

便利なXmarks

iMacはメモリ16GBですごく余裕があるんだけど、MBAは2GBしかないのでFirefoxは辛いのです。
なので、MBAではChromeを使っています。
オンラインブックマークを使えばいいのですが、ブックマークツールバーをよく使うのでそこのためにこのアドオンをFirefoxとChromeに入れて同期しています。