タグ

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

  • 【Sassを覚えよう!Vol.9】変数と演算で効率的に

    ちゃっかりデザインを変更しました。 デザイン以外にも、メインエリアの横幅が変わったりしてます。 かなり突貫工事なので、色々アレな部分があるかと思いますが、、、 さて、Vol.4のSassの基的な記述方法で書いた「変数」と「演算」に関して、もうちょい突っ込んだ部分を書いていこうかと思っちょります。 変数と演算のおさらい 軽くおさらいです。 次のように、変数は予め任意の名前で定義しておくことで任意の場所で呼び出すことが出来て、演算は足したり引いたり掛けたり割ったり出来ます。

    【Sassを覚えよう!Vol.9】変数と演算で効率的に
  • フリーランスになってから知った事アレコレ。

    このブログの主題が何なのか忘れかけているhirasawaです。どうも。 して今回は、フリーランスになった際に、ボクみたいになーなーでスタートした人や、色々調べたりしないでとにかくやってみよう!でスタートした人なんかは、後から色々知ることが多く、もっと早くに知ってたら良かったかもね!って事を書いてみようかなと。 フリーランスになる人って、制作上がりが多いから、お金周りの事が弱いと思うので、内容としては主にお金周りの事でも触れていくです。 ボクも法律に特別詳しいとかじゃないので、間違ってる部分有ればご指摘頂けると助かります。 厚生年金分の年金がもらえない 最近は払ってる人が少ないかも知れませんが、国民年金は普通に払ってると思います。 会社員時代だと、それに加えて厚生年金も給与から天引されて払ってる形になるわけですが、フリーランスになると、厚生年金は払うことが出来ないので、国民年金だけになってし

    フリーランスになってから知った事アレコレ。
  • clearfixを使わないでやるには。

    2008年11月11日お昼頃 overflow部分を一部加筆しました。 ウチのとあるページのコメント数が28になって、何となく嬉しい今日この頃。 さて、今回はこんなタイトルですけど、こんなエントリーをしようと思ったのは、floatを指定した要素の親要素の高さが算出されない時の解決手段として、clearfixでぐぐれみたいなのをよく見かけたり、あまりにもclearfixが有名だから、最近CSS覚えた人とかは、もしかしたら知らないのかなぁ~なんて思ったのです。 なので、一応基に戻ってみましょうということで。 最近、「CSS Nite ビギナーズ」とかもやってますしね。 あ、clearfixを知らない方は、clearfix|CSS HappyLife辺りか適当にぐぐってくださいませ。 何か、久々に書いてる気がして、どうやって書いてたか思い出せない... えっと、そもそもどんな状況の時かっていう

    clearfixを使わないでやるには。
    aoiasaba
    aoiasaba 2009/01/06
    大枠の高さが算出されない件
  • よくある質問っぽいののjQueryを使ったサンプル|CSS HappyLife

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

    よくある質問っぽいののjQueryを使ったサンプル|CSS HappyLife
    aoiasaba
    aoiasaba 2008/10/15
    超!シンプルJSでアコーディオン
  • もう、そんなミスに陥らないんだからっ!!

    どーも。最近密かに主婦に人気が有るんじゃないか?と思い始めているhirasawaです。 遊び心がある方、コレから「主婦CSS」とかって付けて下さい。えぇ。 主婦に優しいブログ運営を頑張りたいと思っておりますので。 【超CSS】STOPN' LISTENですに対抗したいとか、そんな大人気ない事思ってないデスヨ? で、題ですがCSSレイアウトが崩れている時に試す10の処方箋::::::STOPN' LISTEN::::::to the silence:::::::の影響もあるんですが、会社関係の人に同様の事を言われた事が有り、いつか書こう書こうと思ってました。 でも、同じじゃアレなんで、ボクが良くやる(やった)初歩的なミス絡みで書いてみようと思います。 1.何か、コレだけスタイルが適用されないんすが… ボクの場合、取りあえず !importantでそもそも効いているのかチェック。 もしくは、

    もう、そんなミスに陥らないんだからっ!!
    aoiasaba
    aoiasaba 2008/10/15
  • 今よりちょっとだけクオリティを上げるために。

    執筆が終わったと思えば、主業務が激務でネタがちらほら浮かんでたのに書けない今日この頃。 でも、どこぞのiPhoneネタと宣伝ばかりになってしまったブログよりいいかも知れません。えぇ。 さて、CSSってある程度覚えてしまえば思った以上に簡単に組めたりして、何となく組めている気がするって思ったりしないっすかね。 もしくは、その逆になーんかイマイチ成長してないようなって感じてる時とか。 そんな状況のときに、今よりちょっとだけコーディングのクオリティや効率を上げるのに意識する事とかやっておくべきこととかを思いつくままに上げてみます。 仕事としてってのがベースなので、個人サイトやブログレベルだと当てはまらないかも。 ボクが昔はやってなかったけど今は当たり前な事とか、今でも忘れがちな事とか、何かそういう感じのことを書いていくので、人によっては当たり前だし、ちょっとした発見がある人も居るかも? よく分か

    今よりちょっとだけクオリティを上げるために。
  • IE6のfloatしたボックスのmarginの値が2倍になるバグ対策の件

    IE6で、floatで指定した値と同じ方向にmarginの指定をすると、指定値の倍程度になってしまうっていう有名なバグ。 その対策として、marginの代わりにpaddingを使うとか、親要素でpaddingを取るとかあったりしますけど、一番手っ取り早い感じで、問題が無さそうなdisplay: inline;を指定する方法がありますよね。えぇ。 何となく他のブラウザに影響ないの!?って思ってしまうかもですが、 こういう矛盾しちゃいそうな指定がされた時はどーしたらええの?っていうのがちゃんと仕様で決まってるので仕様通りに動いてくれるブラウザさんなら問題ないわけです。 そうなんですよ。仕様通りにね、動いてくれるブラウザさんならね。 仕様通りに... そこで登場するのが、IE7。 IE6に比べればだいぶ良くなったもののやっぱり色々問題があるIE7。 そんなIE7さん、こんなトコロにも影響があった

    IE6のfloatしたボックスのmarginの値が2倍になるバグ対策の件
  • CSS HappyLife

    もう放置して長い当ブログ...なので、Adsenseの自動広告ってのを試してみようかと思ってONにしたら、すごいことになった! これは中々に酷いですね。 とまぁそれはさておき、すごい久しぶりに個人の趣味っぽい感じのサイト作りました。 - 探そう!好きな恐竜 なんで恐竜!?って感じしますね。 正直、恐竜には全然興味なかった側の人間です。 もう完全にただのお知らせや告知ブログ...! 初版の発売から4年経ち、ありがたいことに改訂のお話を頂いたので、6月~8月辺りに森田 壮さんと執筆を行い、2017年9月15日に改訂2版が発売しました。 かなり頑張って加筆・修正などを行ったので思ってたより大変な執筆でした。 初版と改訂2版の詳しい違いに関しては、サポートサイト に載せておいたのでそちらを見て頂けるとありがたいです! 初版と改訂2版の違い | Web制作者のためのSassの教科書 改訂2版 - 公

    aoiasaba
    aoiasaba 2008/07/02
    結構いけてます!hack,bugなど
  • clearfixハック|CSS HappyLife

    通常、floatさせている画像やボックスなどがある場合何らかの形でclearするか、その親要素にfloatを指定しないと、親要素からはみ出してしまいます。 コレはCSS2.0の仕様なんで正しい表示なんですが、どうしても親要素にfloatなどが使えず、やむなくclear:bothをbrなりdivにクラス指定して解決してたりって事があったかと思います。 IEの場合はwidth、もしくはheightを指定する事で解決できますが、コレはバグなんで他のモダンブラウザでは解決できません。 ソコでかなり便利に使えるテクニックが、clearfix。 使い方は、clearしたい親要素に下記のように記述。 div:after { content: "."; display: block; visibility: hidden; height: 0.1px; font-size: 0.1em; line-hei

    clearfixハック|CSS HappyLife
  • 1