Sass - CSS HappyLife
もう完全にただのお知らせや告知ブログ...！ 初版の発売から4年経ち、ありがたいことに改訂のお話を頂いたので、6月～8月辺りに森田 壮さんと執筆を行い、2017年9月15日に改訂2版が発売しました。 かなり頑張って加筆・修正などを行ったので思ってたより大変な執筆でした。 初版と改訂2版の詳しい違いに関しては、サポートサイト に載せておいたのでそちらを見て頂けるとありがたいです！ 初版と改訂2版の違い | Web制作者のためのSassの教科書 改訂2版 - 公式サポートサイト せっかく久しぶりにブログを書くので、サポートサイトには書いてないことにでも触れて行ければと。 いよいよ明日発売の「Web制作者のためのSassの教科書」ですが、今回は、8章有る中でも特に読んでもらいたい章に関して、書きたいなーと思います。 今回の執筆はわりと気合い入ってるので、宣伝エントリーが多くてすみません＞＜ ちな
実装が簡単で、フォームの使い勝手を向上させるJS 3種
Web屋の私がブックマークしているサイト65 | Webクリエイターボックス の、CSSんところにちゃっかり、CSS HappyLife ZERO が載ってて嬉しい＞＜ さて、今回はフォームです。 お問合わせフォームとか資料請求フォームとか、ウェブサイトには結構な確率で何らかのフォームが有るかと思います。 このフォームの使い勝手の良し悪しが、とても重要なのは言うまでも有りません。 でもまぁ、ビミョーなフォームが多いですよね。 本気でやり出すと、サーバーサイドに手を加えたりして云々だと大変なので、コストがかかるとかで出来ない場合も有るかも知れません。 しかし、フロントエンドで出来ることも有るので、フォームを実装する際に何事もなかったかのように極々自然と使い勝手が良くなる（だろう）機能を盛り込んだらステキですよね。きっと。 しれっとコーダーが、フォームに今回紹介する機能を実装しておけば「おー！
低コストで簡単にできる、ボクがやってるデータバックアップ方法
データのバックアップはフリーランスの場合、何かしら必ず行っていると思いますが、皆さまはどうやってバックアップを取っておられますか。 ちょうど、低コストで簡単にできるフリーランスの Web 屋の人に知ってもらいたいデータバックアップ方法いろいろ | ウェブルを読んだ時に自分のバックアップ方法でも書こうかなと思い早2ヶ月・・・。 こちらの記事は、TimeMachine を使ったバックアップとか、Windowsユーザーが読んだらちょっと(´・ω・`)な感じなので、Windowsユーザー向けと言うことで。 ボクも、見事にデータが吹っ飛んだ経験が有ります。 原因はSSDの破損で、復旧は不可能な状態でした。 勿論、仕事用のデータは最低限バックアップしていたので、最悪の事態には陥っていませんが、データの復旧や環境の再構築に時間が取られてしまい、かなり痛い思いをしました。 バックアップする以上は、外付けハ
都道府県選択するやつ。
メモ。 誰かの役にも立つかもしれないしってことで、いつも過去の案件のソースとか探してペタペタしてるけど、何処で使ったのか忘れたりするのでここに貼っておこう。 - コメントにて使用条件を書いてほしいとの事だったので念の為追記しておきます。 特別記載が無いエントリー以外は、どう使うのも自由です。 自分のブログにそのままソース掲載してもらっても、仕事で使ってもいいですし、あらゆる用途に対して自由に使ってください。 もちろん、改変・配布とかも自由です。 ただ、ウチで公開しているソースやサンプルに対して何らかの問題が生じても責任は負いません。各自の責任でご利用ください。 大体こんな感じです。 select要素でマークアップ済みの都道府県のやつ <select name="都道府県"> <option value="">都道府県をお選びください。</option> <optgroup label="北
IE8バグ？：a要素内に画像があってa要素に背景を指定した時に位置がずれる
キャプチャ見てもらうと分かるようにIE8だけ極端に位置がおかしい。 IE8がリリースされてから、まだあんまりいじってないのでよく分かってないのですが、今組んでいるサイトをIE8でチェックしたら、「あれ？表示がおかしい...」って事に遭遇してしまったので、エントリー。 よくある感じで、リストのマーカー変わりに背景の指定をa要素にして、そのリスト内には画像テキストが入ってたんです。はい。 毎度のようにサンプルも用意してみました。 サンプルを見る 発生条件は調べた感じa要素内にimg要素があって、a要素にbackgroundプロパティの指定をした時に起こる感じです。 img要素にテキストが隣接してても同様でした。 サンプルみたいなデザインの場合、マーカー部分も一緒に切ってしまう事が多いから過去の案件は大丈夫だと思うけど・・・ 取りあえず、今回のサンプルに使ったソースは以下です。 <ul> <li
フッターの背景をコンテンツが少ない時でも下まで表示させる
デジパのベトナムオフィシャルサイトがオープンしました。 さて、今回はこのデジパベトナムを組むのに辺り、最初は無理（もしくは相当厄介）だと思ってたことが思ったよりカンタンに出来たのでご紹介。 Movable Type 4のデフォルトテンプレートもそうですが、コンテンツの内容が少ない場合に、フッター部分は当然上に来てしまい、下がbodyに指定している背景色になってしまいます。 キャプチャみたいな感じです。 コレがイヤでフッターをページ下部に固定する方法とかを使う事もあるかと思いますが、アレはアレでコンテンツ部分が間延びしてしまう感じも無きにしも非ずだったりします。 と、言うか個人的には1サイトに1ページ有るか無いかも分からないような部分に労力を割きたくないのが正直なトコロなので、出来れば見逃して欲しい部分だったりします。 htmlとbody要素にheight: 100%指定して...みたいなの
JavaScriptを使わずにやるimg要素のロールオーバーサンプル
本題の前に、CSS Sprite をグローバルナビゲーションで使うのは何かが違うと思うのはボクだけかしら？（テキストをtext-indentで飛ばして、ロールオーバーさせるタイプの事を指してます） 昔作ったサンプルでそんなようなのがありました。 横並びメニューのロールオーバーをJavaScriptを使わずCSSで実現 CSS Spriteを有効に活用する場面は、あくまでも背景画像として配置されているものを一枚画像にして管理する点にあると思ってて、例えば以下のような場合。 ページタイトルの背景画像がページ毎に変わる場合に全ページのページタイトル用画像を一枚でまとめる。 アイコン＋テキストという組み合わせの場合に、アイコンを背景として使う。 その他、本来背景として使う予定だった画像を一枚にまとめる。 とかが、ぱっと浮かびました。 んで、グローバルナビゲーションに限っては、img要素で配置する事
yuga.js 0.4.2 - 優雅なWeb制作のためのJS｜CSS HappyLife
通常のロールオーバー 動作テスト サンプルのソース <p> <img src="./img/yuga/btn_more.gif" alt="more" class="btn" /> </p> 説明 img要素にclass="btn"が有る場合、src属性を「_on」付きのものに差し替える [New]グループ化されたロールオーバー 動作テスト テキスト。 サンプルのソース <p> <a href="./hoge.shtml" class="btngroup"> テキスト。<img src="./img/yuga/btn_more.gif" alt="more" class="btn" /> </a> </p> 説明 img要素の親要素にclass="btngroup"があり、img要素にclass="btn"が有る場合テキストにマウスカーソルを当てても画像がロールオーバーする。 現在のページ
この業界、この職種に対して思っていることをありのままに。
今まで、こういった事は書かなかったけど、自分の気持ちでも書いておこうと思ったので色々書きます。 無理やりな部分があったり、文書めちゃめちゃだったりするかと思いますが、ゆるーく見守って上げてください。 やけに長文駄文エントリーなんだけど、大きく分けて三つで成り立っているので、興味ある部分だけどうぞ。 イメージの悪さから、別の業界がいいんじゃ、、、って人向け？ 才能とかセンスが無いよ、、、って人向け？ マークアップエンジニアとかコーダーの未来が暗い、、、って人向け？ イメージの悪さから、別の業界がいいんじゃ、、、って人向け？ 今ってそんなに人気無い感じなんですかね。ウェブサイトを組む人って。 まぁモチベーション下がるような記事があったり、マークアップエンジニアのキャリアアップが明確に見えないとか、ウェブ業界自体が3Kだ7Kだって言われてるくらいだから、そう言った意味でも落ちてても不思議は無いん
ブロックレベル要素の高さを揃える
1日に2エントリーもするなんて、、、 [CSS]高さの異なるカラムを揃えるスタイルシート | コリスを読んでてなんだか気になったので、ちょっと自分でも試してみました。 サンプルページ ダウンロード この方法のポイントになっている部分が、#mainとかカラムの親要素にoverflow: hidden;を指定して、各カラムには、以下のようにpadding-bottomプロパティとmargin-bottomプロパティを指定してる。 padding-bottom: 32768px; margin-bottom: -32768px; padding-bottomプロパティでおもいっきり下まで下げてから、同じ値のマイナス値をmargin-bottomプロパティで指定して、overflowプロパティで切り取ってる？ 値の「32768px」ってのは、軽く調べた限りIEの限界っぽい。 ぷろぐらむ の関係なん
自分が使いやすいと思ったJSを混ぜ混ぜしてみる｜CSS HappyLife
JavaScriptいぢってるのは楽しいけど、書くことはまったく出来ないので、似たような機能を持つのが多い中でも選ぶ理由の一つが、class名が気に入るかとかhtmlがごちゃごちゃしないかとかそんな基準だったり。 んで、jQueryのプラグインの中でもjquery_autoさんがぼちぼち気に入ったけど、class名が！とか思ったので、いぢって自分用にしてみました。 そんな事してたら、他の便利なJavaScriptも足してみたくなったので、足したりしてたらこんなんなりましたっていうのを公開。 今回その実験に使わせていただいたJavaScriptたちは以下。 jquery.js interface.js thickbox.js jQuery_Auto.js yuga.js heightLine.js 上記の色々なJSたちを自分用にしたサンプル？デモ？とダウンロードは以下。 サンプルページ ダウ
ソースがシンプルなJSによるロールオーバー｜CSS HappyLife
Webは略語じゃないのに「WEB」って書く人が多いのが気になって仕方ない今日この頃。（あ、音声ブラウザを配慮したらという場合です） さて、本題に。 CSSのみでロールオーバーするテクニックは有名でございますが、ココ最近JSでいいじゃん。と思うようになってます。 ってことで、こんなサイト名ですけどJavaScriptでやるロールオーバーの方法のひとつでも。 jsファイルのご用意 何はともあれ、下記のjsファイルをご用意します。 function smartRollover() { if(document.getElementsByTagName) { var images = document.getElementsByTagName("img"); for(var i=0; i < images.length; i++) { if(images[i].getAttribute("src")
パンくずリスト（Topic Path）を作成する際に使えそうなサンプル8種｜CSS HappyLife
普通のエントリー久々な気がする今日この頃。 今回はトピックパスとかパンくずリストなんて呼ばれてる、ちょっと規模の大きいサイトでは日常茶飯事で見かけるアレのサンプル色々です。 サンプルの前に #main .entryBody #topicPath_01 とかってなってますけど、#main .entryBody はウチのサイトの都合で優先順位上げの為にやってるんで、コピったりする場合はいらない感じです。 #main .entryBody #topicPath_01 { margin:10px 0; } #main .entryBody #topicPath_01 li { display:inline; line-height:110%; list-style-type:none; } #main .entryBody #topicPath_01 li a { padding-right:10
もう、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
IEの様々なバグの真相らしきもの｜CSS HappyLife
IEには様々なバグが報告されていますよね。 もうコーダーからしたら勘弁して下さいって泣きが入りそうになるくらいに... 背景色が指定された要素内でfloatがある時、要素内の文字が消えるとか、floatに後続するmarginの値が無視されるとか、widthを指定しているとボックスの中身にfloatしている要素があっても、自動的に高さが伸びるとか。 こういったIEのバグに有効な手段として、IE6まではheight:1%を指定する事で回避したり、IE7でもwidthを指定して回避したりと色々やってると思います。 その他、IE独自拡張のzoomを使った方法なんかもあります。 今まで理由とかは分からないけど取り合えず解決するんだって事で、widthやheight、zoomを指定しておけばいいんだ。 と認識していましたが、つい先日ちょっと気になる内容をみつけましたのでご紹介。 ソレはhasLayou
DW8で生成するポップアップメニューがIE7で崩れる件を解消
DWで作成したポップアップメニューをIE7で見ると表示が崩れているという問題を簡単に解決する方法がネットのサラダボウルさんの下記エントリーで紹介されていました。 ネットのサラダボウル: DW8で生成するポップアップメニューがIE7で崩れる件を解消してみた 解決方法は簡単で、自動で出力される「mm_menu.js」というJava scriptのファイルの140行目あたりにある var itemProps = ''; という記述を var itemProps = 'white-space:nowrap;'; に修正し保存するだけです。 詳しくはネットのサラダボウルさんの下記エントリーを参照して下さい。 画像つきで丁寧に書かれておりますゆえ。 ネットのサラダボウル: DW8で生成するポップアップメニューがIE7で崩れる件を解消してみた
IE7バグ：横幅が指定値よりも広がる
WinIE7の環境下においてある特定の条件を満たしてしまうと、横幅が指定した値より大幅に大きくなり、横スクロールバーが出てしまうというバグが見つかりました。 サンプル：http://css-happylife.com/template/09/ 原因は、ある条件下でfloat:rightを指定したとき、IE7は親のボックスがサイズ指定されていても、ソレを無視して右に行ってしまうからだと思います。 さらにソコに特定の条件が重なると発生。 floatでrightを指定している リンクを貼っている a要素をdisplay:blockにしている a要素のmarginでマイナス値を指定している 上記要素が具体的にどのように絡むと発生するのかイマイチわかってないですが、右を基点とする場合があやしいと思う。 また、positionなどで、rightを基点に指定した場合にも発生するかもしれません。 とりあえ
IEバグ：img要素などの置換要素を含む行の前後では、line-heightが指定した値より小さくなる
IEバグ：img要素などの置換要素を含む行の前後では、line-heightが指定した値より小さくなる 行間を指定しているにも関わらず、imgなどの置換要素が含まれると、WinIEでline-heightで指定した値より小さくなるというバグ。 line-heightの値があまり大きくなければさして気にはならないのですが、line-height:200%など多少大きめに指定している場合だと、このデザイン崩れがやっかいです。 サンプル： 行間がIE限定で狭くなります。行間がIE限定で狭くなります。行間がIE限定で狭くなります。行間がIE限定で狭くなります。行間がIE限定で狭くなります。行間がIE限定で狭くなります。行間がIE限定で狭くなります。行間がIE限定で狭くなります。行間がIE限定で狭くなります。行間がIE限定で狭くなります。行間がIE限定で狭くなります。行間がIE限定で狭くなります。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
