tutuminoのブックマーク - はてなブックマーク

Masonryの使い方：サイズの異なるBOXをタイル状に整列 [ホームページ作成] All About

Masonryの使い方：サイズの異なるBOXをタイル状に整列大きさの異なる複数のブロックを、うまい具合に隙間無くタイル状(レンガ状)に自動整列してくれる「Masonry」の使い方を解説。横幅や高さの異なるボックスがいくつあっても、できるだけ無駄な隙間ができないように詰めて配置してくれます。当初の「jQuery Masonry」とは違ってjQueryなしで動作可能になり、CDN経由で読み込めるようにもなって手軽になりました。

tutumino 2014/03/25

jquery

リンク

CSSで色を直接書かず、変化量で相対的に指定する方法 [ホームページ作成] All About

CSSで色を指定するときには、「#ccffcc」や「blue」などのように、望みの色を直接記述するしかありません。しかし、配色を考えるときには、「親ボックスよりも少し明るい色の子ボックス」のように、相対的に色を指定したいこともあるでしょう。 CSSでは、親ボックスの色も、子ボックスの色も、個別に色を直接記述することでしか指定できません。例えば「#ccffcc」よりも少し暗くしたいなら「#aaccaa」、「#cc0000」よりも少し明るくしたいなら「#ff3333」のようにです。この状態で配色を変更したいと思ったとき、親ボックスの色を変更すると、当然、子ボックスの色もすべて手動で修正しなければなりません。

tutumino 2014/02/09

lighten darken など

less

リンク

1文字ずつ文字色を変える、文字単位でのCSS適用方法 [ホームページ作成] All About

1文字ずつ文字色を変える、文字単位でのCSS適用方法HTMLに書いた文字をCSSで装飾する際に、1文字ずつ異なる文字色で表示されるよう指定する方法を解説。HTMLの特定の要素内に書かれた文字列を、JavaScript（jQuery）を使って文字単位に分解して個別の要素でマークアップすれば、CSSのnth-child疑似クラスなどを使うことで1文字ずつ個別のスタイルを適用できます。1文字ずつ異なる色でカラフルに表示したい場合に便利。文字単位で異なるCSSを適用し、1文字ずつ色やスタイルを変える方法 HTMLに書いた文字の色をCSS（スタイルシート）で指定する際には、ある要素に含まれる文字全体の色を一括指定するのではなく、1文字ずつが異なる文字色で表示されるように指定できると便利な場合があります。例えば下図のようにです。もしこのような文字単位での装飾が指定できれば、見出しをカラフルに装飾した

tutumino 2014/01/29

css

リンク

Basic認証(基本認証)でアクセス制限をかける方法 [ホームページ作成] All About

限定した人々にのみ公開したい会員制ホームページを作りたい場合や、メンバー間だけで共有するファイルを置きたい場合など、ウェブサイト内の特定の領域にアクセス制限を設定したいことがあります。アクセス制限方法は多数ありますが、ユーザー名(ID)とパスワードを使うユーザー認証機能による閲覧制限方法が簡単です。そこで本記事では、「.htaccess」という設定ファイルなどを作成して、Basic認証(基本認証)と呼ばれる認証機能をウェブサイト内に設置する方法をご紹介いたします。アクセス制限を設定する対象のHTMLは一切修正不要です。認証の設定を書いた.htaccessファイルや、IDとパスワードを指定の書式で列挙した.htpasswdファイルを対象ディレクトリに置くだけの簡単な準備で、ログイン画面が出る秘密の会員制ホームページが作れます。【目次】 Basic認証(基本認証)とは Basic認証(基