yuu さん プロフィール

  •  
yuuさん: 安月給さよなら!本当に稼げるのか実験記
ハンドル名yuu さん
ブログタイトル安月給さよなら!本当に稼げるのか実験記
ブログURLhttp://www.yuu-diaryblog.com/
サイト紹介文ネットビジネスは本当に稼げるか実験記録。実際に稼げたノウハウも包み隠さず全部公開!色々試します
自由文7年勤めた父の会社を辞め、次は何をしようか考え中。う〜ん、何しよう(笑)
あ、ちなみにスノーボード年間70日以上行くほど大好きです(^◇^)
参加カテゴリー
更新頻度(1年)情報提供124回 / 201日(平均4.3回/週) - 参加 2016/07/07 14:26

yuu さんのブログ記事

  • snsやブログサービスで使われてるロゴのアイコンフォント
  • ツイッター、フェイスブック、Google+などのSNSや、ワードプレスなどのブログサービスで使用されているロゴは、アイコンフォントを利用する事で全く同じものが作れます。今回は無料オンラインサービスのアイコンフォント・ジェネレーター「Fontello」を使ったsnsアイコンの作り方を紹介します。ちなみにこんな感じのアイコンフォントが作れますよ!Fontelloでアイコンフォントを作ろうまずはFontelloにアクセスしてアイコンフォン [続きを読む]
  • 画像やページ内のカラーコードが一発で分かる【ColorPick Eyedropper】
  • よくwebサイトを見ていて、この色のカラーコードって何だろう?って思う時ってありますよね。そういう時ってデベロッパーツール開いて、CSSを見てみるとすぐわかるんですが、画像の色まではわかりません。でもchromeの拡張機能の「ColorPick Eyedropper」を使うと、サイト内の色はもちろん、画像の色のカラーコードまで簡単に調べられるようになります。この色いいな!って思った時などに、簡単に、閲覧中のページの好きな場所のカ [続きを読む]
  • ページ全体をセンタリングさせよう
  • 前回はナビゲーションメニュー周りのリンクの設定をしました。ですが、上記の画像のように今のままではページ全体が左に寄ってしまっています。そこで今回は最後の仕上げとして、ページ全体を常にブラウザの中央に表示(センタリング)させるようにしましょう。marginを使用してページ全体をセンタリングするページ全体をセンタリングするには、marginプロパティを使用します。marginプロパティはボックス要素のマージン(余白)を [続きを読む]
  • ちょっと遅いけど、あけおめ!
  • ちょっとというか、大分遅れましたけど、あけましておめでとうございます!!最近、記事更新をまったくしてなかったんですけど、実はhtml・cssのリファレンスというか、コードの早見表みたいのを作ってました(^^)/(スノーボードの時期だからってサボってたわけじゃないですよw)速攻でできるかなって思ったんですが、これが意外と時間が掛かるんですよねwホントはあんまり時間を割きたくなかったんですがwちょー時間が掛かって [続きを読む]
  • 巨大すぎる!ジャンボパフェに挑戦してみた
  • こんにちわ、ゆうです(^^♪ちょっと仕事で新潟県の小千谷市に行ってきたので、TVでも紹介されている巨大パフェのお店「星野屋」という所へ行ってきました!実はこのお店、巨大パフェで有名みたいで、店内にも有名人のサイン色紙がずらりとあったりします。(写真撮り忘れましたw)で、今回挑戦してみようと思うのがこちらの「ワイワイびっくりパフェ」うん。デカイw普通これをみんなで分けて食べるんだろうなーって思うのですが [続きを読む]
  • リンクボタンの色を切り替わるようにする
  • このページはリンクボタンを作ってみよう!の続きです。前回はcssを使ってナビゲーションメニューのデザインを作りました。今回はナビゲーションメニューの最後の仕上げとして、リンクボタンにマウスを合わせる(マウスオーバーする)と、ボタンの色が切り替わるように設定します。こうする事でメニューのそれぞれのボタンの色が切り替わるようになるので、ナビゲーションメニューっぽい見栄えになります。あと色が切り替わる速さ [続きを読む]
  • リンクボタンを作ってみよう!
  • このページはULを使ってナビゲーションメニューを作ってみようの続きです。前回はULタグ(箇条書き)を使って、ナビゲーションメニューを作っていきました。今回はそこの各項目に枠線や表示サイズの設定などをして、リンクボタンを作成していきます。目次リンクボタンの作成 リンクボタンのスタイルを設定 文字色を変更してアンダーラインを消す リンクボタンの装飾 位置の変更細かい設定リンクボタンの作成 [続きを読む]
  • ULを使ってナビゲーションメニューを作ってみよう
  • 前回はfloatを使ってメインコンテンツのデザインを作成しました。今回からはナビゲーションの作成に取り掛かりましょう!現在メニュー用のテキストには箇条書き(UL)の設定だけをしており、まだリンクを貼ってはいません。まずはメニューにリンクを設定し、各項目のスタイルを設定していく事で、それぞれの項目をボタンとして表示させていきます。メニューにリンクを設定箇条書きやテキストなどに他のページへ移動するためのリン [続きを読む]
  • floatを使って画像を回り込ませてみよう
  • ホームページやブログを作っていると画像の横にテキストを配置したくなる事ってありますよね。HTMLやCSSを学んだばかりの頃って「意外と難いな」って感じると思うのですが、cssのfloatを使うと実は簡単にできるんです。例えばfloatプロパティを指定した要素(divやpなど)は左右に回り込みます。ということは画像やテキストにfloatを指定すれば「画像の横にテキストが配置されるようになる」というわけです。このページでは、画像 [続きを読む]
  • 見出しと本文(p要素)のスタイルを設定しよう
  • こんにちわー、ゆうです(^^♪前回はfloatプロパティを使って2カラムのレイアウトを作りました。今回は、そこに見出しと本文のデザインを作っていきたいと思います。ここは超簡単なんで、適当に読み流すだけで大丈夫です(^^♪アレンジを加えていってもいいですし、cssでのデザインを楽しめると思いますよ!サンプルのソースを見るとわかりますが、メインコンテンツにはh1〜h2要素として設定した見出しがあります。まずはh1要素のフ [続きを読む]
  • floatの回り込みを解除して2段組みレイアウトを完成させよう
  • ※このページは「floatを使って2段組みのレイアウトを作成してみよう」の続きです。前回floatを使ったことでナビゲーションメニューが左になり、メインコンテンツがその右に回り込んで表示されるようになりました!今度はメインコンテンツの表示サイズを設定してから、右に配置するfloatを使って2段組みのレイアウトを完成させましょう!このページではcssのfloatの実践的な使い方とfloatの回り込み解除の方法を紹介します。※下の [続きを読む]
  • floatを使って2段組みのレイアウトを作成してみよう
  • こんにちわ、ゆう。です♪さて前回はヘッダーの作り方を紹介しましたので、次はcssのfloatプロパティを使って2カラムのレイアウトを作っていきましょう。floatの使い方については、このページ内で出来る限りわかりやすく紹介しますので、ご心配なく!一緒にページを作りながら覚えていきましょう(^^♪完成イメージ(下の画像)を見てみると、左側にナビゲーションメニュー、右側にメインコンテンツが表示してあります。上のような [続きを読む]
  • positionプロパティの「relative」「absolute」の使い方
  • 思い通りのデザインに簡単にできるpositionプロパティの紹介です!positionプロパティって響きがなんか難しそうに感じさせてくれますが、実はとっても簡単!簡単にいうと、なんでも好きな位置に移動できる設定って感じです(^^)/例えばHTMLドキュメント(ファイル)にdivやh1などのタグ(ボックスレベル要素)を記述していくと、今までは上から記述した順に配置されていきました。でもこのpositionプロパティを使うと、順番に関係な [続きを読む]
  • 疑似要素「before」「after」の使い方とできること
  • こんにちわー、ゆうです(^^)/今回は疑似要素の「before」と「after」の紹介です!疑似要素って言葉は一度は見たり聞いたりしたことがありますよね。きっと最初は「疑似?何それ」「難しそう・・・」って感じになっちゃうと思うんですが、実はこれとっても簡単なんです(^^♪「疑似」って言葉がなんか難しそうな感じを漂わせてくるんですが、ホントに簡単で使い方を理解しちゃえばデザインの幅がめちゃ広がりますよ!という事でさっ [続きを読む]
  • インライン要素とブロックレベル要素の違いと特徴
  • ホームページやブログを作っているとブロックレベル要素やインライン要素という言葉をよく耳にしますよね。要素(h1やpなどの事)の多くはブロックレベル要素とインライン要素に分けられ、中にどの要素を入れられるか(h1やpなどの中に何を入れられるか)などの決まりがあります。そしてブロックレベル要素とインライン要素には、それぞれの特徴や違いなどがあるんです。このページではそれぞれの違いや特徴などを紹介していきたい [続きを読む]
  • ボックスの種類と指定方法、それぞれの違いについて
  • htmlのボックスの種類とそれぞれの違い、指定の方法についての紹介です。htmlタグでマークアップした部分(htmlタグを入力した部分)には、ボックスが構成されます。例えばインラインボックスやブロックボックスという言葉を聞いた事がないですか?以前にも紹介しましたし、一度は聞いた事あると思いますが、htmlタグを入力すると目には見えないですが上記のようなボックスが勝手に構成されます。どのボックスを構成するかはデフォ [続きを読む]
  • spanタグの意味と使い方
  • spanタグの使い方の紹介です。ホームページを作っているとspanやdivといったタグを見かける事が多いと思います。spanやdivって何なんだろう?と思って調べても「そのタグ自体は意味を持たない」っていう説明が多いので「???」って最初はなっちゃいますよね。なのでこのページでは「何でspanを使うのか」「spanの使い方」などを紹介していきます。目次なぜspanタグを使うのか spanの使い方 文字の色を変える [続きを読む]
  • text-alignで文字や画像の位置を調整する方法
  • テキストの行揃えや画像を左に寄せたり、真ん中に寄せたりできるtext-alignプロパティの紹介です!使い方はとっても簡単で、ただコピペするだけ!それでは使い方などを詳しく説明していきますね。目次 text-alignの使い方 justify(均等割付)についてtext-alignでimgの位置を移動する場合注意点text-alignの使い方text-alignプロパティでは、テキストの行揃えの位置を指定できます。ブロックレベル要素にtext-alignを設 [続きを読む]
  • fontプロパティの使い方と注意点まとめ
  • フォントに関する指定をまとめて設定できるfontプロパティの紹介です(^^♪文字のサイズを変更して太さを変更して行間を変更して・・・、なんてそれぞれ設定するのは面倒すぎ!なんて時にはfontプロパティを使いましょう!ただfontプロパティには守る必要があるルールがありますので、そこらへんも説明していきますね。目次 フォントプロパティの使い方 記述の仕方 注意点システムフォントを指定する場合フォン [続きを読む]
  • CSSのline-heightを使って行間を簡単に設定しよう
  • 行の高さを調整できるline-heightの紹介でーす。ホームページやブログを作る時に必ず使うプロパティだと思いますが、使っているとline-heghtが効かなかったり、単位あり・なしどっちの方がいいのかな??なんて思う時が来ると思います。ですので、そのへんを踏まえて紹介していきたいと思います!目次line-heightプロパティの使い方em、%を使う時の注意点 line-heightが効かない場合 効かない原因line-heightプロパティ [続きを読む]
  • ワードプレスのcssが半分消えた(T_T)
  • こんにちわー。今日はちょっと心が折れる事が起きちゃいましたw(笑えないけどw何が起きたかっていうと、なぜかCSSファイルの中身が半分きえちゃったんですよね( ̄▽ ̄)せっかく時間があったから、ブログでもいじってようかなと思ったら、デザインが崩れてるw「え!なぜ??」と思って、崩れてるとこ見てみたらcssが反映されてない・・・。「何も触ってないのに、なんで??」と思ってcssファイルを開いたら、中身が半分消えてる [続きを読む]
  • 過去記事が見づらいので、新しくページを作成!
  • こんにちわ(^^)/ブログって過去記事がどうしても見づらいですよね。日記系のブログだったらいいんですが、情報系のブログだと過去記事が見づらいのは致命的な気がします。例えば、ゲームの攻略系のブログだったりすると、過去記事をどーしても見る必要があったりしますよね。そういう時ってカテゴリーから過去記事を見ると思うのですが、記事が縦に並んでるだけだとめちゃ見づらい。というより、見る気しないですよねw私のブログ [続きを読む]