タグ

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

  • 【Sass】新規でサイトを作るのに使えそうなの一式。Ver 1

    シリーズっぽくやってたSassを覚えようですが、今回は今までご紹介したSassに関する知識が有れば、直ぐにでも使えそうな一式をご用意しました。 まぁ、HTMLとかは過去の新規でサイトを作るのに使えそうなの一式。とそんなに変わってないので、SCSSファイルだけ有れば良いと思いますがHTMLとかあった方が確認もそのまま出来るので良いかなーと。 【Sass】新規でサイトを作るのに使えそうなの一式。Ver 1をDL(zip:約50kb) 実際のページを見る ページを見ても、あんまり意味が無いっすね。えぇ。 いつもの新規セットに比べると、ボク自身がSassはまだ全然使いこなせて無いですし、開発中と言うかベータな感じが否めないので、コレをベースにSassを色々試したりするのに良いかなと思います。 なので、一つの参考までにって感じでしょうか。 んでは、続きにて中身の説明なんぞをしていきます。 中身のご説

    【Sass】新規でサイトを作るのに使えそうなの一式。Ver 1
    shinagaki
    shinagaki 2012/07/10
  • ルートパスで書かれたhtmlファイルをローカルで確認するには。

    8月は働くよー!お盆休みってなぁに?おいしーの? ボーナスってなぁに?それっておいしーの? さて、Webサイトを作成するときに、ルートパス(絶対パスとまとめられる事もありますが)で記載されてたり、SSIによるインクルードをしてたり、デフォルトインデックスのファイル名(index.htmlとか)を省略してたりすると、そのままローカルで確認するには不便があったり、場合によってはそもそも確認できない訳です。 そういう場合に、じゃあどうやって確認するか。となる訳ですが、毎回テストサーバとかにアップロードして確認していたら効率が悪いので、自分のPCWindowsとして)で確認できたら嬉しいですよね! じゃあ、どうしたら良いかって言うと、やっぱりWebサーバをローカルで構築するのが一番良いのかなと。 そうすると、自分のPCでちゃんと見れちゃう訳です。ンマーなんて素敵! で、Webサーバって聞くと、サ

    ルートパスで書かれたhtmlファイルをローカルで確認するには。
    shinagaki
    shinagaki 2010/08/01
  • コーディング前に確認しておきたいこと。 - CSS HappyLife

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

    コーディング前に確認しておきたいこと。 - CSS HappyLife
    shinagaki
    shinagaki 2010/07/20
  • フリーランスになって一年が過ぎました

    人もすっかり忘れていましたが、フリーランスになってから一年が経ちました。 フリーランスになるみたいです。 何だかんだと、気付けば一年。取りあえず生きています。 や、むしろ金欠で今月がかなりヤバい・・・うぅ。(余裕を持って計画的にって事ですね。はい。 それはさておき、基コーディングのみでやってこれたのも、ホント人との繋がりがあってナンボでした。 ありがとうございます。 あ、デザインもやったりしましたよ? 直近では「無料写真素材 輪」をデザイン(ロゴ以外)からやらせてもらったり! 個人の方からの依頼は初めてで、HTML5 + CSS3 使ったりと好きにやらせてもらえたので嬉しかったです。 実績掲載も問題無いみたいなのでこうやってブログにも書ける訳ですね。 ホント、ありがとうございます。 この一年、ざっくりと振り返ったりしてみようかな。 えーっと、フリーになった宣言したその日にいきなりお仕事

    フリーランスになって一年が過ぎました
    shinagaki
    shinagaki 2010/07/01
  • もう、class名やid名で悩まないんだからっ!!|CSS HappyLife

    class名やid名って付ける時悩みませんか? 今でもボクは結構悩むんですが、そんな悩みを解決する為に、人さまのソース覗きまくってよくあるclass名とid名を拾ってきました。 これで、チョットだけ作業効率アップ!? 2010年6月10日追記: この記事自体、2007年 1月15日に書かれてるんでかなり古いです。 あくまでも参考程度に留めてもらうのが良いかと思います。 今だったら、html5の要素を参考にしたりして付けるのが、今後の事を考えると良いのかなーと思います。 また、善し悪しの判断はせずに公開しているものですが、位置に関するのは仕様変更に弱くなるのでオススメはしません。 全体に使えそうな感じ wrap wrapper top-wrapper wrapperAll frame mframe all-frame container page pagetop all allContent

    もう、class名やid名で悩まないんだからっ!!|CSS HappyLife
    shinagaki
    shinagaki 2010/06/10
  • 【HTML5】新規でサイトを作るのに使えそうなの一式。Ver 1

    HTML5版の新規でサイトを作るのに使えそうな一式です。 今までの新規で使えそうな一式のVer3からも有る程度流用はしていますが、結構いじってます。 今までみたいに、社内のマークアップエンジニアとかそういう人がもう居ない環境なので、何処かで使われていた訳ではありませんが、まー最初の準備って地味に面倒なのでちゃちゃっと始めるには良いんじゃないでしょうか。 【HTML5】新規でサイトを作るのに使えそうな一式。Ver 1をDL(zip:12kb) HTML5版のVer 1を見る 社内のマークアップエンジニアとかって書いたら、これどうなのよ?とか話してた頃がちょっと懐かしくなった。 コーダー飲みとか、CSS Niteなんかで、マークアップエンジニアやコーダーさんと会う機会は結構有るのに、そういう具体的な?話まではしないからなぁ・・・ それはさておき、中身のご説明などを続きにて。 中身のご説明 zi

    【HTML5】新規でサイトを作るのに使えそうなの一式。Ver 1
    shinagaki
    shinagaki 2010/06/09
  • コピペで使えるマークアップ済みダミーテキスト

    現在、フリーランスとしてやってるんですが、そっちの屋号が「underHat」に変わったので、もしリンクとかしてくれてる方が居ましたら変更してもらえると幸いです。 屋号が変更になりました|お知らせ|underHat さて、今回はブログ記事のダミーエントリーとかに使えそうな、マークアップ済みダミーテキストです。 何気に今まで使ってたのが有ったんですが、メインPC逝ったりしてる内にどっかに消えてしまったので作り直したのを忘れないようにブログにアップです。 一応それなりに出てきそうな要素を使ってマークアップしております。 h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, a, q, blockquote, table, td, th, pre 辺りです。 ダミーテキストだけならジェネレータとか何か色んなサービス有るんですけど、イマイチ自由に使っていいの

    コピペで使えるマークアップ済みダミーテキスト
    shinagaki
    shinagaki 2010/05/07
  • Xperiaを買ったのでアプリを色々入れてみたっ

    Xperiaを買おうかどーしようか結構悩んでいたのですが、途中から物欲に負けて発売日に買ってしまったhirasawaです。 今まで、スマートフォンやiPhoneを使った事が無いので、Xperiaでスマートフォンデビューした人の一人です。 とは言え、Androidケータイ自体はHT-03Aをちょっとだけいじってたりしたので特に戸惑う事無く使い始める事が出来ました。 今回購入した動機は、Androidケータイに元々興味が有りましたし、iPhoneもいらない!とか思いつつも内心欲しかったりしたのも有りますね。 べ、べべべ別に、ソニエリを待ってたわけじゃ無いんだからっ!! >< ・・・はい。 えっと、個人的に「docomoでソニエリのAndroidケータイ」が欲しかったので、不満が有っても有る程度は飲み込むことができますが、メーカーとかキャリアに関係なく「Androidケータイ」が欲しいのなら、現

    Xperiaを買ったのでアプリを色々入れてみたっ
    shinagaki
    shinagaki 2010/04/03
  • とっても使えるoverflowプロパティ。その使い方色々。

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

    とっても使えるoverflowプロパティ。その使い方色々。
    shinagaki
    shinagaki 2010/01/03
  • よくある質問っぽいののjQueryを使ったサンプル|CSS HappyLife

    2007年12月6日追記 IE6で選択中のタブの上が切れていたのを修正しました。 具体的にはcss/style.cssの35行目にfloat: left;を追加しております。 いろんなサイトで見かける「よくある質問」。 一番多いパターンは、リストで質問があって、アンカーで回答に飛ばす方法だと思うです。 特別ソレがいけてないとかは思わないんですが、飛んだ後に「戻るボタン」で戻らない人とかは、毎回ページトップ押したり、スクロールして戻ったりと案外手間だったりするわけです。 それならそういった手間が掛かるかも知れないことを少しでも省けないかしら?って事で、jQueryを使ってタブ型で折りたたまれたよくある質問っぽいサンプルを作ってみました。 (単純にボクがこのスタイルが一番見やすくて好きってだけだったり) サンプルページ サンプルダウンロード(Zip:20KB) メインのCSSファイル (サンプ

    よくある質問っぽいののjQueryを使ったサンプル|CSS HappyLife
    shinagaki
    shinagaki 2007/12/05
  • 1