リンクボタンの色を切り替わるようにする
このページはリンクボタンを作ってみよう！の続きです。 前回はcssを使ってナビゲーションメニューのデザインを作りました。 今回はナビゲーションメニューの最後の仕上げとして、リンクボタンにマウスを合わせる（マウスオーバーする）と、ボタンの色が切り替わるように設定します。 こうする事でメニューのそれぞれのボタンの色が切り替わるようになるので、ナビゲーションメニューっぽい見栄えになります。 あと色が切り替わる速さの調整などもできるので、その辺も紹介していきますね！ 疑似クラスでマウスが乗った時のスタイルを設定 リンクボタンにマウスが乗った際に、背景色（ボタンの色）や文字の色を切り替えるには、疑似クラスを使います。 疑似クラスとは、要素が特定の状態の時のみに適用されるセレクターの事です。 例えばリンクのアンカーテキスト（文字の部分）にマウスを乗せたり、クリックしたりするとその文字の色が変わりますよ
リンクボタンを作ってみよう！
このページはULを使ってナビゲーションメニューを作ってみようの続きです。 前回はULタグ(箇条書き)を使って、ナビゲーションメニューを作っていきました。 今回はそこの各項目に枠線や表示サイズの設定などをして、リンクボタンを作成していきます。 目次 リンクボタンの作成 リンクボタンのスタイルを設定 文字色を変更してアンダーラインを消す リンクボタンの装飾 位置の変更 細かい設定 リンクボタンの作成 <div id="menu"> <ul> <li><a href="sample.html">ホーム</a></li> <li><a href="sample1.html">遊び</a></li> <li><a href="sample2.html">仕事</a></li> <li><a href="sample3.html">パソコン</a></li> <li><a href="sample4.
ULを使ってナビゲーションメニューを作ってみよう
前回はfloatを使ってメインコンテンツのデザインを作成しました。 今回からはナビゲーションの作成に取り掛かりましょう！ 現在メニュー用のテキストには箇条書き（UL）の設定だけをしており、まだリンクを貼ってはいません。 まずはメニューにリンクを設定し、各項目のスタイルを設定していく事で、それぞれの項目をボタンとして表示させていきます。 メニューにリンクを設定 箇条書きやテキストなどに他のページへ移動するためのリンクを設定するためには、HTMLのAタグを使用します。 練習用ページのナビゲーションメニューにはulを使って箇条書きが設定してあり、各項目にはliが設定してあります。 この場合li内にaを埋め込むことで、他のページへのリンクを貼る事ができます。 <li><a href="sample.html">ホーム</a></li> sample.htmlの部分には移動先のページのURLを入力し
floatを使って画像を回り込ませてみよう
ホームページやブログを作っていると画像の横にテキストを配置したくなる事ってありますよね。 HTMLやCSSを学んだばかりの頃って「意外と難いな」って感じると思うのですが、cssのfloatを使うと実は簡単にできるんです。 例えばfloatプロパティを指定した要素（divやpなど）は左右に回り込みます。 ということは画像やテキストにfloatを指定すれば「画像の横にテキストが配置されるようになる」というわけです。 このページでは、画像を表示する所から、その横にテキストを回り込ませる所までを紹介していきますね。 あとfloatの処理、高さを認識させる方法も詳しく解説していきます！もちろん初心者向けですので、用語をできる限り使わず説明していきますね(^^♪ 目次 画像を配置してみよう 画像を左に回り込ませよう float（回り込み）の解除 float応用編 floatで高さが認識されない 画像を
大本命！メルマガアフィリエイトの知られざる威力とは
今日は「禁断の魔術」ともいわれるメルマガアフィリエイトの威力についてお話ししたいと思います。 「あー、メルマガねｗ」と思うかもしれません。 でも、ネットビジネスの初心者の方ほどメルマガアフィリエイトの威力に気づいていない事が多いのであえてご紹介しようと思います。 「ブログ、ホームページ、メルマガ」この3つで一番商品が売れるのはどれだと思います？ 答えはメルマガなんです。 ブログで商品紹介の記事（アフィリエイト）を書いても、記事を投稿した瞬間から商品が売れるっていう事は、まずないですよね。 でも、メルマガ（アフィリエイト）なら発行日から1週間以内に商品が売れたりします。 ホント即効性があるのがメルマガです！（LINEとかも使えますよね） なら、ブログなんてやらずに最初からメルマガだけやってればいいじゃん！と思うかもしれません。 でもそれだと、どのくらい集客できるかわかりませんし、多分増やすの
練習なしでブラインドタッチ（タッチタイピング）をマスターした方法
こんな感じで指を常に待機させておく位置と、指ごとに押すキーが決まっているんです。 このホームポジションを常に守りながらタイピングするようにすると、自然とキーの位置を覚える事ができます。 もちろんキーの位置を覚えようとする必要はありません。 いやでも勝手に覚えちゃいますｗ そして指の動きも毎回同じ動きになるので、キーボードがなくても「エアタイピング？ｗ（何ていうんだろう、表現が難しいですｗ）」みたいなのが出来るくらい位置を覚えます。 そして指が動くようになります。 とにかく、人差し指で打つのとは、上達の速度が全く違うんです。 なのでまずはホームポジションを守るようにしましょうね。 基本はキーを打たない時は、指をホームポジションへ。 で、1つのキーを打ったら指をホームポジションへ戻すというような感じです。 「でも、見ないと指を置く位置なんてわかんなくね？？」と思いますよね。 でも、それがわかる
floatの回り込みを解除して2段組みレイアウトを完成させよう
※このページは「floatを使って2段組みのレイアウトを作成してみよう」の続きです。 前回floatを使ったことでナビゲーションメニューが左になり、メインコンテンツがその右に回り込んで表示されるようになりました！ 今度はメインコンテンツの表示サイズを設定してから、右に配置するfloatを使って2段組みのレイアウトを完成させましょう！ このページではcssのfloatの実践的な使い方とfloatの回り込み解除の方法を紹介します。 ※下のHTML文書を使って紹介していきます。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="keywords" content="htmlファイル作り方,htmlファイル作成,html初心者"> <meta name="description" content="htmlファイルの作
floatを使って2段組みのレイアウトを作成してみよう
こんにちわ、ゆう。です♪ さて前回はヘッダーの作り方を紹介しましたので、次はcssのfloatプロパティを使って２カラムのレイアウトを作っていきましょう。 floatの使い方については、このページ内で出来る限りわかりやすく紹介しますので、ご心配なく！ 一緒にページを作りながら覚えていきましょう(^^♪ 完成イメージ（下の画像）を見てみると、左側にナビゲーションメニュー、右側にメインコンテンツが表示してあります。 上のような２カラムのレイアウトは、cssの「float（フロート）」と呼ばれている仕組みを使って実現しています。 このfloatを使うと、指定した要素（divやh1など）が左右のどちらかに寄せて配置され、あとに続く要素がその横に回り込んで配置されるようになります。 では、floatを使って回り込ませる前に、まずは左側に配置するメニューの幅などの設定からしていきます。 ※このページは
positionプロパティの「relative」「absolute」の使い方
思い通りのデザインに簡単にできるpositionプロパティの紹介です！ positionプロパティって響きがなんか難しそうに感じさせてくれますが、実はとっても簡単！ 簡単にいうと、なんでも好きな位置に移動できる設定って感じです(^^)/ 例えばHTMLドキュメント（ファイル）にdivやh1などのタグ（ボックスレベル要素）を記述していくと、今までは上から記述した順に配置されていきました。 でもこのpositionプロパティを使うと、順番に関係なく、ページ上の好きな位置に自由に配置することができます。 そしてこの配置する方法は大きく分けると「相対配置（relative）」「絶対配置（absolute）」の2種類あります。 この二つの違う所は、表示する位置の基準となる位置が違うというとこ。 といってもわかりずらいので、relativeとabsoluteを使って一緒に位置を変えていってみましょう。
疑似要素「before」「after」の使い方とできること
こんにちわー、ゆうです(^^)/ 今回は疑似要素の「before」と「after」の紹介です！ 疑似要素って言葉は一度は見たり聞いたりしたことがありますよね。 きっと最初は「疑似？何それ」「難しそう・・・」って感じになっちゃうと思うんですが、実はこれとっても簡単なんです(^^♪ 「疑似」って言葉がなんか難しそうな感じを漂わせてくるんですが、ホントに簡単で使い方を理解しちゃえばデザインの幅がめちゃ広がりますよ！ という事でさっそく紹介していきますね(^^)/ 目次 疑似要素の「before」「after」とは before・afterの使い方 before・afterをcssで装飾 画像を入れる場合 before・afterでできないこと 疑似要素の「before」「after」とは 疑似要素の「before」「after」っていうのは、名前の通りで、指定した部分の直前や直後に好きな文字や画
インライン要素とブロックレベル要素の違いと特徴
ホームページやブログを作っているとブロックレベル要素やインライン要素という言葉をよく耳にしますよね。 要素（h1やpなどの事）の多くはブロックレベル要素とインライン要素に分けられ、中にどの要素を入れられるか（h1やpなどの中に何を入れられるか）などの決まりがあります。 そしてブロックレベル要素とインライン要素には、それぞれの特徴や違いなどがあるんです。 このページではそれぞれの違いや特徴などを紹介していきたいと思います。 目次 ブロックレベル要素とインライン要素の特徴 ブロックレベル要素（縦に積まれるもの） インライン要素（横に並ぶ） 基本的なルールについて インライン要素ではできない事 ブロックレベルとインラインを入れ替える ブロックレベル要素とインライン要素の特徴 二つの特徴を簡単にいうと、ブロックレベル要素は「縦に積まれる」、インライン要素は「横に並ぶ」っていう所です。 例えば上の画
ボックスの種類と指定方法、それぞれの違いについて
htmlのボックスの種類とそれぞれの違い、指定の方法についての紹介です。 htmlタグでマークアップした部分（htmlタグを入力した部分）には、ボックスが構成されます。 例えばインラインボックスやブロックボックスという言葉を聞いた事がないですか？ 以前にも紹介しましたし、一度は聞いた事あると思いますが、htmlタグを入力すると目には見えないですが上記のようなボックスが勝手に構成されます。 どのボックスを構成するかはデフォルトスタイルシートの「displayプロパティ」の値（inlineやblockなど）によって決まり、表示の仕方も変わります。 といっても分かりづらいのでまずは下の例を見て下さい。 <h1>h1の部分</h1> <p>pタグの部分です。サンプルとして右の部分を<a href="url">aタグ（リンク）</a>で囲みます</p> 例えば上記の場合だと、ページタイトルをh1タグ
spanタグの意味と使い方
spanタグの使い方の紹介です。 ホームページを作っているとspanやdivといったタグを見かける事が多いと思います。 spanやdivって何なんだろう？と思って調べても「そのタグ自体は意味を持たない」っていう説明が多いので 「？？？」って最初はなっちゃいますよね。 なのでこのページでは「何でspanを使うのか」「spanの使い方」などを紹介していきます。 目次 なぜspanタグを使うのか spanの使い方 文字の色を変える 文字を太くする 改行する なぜspanタグを使うのか なぜspanを使うかというと、spanタグ自体は意味を持ってないからです。 「は？？」って感じですよね。 こういうことです、例えば下のようなテキストがあるとします。 <p>イギリスが200年にわたりインドを支配した理由は、 インド総督府に優れた行政能力があったからと言われてる。</p> 表示例 上記のテキスト中の句
text-alignで文字や画像の位置を調整する方法
テキストの行揃えや画像を左に寄せたり、真ん中に寄せたりできるtext-alignプロパティの紹介です！ 使い方はとっても簡単で、ただコピペするだけ！ それでは使い方などを詳しく説明していきますね。 目次 text-alignの使い方 justify（均等割付）について text-alignでimgの位置を移動する場合 注意点 text-alignの使い方 text-alignプロパティでは、テキストの行揃えの位置を指定できます。 ブロックレベル要素にtext-alignを設定して、対象のインライン要素に対し適用することができます。 例えばブロック要素であるpタグに「text-align:center;」というように設定したら、pタグ内のテキストは中央揃えで表示されるようになるという事です。 ちなみにtext-alignはブロック要素内のインライン要素に対しての位置揃えですので、インライン要
fontプロパティの使い方と注意点まとめ
日本語環境で指定できるのはfont-variantを除いた5つのみとなっています。 またfontプロパティでまとめて設定する場合は、上記にも省略不可と記載しましたが「font-size」「font-family」は省略できませんのでご注意ください。 記述の仕方 fontプロパティには記述する順番というものがあります。 例えばfont-size、font-weightなど、まとめて設定したい各プロパティの値を指定する際は、次のような順番で記述しなければなりません。 記述する順番は上のような感じでfont-style、font-variant、font-weightの3つは順不同となっています。 省略できるものは記述しなくても大丈夫です。 例えば日本語環境の場合で、すべてのプロパティを設定する際は次のような順番になります。 font-style、font-weight、font-size、li
CSSのline-heightを使って行間を簡単に設定しよう
行の高さを調整できるline-heightの紹介でーす。 ホームページやブログを作る時に必ず使うプロパティだと思いますが、使っているとline-heghtが効かなかったり、 単位あり・なしどっちの方がいいのかな？？なんて思う時が来ると思います。 ですので、そのへんを踏まえて紹介していきたいと思います！ 目次 line-heightプロパティの使い方 em、%を使う時の注意点 line-heightが効かない場合 効かない原因 line-heightプロパティの使い方 line-heightは行の高さを指定できるプロパティです。 例えば、font-sizeプロパティで10pxを指定したとします。 そしてline-heightで16pxを指定した場合、行の高さ16px（line-height）から文字の大きさ10px（font-size）を引いた残りの6pxが行間として上下に3xpずつ割り振ら
ワードプレスのcssが半分消えた(T_T)
こんにちわー。 今日はちょっと心が折れる事が起きちゃいましたw（笑えないけどｗ 何が起きたかっていうと、なぜかCSSファイルの中身が半分きえちゃったんですよね(￣▽￣) せっかく時間があったから、ブログでもいじってようかなと思ったら、デザインが崩れてるｗ 「え！なぜ？？」と思って、崩れてるとこ見てみたらcssが反映されてない・・・。 「何も触ってないのに、なんで？？」と思ってcssファイルを開いたら、中身が半分消えてるわけですよｗｗ でも「バックアップ取ってあるし、まぁいいや」と思ってたら、一部バックアップとってなかったんですよね・・・(T_T) しかも消えたcssが反映されてた部分が全部わかればいいんですが、わかんないわけですよ・・・。 直すのはいいんですけどね、探すのがね・・・ｗ ほんと結構ショックな出来事でした(ーー;) 多分cssが消えた原因は、ワードプレスのcss編集で作業した時
デスクトップ操作をGIF動画で録画するなら「LICEcap」が簡単
デスクトップ上の操作などをgifアニメーションで録画（キャプチャー）できる「LICEcap」の紹介です！ pcの操作をアニメーションで録画したい時ってありますよね。 文字で説明してもわかりづらい事って、どうしてもあります。 そんな時は無料で使える「LICEcap」を使って、デスクトップ操作をgif録画（キャプチャー）しちゃいましょう！ 「でも、gifでキャプチャーするのは難しそう」って思いますよね。 「LICEcap」はそんな事はなくて、1クリックするだけでgifでキャプチャーが簡単にできちゃいます。 もちろん難しい設定もありません！ 超ー初心者向きといってもいいほど、シンプルで簡単にgif録画できるフリーソフトです。 ではさっそく使い方を紹介していきますね。 目次 LICEcapってなに？ LICEcapを入手しよう LICEcapの使い方 gifキャプチャーする 機能の説明 title
過去記事が見づらいので、新しくページを作成！
こんにちわ(^^)/ ブログって過去記事がどうしても見づらいですよね。 日記系のブログだったらいいんですが、情報系のブログだと過去記事が見づらいのは致命的な気がします。 例えば、ゲームの攻略系のブログだったりすると、過去記事をどーしても見る必要があったりしますよね。 そういう時ってカテゴリーから過去記事を見ると思うのですが、記事が縦に並んでるだけだとめちゃ見づらい。 というより、見る気しないですよねｗ 私のブログも今はweb系を中心に記事を作ってますけど、過去記事がすごい見づらいと思うんですｗ 特に1つの記事で完結しない記事を作ると最初の記事から見る必要があります。 でも、その最初の記事が置いてある場所に行くまでが面倒ですよねｗ カテゴリーもしくは過去ログを経由して・・・・、なんて面倒でやってられませんｗ めんどくさがりな私だったら、見る気すらしないですｗ なのでサイトみたいな感じで新しく
フォントサンプルを一覧表示で比較できる無料サイト
自分のパソコンにインストールされているフォントを一覧表示にして、比較することができるwebツール「wordmark.it」の紹介です。 「wordmark.it」は外部のソフトのダウンロードや、面倒な作業は一切必要ありません。 ただ「wordmark.it」を開くだけで、インストールされているフォントをフォントサンプル一覧として表示してくれます。 ほんと一瞬でフォントサンプルを比較できるので、めちゃ便利！ ホームページやブログといったwebサイトを作る時はもちろん、ワードを使った作業の時にも役立ちます。 一覧表示だからフォントを選ぶ時間も短縮できるし、もちろん無料なので超オススメです。 ではフォントサンプルを一覧表示で比較できるサイト「wordmark.it」とその使い方を紹介しますね(^^♪ 目次 wordmark.itって何？ wordmark.itの使い方 wordmark.itの設
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
