はてなブックマーク

マウスオーバーのやり方には、色んな方法があります。 CSSを使うにしても「CSSスプライト」を使ったり、JavaScriptでも「jQuery」を使ってみたりと言ってしまえば、コーディングする人のセンスや能力で、色んなコーディングの仕方があって多種多様な方法があります。 今回は、マウスオーバーの基礎と言っても過言ではない！？ CSSの擬似クラス(:hover)を使ったマウスオーバーをメモっていきたいと思います。 普通のテキストのマウスオーバー あまり普通のテキストに、マウスオーバーを設定をすることはありません。 段階を踏むという意味での紹介です。 HTML <p class="demo1">マウスを持ってくると文字が赤くなるよ。</p> CSS .demo1:hover{ color: #ff0000; } これが、基本の形という感じです。 .demo1:hoverという感じで、セレクタの

ゴーストボタンは、2014年のWebデザインのトレンドにあげられている1つです。 ちょっと色気を出して、トレンドなんてモノを語ってみようと思います。 今回は、そのゴーストボタンの特徴を含め、HTMLやCSSのコーディングをメモっていきます。 ゴーストボタンとは？ トレンド？ゴーストボタン？と聞くと敷居が高いように感じますが、実際は、なんてことはありません。 罫線で囲んだ、ただのボタンです！ ただし、完全なルールではありませんが、以下にあげる特徴を含んでいるボタンのことを言います。 ・シンプルなカラーリング ・ボタン背景は、透明もしくは薄い半透明 ・シンプルなテキスト、または、シンプルなアイコンとシンプルなテキストで構成 ・細めの罫線で囲む ・大きいめのボタン ・太めのフォント ・画面中央など、目立つ場所に配置 ・画像や動画を背景とする場所に使われる 一見、シンプルで作るのは簡単なのですが、

Image by:Design Inspiration サイトやブログの運営を長くやっていると、オリジナルのデザインに挑戦してみたくなったり、ちょっとだけカスタマイズしたくなったりと、興味が湧いてきませんか？ ちょっとしたデザインやCSSを変更したいときに、サイトのレイアウト構成を理解していないと、せっかく調べた装飾系コーディングも、どこに記述していいのか分かりませんよね。 今回は、レイアウトの理解のはじめの一歩として、基礎の基礎という感じになりますが、サイトのレイアウトを支える土台部分をメモっていきたいと思います。 デモについて（HTMLとCSSの注意点） HTMLのデモと説明のコーディングは、ほぼ同じになります。 強いて言えば、各セクションの中身の表記が違うだけです。 CSSの説明は、本当に必要な部分だけ説明しています。 説明を省略している部分やデモと違いのある部分は、装飾系のコーディ

Image by:theQ camera HTML5ではvideoタグを使って動画を貼り付けることができます。 これまでWebサイトで動画を貼り付ける場合には、FlashやQuickTimeなどを使うのが一般的でした。 「theQ camera」は、videoタグを使っています。 videoタグを使えれば、よりリッチなWebサイト作りが出来て、面白そうだなぁ～っと思って、いろいろ調べてみました。 なかなか苦戦したので、概要をメモしておきます。 メイン動画の容量は重要！ 最初にメインとなる動画を準備します。 当たり前のことですが、これがないと始まりませんね。 動画の容量調整は難しいところです。 容量が大きいと、表示が重たくなって表示される前に離脱されてしまう可能性が高くなりますし、かといって、容量を小さくし過ぎると画質が粗くなって、見栄えが悪くなったりしてしまいます。 そうならないためにも、

CSSのデフォルトでは、左寄せや左揃えが設定されていますが、Webサイトをデザインしていくうえでは、やっぱり右寄せや中央寄せをしたいときが出てきますよね。 過去に中央寄せシリーズとして ・CSSでdivでもulタグでも2つ以上のブロック要素を並べて中央寄せにしてみた ・2つ、3つ以上のテーブルを並べて中央に寄せるHTML＆CSSコンビネーション という記事を書きました。 が、初心忘るべからずとして、もう一度、振り返りメモをしてみようかと思います。 デモについて（HTMLとCSSの注意点） HTMLは、共通で、このコーディングを使っています。 <div class="demo1">右寄せ</div> <div class="demo2">中央寄せ</div> <div class="demo3">左寄せ</div> また各デモでは、分かりやすいように線など装飾系のコーディングを書いています。

いざ、ファイルを立ち上げようとしたら、立ち上がらないんです。 確認するとハードディスク内に、ドライブ内に、フォルダ内に、ファイルがありません。。。120GB近くのファイルがごっそりと。。。 これは、ハードディスクがお逝きになられたなぁ～っと、フォーマットかなぁ～、なんて涙目になりながら、微かな光を求めて彷徨ったまとめメモになります。 その前に一言。 パソコンのシステム的な設定をいじるところもあるので、自己責任でお願いします。 でもお金をかけたくない、ファイルを戻したい・・・最悪フォーマットだ！と思っている人なら、乗り越えられると思います！！ そのデータ諦める前に。 以下の条件が当てはまる人には、お役に立てるのではないかと思います。 ・パソコンはちゃんと起動できる ・OSはWindowsだ（Windows8.1でやりましたが、Windows7でも大丈夫かも。） ・突然、ファイルが見えなくなっ

文字に色を付けたり、大きくしたり、飾りをつけたりして、抑揚やアクセントをつけると読みやすくなりますよね！ 私は、長文が苦手な方です。 苦手なだけに、私と同じような気持ちの人に、ストレスなく読んでもらえるように、日々コソコソと考えています。 ということで、今回は、アクセント代わりに蛍光ペンで線を引いたような効果を中心に文字周りで使えそうなコードをメモっていきたいと思います。