タグ

ブックマーク / css-happylife.com (10)

  • 【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 を購入してしまいました! で、手に入れたからには仕事以外でも何か作りたいっ

    【Retinaディスプレイ対応】Smart Phone テンプレート for MT おまけも付いてくるよ。
  • HTML5で組まれたブログのベースに使えそうな一式

    MT underHatにヒッソリとMovable Type 5 のテーマを追加しました。 MT underHat テーマ 002 - カンバス | MT underHat 今回追加したテーマもHTML5使ってるんですが、HTML5のマークアップで一番悩みそうなアウトライン関係は敢えてあまり使わずに、分かりやすい部分だけ新要素を使ったりした感じでマークアップしています。 何と言うか、StrictっぽいHTML5 じゃなく Transitional みたいな感じって言えばイメージが伝わるかな。 入門用というか。 実際、ガッツリきっちりやっても、今後どうなるか分かりませんし、今は取りあえず触れてみるとかで良い気がしてます。 なので、触れやすい感じを目指してみました。 で、このテーマは、CSSとかガッツリいじって使ってもらうのを前提にしてる部分があるので、オリジナルを作りやすいようにローカルで確認

    HTML5で組まれたブログのベースに使えそうな一式
  • コーディング前に確認しておきたいこと。 - CSS HappyLife

    CSS HappyLife ZERO が移転したのでお手数ですが、消えちゃう前にブックマーク等変更してもらえるととても嬉しいです。 制作会社でコーディングする場合、社内のガイドライン的なのが有ったりデザイナーもある程度固定されてると思うので、毎回似たような事を確認したりとか、このデザインはどういう意図なんだろう?ってのも、何度か同じ人とやってれば見えてくる訳ですが、フリーランスの場合だとデザイナーは毎回違っていたり、当然ディレクションをする人も違うので最初に確認しておきたい事が有ったりします。 って事で、その辺りをまとめてみたり、デザインを渡されたときにこのデザインの意図は?って思う事とかもばーっと書いてみます。はい。 なので、デザイナーさんもコーダーにデザインを渡すときに気をつけて欲しい点とかもわかってしまうすばらしい内容(だと良いな)! じゃあまずは最初に確認しておきたい基的なことか

    コーディング前に確認しておきたいこと。 - CSS HappyLife
    hvc-001
    hvc-001 2010/07/24
    ルールのはなし。
  • ダッシュボードにリンクを追加|CSS HappyLife

    テーマ配布サイトの MT underHat を作るにあたり、テーマ関係を色々調べたりしてるついでに、そういえばダッシュボードっていじった事無いなーとか思ったので、やってみたらホントに簡単でなんで今までやらなかったんだろうと思った。 試しに作ったのは、ダッシュボードに任意のリンクを表示させるだけのウィジェット。 ↓こんな感じの。 地味に便利だよね。 独自のマニュアルとか作ってるときとかに管理画面にリンク有ると。 MT4の更新する人用マニュアルとか公開してた頃にやって無かった事をちと後悔、、、 こんなの作り方知ってれば5分も掛からないんだけど、一応ダウンロードは下記より出来ます。 dashMyLink 1.0 解凍すると、dashMyLinkってフォルダができます。 したら、tmpl フォルダ内の「dashmylink_widget.tmpl」をテキストエディタ辺りで開いてもらえば、HT

  • しましまプラグイン無しでしましまする。

    今週末の金曜日にCSS Nite shuffleが行われるんで、ボクも行ってきます~。有料で4,000円掛かってしまいますが、ご興味ある方ぜひいきませぅ CSS Nite shuffle あとその翌日に、SwapSkills for Happy web weekendが2日間行われます。 神崎さんが居るので、すごーく行きたいのですが、土日が忙しい... どちらもとても有意義なイベントだと思いますので、ご興味ある方はぜひ!! 少々前置きが長くなってしまいましたが、使いたい時にいつも忘れるのでメモ。 MT4辺りから変数を使う事で、しましまプラグインやJavaScriptを使わなくても交互に色分けが出来るようになりました。 月別のリストに出すとしたらこんな感じ↓ <MTArchiveList archive_type="Monthly"> <MTArchiveListHeader><ul></M

    しましまプラグイン無しでしましまする。
    hvc-001
    hvc-001 2010/03/19
    しましま!
  • 各プロパティの値を初期値にする、initial_value.css

    前回のエントリー「とっても使えるoverflowプロパティ。その使い方色々。」の補足で、Dreamweaver使ってコーディングする場合、デザインビューを使ってるとその部分が選択できない問題が有ったと思います。(確認しているのはVer8) 一時的に、宣言を取れば普通に選択できます。 さて、ちょっと必要になったんで、各プロパティを初期値にするCSSを書いておきました。 使いどころとしては、ごちゃごちゃ複雑になってきたCSSが何か当たってて変だったりする時や、取り合えず初期値に戻してみたい時ですね。 他に、ブログサービスとか使ってると、良く分かんない場合が有るのでそんな時にも活用できるかもしれません。 ダウンロードしたい方は以下よりお願いします。 initial_value.css DLするのとほぼ同じのを貼り付けておきます。 selectorsName { background-attach

    各プロパティの値を初期値にする、initial_value.css
    hvc-001
    hvc-001 2009/11/26
  • ページ送りのサンプル4種+2

    ず、随分間が空いてしまった・・・何て言う現実。 気付けば冬間近ですね。 久々の更新が、特別目新しくもなんともないんですが、自分なりのページ送りサンプルを作ってみました。 ホントは最初のだけ有れば事足りてるんですけど、ボリューム感を出す為に4種類+2にしてみました。 サンプルサイトを見る サンプルをダウンロード 地味にサンプル作ってたら時間取られたので、解説は軽めですが続きにて。 今回作っておきたかったのは、センタリングさせたページ送りっす。 とても似たようなエントリーが有るので、下記も参考にしてみるといいかと。 ページ送りナビゲーションには display:inline-block が超便利 | バシャログ。 不特定の数の横に並ぶブロック要素をセンタリングさせる | CSS-EBLOG 各サンプル共通で以下のスタイルが当たってます。 #main ul, #main ul li { marg

    ページ送りのサンプル4種+2
  • とっても使えるoverflowプロパティ。その使い方色々。

    光の4戦士を買ったんすが、売り文句通りレトロな感じがしていいですね。 まぁまだ2, 3時間程度しかやってないんで、これからどうなるか分かりませんが時間を見つけてやって行こうかと。 さて、以前からoverflowプロパティは使い勝手が良いというか、使う場面が多いプロパティの一つですが、考えてみると色んな事に使ってるなぁ~と思ったので自分が良く使うのをまとめてみました。 あんまoverflowプロパティを使った事が無い方は、ビックリですよ! これで、ソコの可愛いアナタもoverflowプロパティの虜になる事間違い無し!!(わかんないけど サンプルとかは以下よりどうぞ。 サンプルサイトを見る サンプルをダウンロード 基的に、全てoverflow: hidden; の指定を足す事で解決したり実現出来る感じです。 01 clearfixみたいに使う まずは以前の「clearfixを使わないでやるに

    とっても使えるoverflowプロパティ。その使い方色々。
    hvc-001
    hvc-001 2009/11/03
  • IEが有るから助かってるって思えるかもしれないお話

    何かしらのサイトを組んでいる時って誰でも一度は思うんだろうけど、 「IEなんて・・・(自重」、「IEさえ・・・(自重」、「ちょ、IEおま・・・(自重」 とか、思うっすよね。 ボクも勿論その中の一人で、特にIE6に関しては常に思ったりしています。 IEのために今までどれだけの時間を費やしたか・・・と思えるほどに。 そんなIEさんですが、今日は逆にIEが有るから助かってるかもって思えるお話です。 ぇーまぁそんな訳で、明日からIEが一切なくなったとして。 「3番目のグローバルナビだけちょっと指定変えてもらえる?」 と、言われて、 『class追加するのやだなぁ』 ってのが、 「リンク先変わらないんだから属性セレクタ使えばいけるっしょ」 って言われてしまったり。 「そこの最初のh3だけmargin-topは0で、他のh3は30pxでお願い」 と、言われて、 『最初のh3だけclass追加しないとい

    IEが有るから助かってるって思えるかもしれないお話
    hvc-001
    hvc-001 2009/07/26
    IEが無くなると気軽に使えるプロパティ・擬似クラスが増えるねってお話。(しかし自分もIE6には利用者としてとてもお世話になったことを忘れてはいないよ。)
  • フッターとかの区切り『|』のサンプル1種

    ふと、昔のサンプルを見て、今そんな組み方しないよ。とか思ってしまったので、最近もっぱらコレっていうのを書き書き。 コレに限らず、昔のエントリーを見てると、自分で無いな~使えねー!って突っ込みたくなるエントリーが多いっす・・・うぅ。 念じたら全部最近の書き方になおらないかな。 ・・・ 残念ながらなおらないと思うので、昔のエントリーを見る場合は、ちょっと気を付けたって下さい。 何気に大掛かりな計画は有るけれど、計画がでか過ぎて中々どうにもこうにも。 というかブログ書いてる暇有るなら、「お前アレやれよアレ。」ってお怒りの声が聞こえてきそうなので、アレに専念する為にまた大人しくしてるっぽいです。 最近フッターで区切りが有る場合は、:first-child疑似クラスを使って対応するケースが殆どです。 実際のサンプルも用意しました。 サンプルサイトを見る XHTMLはこんな感じ。 <div id="f

    フッターとかの区切り『|』のサンプル1種
  • 1