はてなブックマーク

この記事でできるようになること ヘッダー、フッターなどの共通部分のHTMLを別ファイルとして管理 切り出したHTMLファイルをjQueryで動的に読み込む PHPなしで制作するWEBページは管理が煩雑になりがち HTMLでホームページを構築する際に気をつけたいのが作ったあとのメンテナンス。何にも考えずにガシガシ書いてるとあとあと更新するのが大変なんです。 例えばヘッダーについてるグローバルメニューをカスタムした時には、グローバルメニューが入ってるページ全てを更新しなければならず大変な手間。 ヘッダー部分だけ全ページ共通で読み込ませることができれば楽だと思いませんか？ インラインフレームはレスポンシブデザインで使いづらい インラインフレームで読み込む方法も良いかもしれませんが、今回の案件ではレスポンシブデザインということでフレーム読み込みは断念。高さの自動調整を実装するのも面倒ですし。 デー

今週セールページを用意するときにタイムセールの枠を作ることになったのですが、カウントダウンタイマーを自動で表示して終わったら非表示にできないかとscriptを探していたらこんなものを見つけました。 http://qiita.com/dribble13/items/3eb39726aba33add6c0aqiita.com これがすごく便利！ このscriptでできること 指定した日時になったら要素を表示する 指定した日時になったら要素を非表示にする 指定した期間だけ要素を表示する このscriptの利点 jQueryなので記述が簡単に済む 日時指定が要素のタグ内に記述できるので管理が簡単 導入方法 1.jQueryライブラリを読み込む <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquer

今日のお題は「きっちり」三等分できる書き方。 どんな書き方を想像しましたか？ この書き方を知るまで僕は .col3 li { width : 33.33333% ; } のような書き方をしていました。 実際にこの書き方をしているウェブサイトもよく見かけます。 が、性格の問題もあるかもしれませんが割り切れない 余り があるのがちょっと許せない。 width: 1/3; みたいな書き方ができたらいいのになー　って思ってました。 で、探してみたところ発見！ 1/3サイズを指定する方法があったんです！ 感動(´ｪ`) CSSで計算式を可能にするcalc 対応ブラウザ：IE9以降、Safari6以降、Google Chrome19以降、Firefox4以降 使い方： .col3 li { width : calc(100% / 3) ; } これだけ！ 簡単ですね。全体の幅100%の3分の1サイズと