IE7のために隣接セレクタを活用してみる
たまには、ゆるめなCSSの話題でも。 対象ブラウザがIE7からになる事で、活用できるセレクタの幅はわりと広がります。 普段、IE6の対応が必須となってると、使ってないセレクタっていざ使おうとしても活用方法が分からなかったりしますよね。うん。 と言うことで、隣接セレクタ (E + F) を使った実用的？かも知れないネタでも。 なんちゃって、しましま ある程度要素の数が決まってる場合、隣接セレクタを使えばIE7から対応でしましまが実現できます。 <ul class="sampleList"> <li>あいうえお</li> <li>かきくけこ</li> <li>さしすせそ</li> <li>たちつてと</li> <li>なにぬねの</li> </ul> ul.sampleList { list-style: none; margin: 0; padding: 0; border-top: 1px
指定した幅からはみ出たテキストを...にする
ブログを更新してるって事はわりと仕事が落ち着いている時！ 良いのか悪いのかは分かりません。 して、さすがに、前のネタはビミョー過ぎたかな！とか思いつつも今回も特に珍しいネタではないですが、メモがてら。 随分昔に、似たような記事を書いてますが、あっちは使い勝手が悪いので、今回はちゃんと使えそうな方法です。 使いドコロとしては、パンくずリストとかスマホ対応の記事一覧とかでしょうか。 サンプルは下記よりご覧ください。 重要になってくるのは、以下の3つのプロパティです。 ul li { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } どれか一つでも無いとダメなので、セットで書くようにしませう。 わりとIE6でも...にはならないけど、切ることは出来たりと対象ブラウザも広いです。 パンくずリストで使う場合は、2行にな
コーディングする時のスライス方法とか - CSS HappyLife
珍しく、Photoshopネタでも。 コーディング関係だからこのブログの主題っぽい！ 今回は、PhotoshopCS6を利用したスライスに関するアレコレです。 コーディング時にはスライスは必須ですし、一番面倒な部分なので少しでも効率良くスライス出来ると良い感じですよね。 内容としては、スライスの基本からって訳じゃないので、最低限スライスツールが使えてる方を対象にしたような感じになってると思います。たぶん。 ちなみに、面倒な説明しなくていいから分かりやすい様に動画ベースでやっていきます！ Photoshopを起動します 何はともあれ、Photoshopを起動します。 これはすごく重要な作業です。 Photoshopは重いので起動するのがダルいですね。ウチのVAIO Zが頑張ってます。 CS3の頃はサクサクで良かったんですが。 起動したら、psdファイルを開きましょう。 普通のスライス まずは
国民健康保険税が高いので、多くの人が安くなる方法を。
ブログの主題と全然関係ないけど、ウェブ制作な人とかイラスト描いてご飯食べてるフリーランスの人には意味の有る内容なのかなーと思ったので簡単にでも書いておくです。 ちなみに、現状で年間20万以上払ってる人が安くなる内容です。 20万って言うと、所得ベースで年間200万ちょい稼いでれば超えてしまう額だと思われますが、住んでいる地域によっても差が大きいので、その辺りはちゃんと調べた方が良いかなーと。 会社員からフリーランスになると大抵の人が社会保険から国民健康保険に切り替える訳ですが、多分皆思うのです。 『国保、たっけぇえっぇえΣ(ﾟДﾟ；』 でも、他に選択肢が無いと思ってたり、そう言う物だと思い込んでるから、仕方なく払う感じですよね。 ボクはそんな感じでした。 住民税もそれなりに高いけど、まだその使い道を考えれば納得できる部分が有れど、保険が収入に対してどんどん上がる国民健康保険税は納得が行かな
iPhoneのa要素内にimg要素がある場合のタップハイライトの件
結構前に、ここの名刺印刷が良かった！的な記事を書いたんですけど、結構な方に紹介者コードを利用して登録してもらったようで嬉しい限り！ 今回頼んだ名刺の出来がすごく良かった 名刺印刷をどこに頼むかお悩みの方はぜひ！ さて、適切なタイトルが浮かばなくて何だかよく分からない感じのタイトルですが、iPhoneやiPod TouchのMobile Safariですが、通常a要素を display: block; な感じにしてタップできる範囲を広げた場合、その部分全体がハイライト表示されるかと思います。 その辺りに関してちょこちょこと。 ↓実際の画面だとこんな感じです。 で、コレ自体は何の問題も無い訳ですけど、この画像部分をタップするとa要素の範囲じゃなくて、その画像のとこだけハイライトされます。 キャプチャが上手く撮れなかったからキャプチャは有りません＞＜ ハイライトされるだけで別に問題は無いんですけ
低コストで簡単にできる、ボクがやってるデータバックアップ方法
データのバックアップはフリーランスの場合、何かしら必ず行っていると思いますが、皆さまはどうやってバックアップを取っておられますか。 ちょうど、低コストで簡単にできるフリーランスの Web 屋の人に知ってもらいたいデータバックアップ方法いろいろ | ウェブルを読んだ時に自分のバックアップ方法でも書こうかなと思い早2ヶ月・・・。 こちらの記事は、TimeMachine を使ったバックアップとか、Windowsユーザーが読んだらちょっと(´・ω・`)な感じなので、Windowsユーザー向けと言うことで。 ボクも、見事にデータが吹っ飛んだ経験が有ります。 原因はSSDの破損で、復旧は不可能な状態でした。 勿論、仕事用のデータは最低限バックアップしていたので、最悪の事態には陥っていませんが、データの復旧や環境の再構築に時間が取られてしまい、かなり痛い思いをしました。 バックアップする以上は、外付けハ
【スマートフォン向け】新規でサイトを作るのに使えそうなの一式。 - CSS HappyLife
前回の更新日が見たくない程に時が流れている今日この頃・・・。 ブログを更新するモチベーションが中々上がらなかったんですが、まだ、だらだらでも良いから書いていきたいなと言う気持ちは有るんです。えぇ。 こんだけ更新が滞ってても、Twitterとかで時々ブログ読んでますって言ってもらえたり、最近なら「今日からできる定時で上がるためのWEB制作効率アップ術 | カッシーのWEBる。」で、【HTML5】新規でサイトを作るのに使えそうなの一式。Ver 1 を紹介してもらったりしてうれしい半面、更新して無いなーと、何とも言えない気持ちになったり。 なので、これからはちょろっとでもネタが有れば更新していきたいなーと。 何をモチベーションに更新するかはまだ見つかってないけど＞＜ さて、そんな訳で、今回はスマートフォン向けの新規でサイトを作るのに使えそうな感じの一式です。 【スマートフォン向け】新規でサイトを
【Retinaディスプレイ対応】Smart Phone テンプレート for MT おまけも付いてくるよ。
【Retinaディスプレイ対応】Smart Phone テンプレート for MT おまけも付いてくるよ。 2010年9月28日12:20頃追記 一部パスの書き方などが間違ってました。すみません。 現在修正版がアップされているのでDLされた方は再度お願いします。 2008年7月11日にiPhone 3Gが発売されて以降、新しい形のWebブラウジングを楽しまれている方も多いことでしょう。 ボクはそんな世の中を横目で眺めながら過ごし、つい先日まではiPhoneやiPod Touchはほぼ触ったことが無い状態でした。 そんなボクも、お仕事でiPhoneやスマートフォンに対応したサイトをコーディングする必要があり、iPod Touchを借りたのを切っ掛けに、今後もお仕事で使うだろうという名目で、新しい iPod Touch を購入してしまいました！ で、手に入れたからには仕事以外でも何か作りたいっ
スマートフォン対応してみた。
当ブログをスマートフォン対応したいなーと思ってはいたけど、iPhone持ってないしXperiaの需要はどうなんだろうとか考えたり言い訳しつつずっと放置してましたが、今回 iPod Touch （先代の）を借りたので、勉強がてらiPhone対応と言うかスマートフォン対応してみました。 何かを実験するには自分のサイトが一番手っ取り早くて良いですね。 サイト持ってない方は、ホント何でもいいので、何かしら作ったほうがいいかなーと思います。 ドメイン取得して、サーバレンタルして、構成練って、デザイン・コーディングして、FTPクライアントでファイルアップしてみたり、MTやWPインストールしていじったり、CSS3の実験したり色々使えて便利ですし、カッチリ作れば実績にもなりますしね。 と、それは良いとして、スマートフォン対応したんです。えぇ。 CSS HappyLife for iPhone URLのオシ
HTML5で組まれたブログのベースに使えそうな一式
MT underHatにヒッソリとMovable Type 5 のテーマを追加しました。 MT underHat テーマ 002 - カンバス | MT underHat 今回追加したテーマもHTML5使ってるんですが、HTML5のマークアップで一番悩みそうなアウトライン関係は敢えてあまり使わずに、分かりやすい部分だけ新要素を使ったりした感じでマークアップしています。 何と言うか、StrictっぽいHTML5 じゃなく Transitional みたいな感じって言えばイメージが伝わるかな。 入門用というか。 実際、ガッツリきっちりやっても、今後どうなるか分かりませんし、今は取りあえず触れてみるとかで良い気がしてます。 なので、触れやすい感じを目指してみました。 で、このテーマは、CSSとかガッツリいじって使ってもらうのを前提にしてる部分があるので、オリジナルを作りやすいようにローカルで確認
ルートパスで書かれたhtmlファイルをローカルで確認するには。
8月は働くよー！お盆休みってなぁに？おいしーの？ ボーナスってなぁに？それっておいしーの？ さて、Webサイトを作成するときに、ルートパス（絶対パスとまとめられる事もありますが）で記載されてたり、SSIによるインクルードをしてたり、デフォルトインデックスのファイル名（index.htmlとか）を省略してたりすると、そのままローカルで確認するには不便があったり、場合によってはそもそも確認できない訳です。 そういう場合に、じゃあどうやって確認するか。となる訳ですが、毎回テストサーバとかにアップロードして確認していたら効率が悪いので、自分のPC（Windowsとして）で確認できたら嬉しいですよね！ じゃあ、どうしたら良いかって言うと、やっぱりWebサーバをローカルで構築するのが一番良いのかなと。 そうすると、自分のPCでちゃんと見れちゃう訳です。ンマーなんて素敵！ で、Webサーバって聞くと、サ
コーディング前に確認しておきたいこと。 - CSS HappyLife
CSS HappyLife ZERO が移転したのでお手数ですが、消えちゃう前にブックマーク等変更してもらえるととても嬉しいです。 制作会社でコーディングする場合、社内のガイドライン的なのが有ったりデザイナーもある程度固定されてると思うので、毎回似たような事を確認したりとか、このデザインはどういう意図なんだろう？ってのも、何度か同じ人とやってれば見えてくる訳ですが、フリーランスの場合だとデザイナーは毎回違っていたり、当然ディレクションをする人も違うので最初に確認しておきたい事が有ったりします。 って事で、その辺りをまとめてみたり、デザインを渡されたときにこのデザインの意図は？って思う事とかもばーっと書いてみます。はい。 なので、デザイナーさんもコーダーにデザインを渡すときに気をつけて欲しい点とかもわかってしまうすばらしい内容（だと良いな）！ じゃあまずは最初に確認しておきたい基本的なことか
【jQuery】記事を開閉したりする、switchHat.js
小粋空間の中の人に会った時にMT5でこんな事したいんすよねーって話をしてて、その後MTQに書いたら、速攻でプラグインにしてくれました！ マジ感謝です。ありがとうございます。 ウェブページとかで、ページを生成したくない場合に使えるプラグインです。 PagePublishControllerプラグイン: 小粋空間 さて、今回は折りたたみするJSを結構前から所々で使ってて、毎回ソレを微妙に改変したりしながら使ってたのですがもうちょっと汎用性を高めた感じにしたくて、javascript が全く分からないのに色々やってソレっぽくしました。 これは、RedLine MagazineさんのjQueryでリストを開閉させたいがベースです。2007年11月08日 00:19 にちゃっかりしっかりコメント残してますね。 どんな感じの時に使えるかと言いますと、ウチのブログならサイドバーに有るアーカイブ部分です。
【HTML5】新規でサイトを作るのに使えそうなの一式。Ver 1
HTML5版の新規でサイトを作るのに使えそうな一式です。 今までの新規で使えそうな一式のVer3からも有る程度流用はしていますが、結構いじってます。 今までみたいに、社内のマークアップエンジニアとかそういう人がもう居ない環境なので、何処かで使われていた訳ではありませんが、まー最初の準備って地味に面倒なのでちゃちゃっと始めるには良いんじゃないでしょうか。 【HTML5】新規でサイトを作るのに使えそうな一式。Ver 1をDL（zip：12kb） HTML5版のVer 1を見る 社内のマークアップエンジニアとかって書いたら、これどうなのよ？とか話してた頃がちょっと懐かしくなった。 コーダー飲みとか、CSS Niteなんかで、マークアップエンジニアやコーダーさんと会う機会は結構有るのに、そういう具体的な？話まではしないからなぁ・・・ それはさておき、中身のご説明などを続きにて。 中身のご説明 zi
ダッシュボードにリンクを追加｜CSS HappyLife
テーマ配布サイトの MT underHat を作るにあたり、テーマ関係を色々調べたりしてるついでに、そういえばダッシュボードっていじった事無いなーとか思ったので、やってみたらホントに簡単でなんで今までやらなかったんだろうと思った。 試しに作ったのは、ダッシュボードに任意のリンクを表示させるだけのウィジェット。 ↓こんな感じの。 地味に便利だよね。 独自のマニュアルとか作ってるときとかに管理画面にリンク有ると。 MT4の更新する人用マニュアルとか公開してた頃にやって無かった事をちと後悔、、、 こんなの作り方知ってれば5分も掛からないんだけど、一応ダウンロードは下記より出来ます。 dashMyLink 1.0 解凍すると、dashMyLinkってフォルダができます。 したら、tmpl フォルダ内の「dashmylink_widget.tmpl」をテキストエディタ辺りで開いてもらえば、HT
コピペで使えるマークアップ済みダミーテキスト
現在、フリーランスとしてやってるんですが、そっちの屋号が「underHat」に変わったので、もしリンクとかしてくれてる方が居ましたら変更してもらえると幸いです。 屋号が変更になりました｜お知らせ｜underHat さて、今回はブログ記事のダミーエントリーとかに使えそうな、マークアップ済みダミーテキストです。 何気に今まで使ってたのが有ったんですが、メインPC逝ったりしてる内にどっかに消えてしまったので作り直したのを忘れないようにブログにアップです。 一応それなりに出てきそうな要素を使ってマークアップしております。 h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, a, q, blockquote, table, td, th, pre 辺りです。 ダミーテキストだけならジェネレータとか何か色んなサービス有るんですけど、イマイチ自由に使っていいの
html5 ざっくりメモ
html5 関係無いのも有るかもですが、個人的にhtml5の要点をまとめたメモ。 ほんとにざっくり書いているので、何か期待しても何も出ません＞＜ 日本語が含まれる場合、title要素は charset の後（次）。 address要素は連絡先情報に使う。 例えば企業サイトの各支店の住所一覧とかに使うのはNG。ブログとかで、上手い店とかの住所にaddressを使うのもNG。 あくまでも、そのサイトの管理者への連絡先。なので、copyrightに使うのもNG。 copyrightはsmall要素が妥当。 なので、p small copyright って感じになる。 nav要素はあくまでも主要なナビゲーションに使う。 主要なってのは具体的にはグローバルナビゲーションやローカルナビゲーション。 なので、関連リンク一覧とか、ページ内にあるちょっとしたリンクに使うのはNG。 hgroup要素は、見出し
カスタムフィールドでアップした画像のリサイズに関して｜CSS HappyLife
コーディングコンテストが先ほど締め切りになりましたね。 ご参加した皆さま、本当にお疲れさまでした。 きっとすごい時間使ったんだろうなぁ・・・と思います。 こんなブログ書いてるくせに、ボク個人としてはCSS3の使い方とかはそんなに重視して無くて、HTMLがどんだけイケてるかが重要だと思ってます。 さて、そんな中なのにMT関係のエントリーです。 MTで画像のリサイズを色々頑張るためのやり方です。 想定している状況は、あんまリテラシーが高くない人が画像をアップしても、大変な事にならないようにアップした画像サイズに合わせて適切な画像サイズになったらいいよねって感じです。 リサイズ関係では、以下の記事やプラグインも参考になるかなと。 小粋空間: Movable Type のブログ記事に表示する画像のサイズを制御する ResizeImage - MovableTypeプラグイン 今回ボクがやろう
第2回コーディングコンテスト 開催決定。
第一回から随分時が流れましたが、第2回コーディングコンテストが開催決定しました。 今回も前回同様、予め用意されたpsdデータを使って参加者が自分のスキルとかを駆使してコーディングをしていくわけですが、第2回目は HTML5+CSS3を利用してコーディングするので現状だと個々でかなり大きな違いが出そうです。 対象ブラウザもかなり絞って、Firefox 3.6、Safari 4 のみになっているので、ホントにバリバリCSS3を使っていく感じですね。 デザインもその辺りをかなり考慮されているっぽく、CSS3を知っているか知らないかで明らかな差が出そうなデザインになっているので、1ページとは言え、前回なんかより難易度はずっと高いと思います。 今回主催はピクセルグリッドさんがやっております。 代表の中村 亨介さんをはじめ、高津戸さん、小山田さんと何だかすげーメンツが揃ってる会社です。 前回一応主催っ
IEだとMT5のフッターが動くのを何とかするメモ
IE7（6も？）で、MT5かMT5.01のエントリー画面とかブログ記事の一覧あたりで特定の動作をするとフッターが動いて、メイン部分に重なってしまう現象が有る気がするんですけど、これってボクだけでしょうか・・・ 良く分かんないけど、ちょっと困るのでそれに対しての対処方法をメモ。 どんな風に動くかと言いますと、次のような感じで動いてくれます。 これが正常な状態で、チェックボックスにチェック入れたり、プルダウンを表示したりすると・・・ こんな風に、エントリーの一覧部分に被ってしまいます。エントリー数が多いとかなり迷惑な事になってくれます。 エントリー画面でも動くようで、カスタムフィールドとかで長くしてるとフィールドに重なっちゃったりもしました。 IEのユーザーは減っているかもしれないけどまだまだ現役ですし、MTを更新する人はIEが多かったりするので、こんな風になると非常に困ります。 と言う事で、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
