こんにちは、くーへいです。 先日、CSS3の仕様書を全て読んでまとめてみたのですが、その中でいくつか気になるモジュールがあったので、順次まとめて行こうと思っています。 今回はみんな大好き、アニメーションです！ jQueryなどのJavaScriptを用いれば可能なことはご存知かもしれませんが、今回はCSSだけで行うアニメーションです。 グローバルナビゲーションなどでも用いられている、みょーんとなるアレですね。 IE8やIE9では対応していませんので、スマホサイトが中心になるかもしれませんが、今後のトレンドとなっていくことは間違いないでしょう。 CSS3におけるトランジション（transition）とアニメーション（animation）の違い パッと見では分かりにくいのですが、違いは以下の通りです。 トランジションが:hoverなどのきっかけが必要なのに対し、アニメーションは設定が可能 トラ

読みました！ www.wakatta-blog.com まさにその通りだと思います。 特に ブロガーもアフィリエイターも、信用と収益化を両立させたいのであれば、収益性の高いサービスやプロダクトを、自家でつくることです。 この部分に関しては共感しか無いんですよ。実際にある程度の認知なり収益を出した人って別に収益性の高いサービスやプロダクトを生み出しているんですよね。もしくは最初からあまりブログとかアフィリエイトをメインに行うのではなくサービスやプロダクトを個人で生み出して上手く収益化している人もいます。 しかしながらはてなブログ界隈の話ですが、少し様子が違うように思う部分もあるんですよね。 ブロガーとアフィリエイター、逆に見える はてなブログでは収益やPVの報告をした上で最近はサロンへの勧誘が行われています。 これって、いろいろな人が書いているけど一昔前の情報商材の悪質なアフィリエイターが行

Hover.cssとは Hover.cssとは、手軽にホバーエフェクトを利用できるようになるCSSライブラリです。 すべて、CSSで動作するので、AタグなどのHTML要素のクラス指定部分にクラス名を記述するだけで、100種類以上の様々なマウスホバーエフェクトを手軽に使えるようになります。 利用するときは、こんなタグで利用できます。 Font Awesomeのアイコンフォントを利用したことがある方なら、Font Awesomeを利用するように、クラスを指定するだけで使うことができるので、簡単に利用できます。 Hover.cssの主な利用手順 Hover.cssを利用するのに必要な主な手順は、以下の3手順です。 Hover.cssのダウンロード＆設置 Hover.cssを呼び出す Hover.css用のタグを記入する 利用するファイルも、hover.css（縮小版はhover-min.css）

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

つまり、基本的にはHTMLがしっかりしていれば文章自体は存在するんですが、CSSも上手く使ってやらないと見やすくならないということですね。 他にもJava Scriptなどを使うと、文章に「動き」をつけることが出来ますが、基本的には上の２つを使ってカスタマイズするのが主流な流れだと思ってください。 はてなブログ：PC版カスタマイズ PC版でカスタマイズしている部分は、以下の通りです。 ブログデザインテーマ＆記事幅 デザインはブログテーマの「Innocent」です。このテーマは、少し設定するだけで簡単にグローバルメニューが設置できるのが魅力です。 記事幅に関しては、初期設定だとAdsenceが記事幅より飛び出してしまっていたので、720pxに変更しています。「Innocent」を作った作者の半月さんがカスタム記事を書いているので、そちらを参考にして変更しています。 記事自体は「Blank」テ

2016 - 02 - 02 僕がはてなブログで行った１２のカスタマイズまとめ ブログ-はてなネタ 広告 シェアする Twitter Google+ Pocket 自分用のメモとして、これからカスタマイズしようとしているはてなブロガーに向けてこの記事を書きます。 ※H28/2/2現在で自サイトに施しているカスタマイズ（見える範囲で..）をまとめたもの ※はてなブログ（スマホはPro必須）におけるデザインテーマ「レスポンシブルー」を使用した場合のカスタマイズです。 ヘッダー変更 プロフィール画像変更 定期購読ボタンをファーストビューに 文字サイズ 続きを読む 見出し 目次 シェアボタン 記事下関連記事（ＰＣ） 記事下に「合わせて読みたい」（スマホ） カエレバ・ヨメレバ スマホ回遊率ＵＰ  ヘッダー変更 ＰＣ設定：デザイン→カスタマイズ→ヘッダ→タイトル変更→画像だけ表示→ファイルを選択 スマ

画像に枠を付ける場合、画像編集ソフトなどを使ってやる方法もありますが、記事を書いて画像を載せる度に画像を加工するのは面倒くさいのでCSSで指定します。 まずCSSに以下の記述をします。 .gazouwaku{ border:1px solid #333;/* 外枠の色 */ padding:5px;/* 余白 */ background-color:#ffffff;/* 余白部分の色 */ } 実際に画像に枠を付ける時は画像URLの後にclass="gazouwaku"を入れればＯＫです。 <img src="画像URL" class="gazouwaku" /> こういったちょっとした事でブログ全体の見栄えも良くなると思いますのでよろしければどうぞ。 もちろん、「gazouwaku」は任意ですので、ご自身で好きなように指定しても構いません。

ヘッダーにメニューを設置してカスタマイズしました お詫び：今回の記事は「コピペで簡単」って記事ではないです。 スマホ対応はまだしてませんが、パソコンで見るとタイトル下にメニューが表示されます。 メニュー自体は前から設置していたのですが、ちょこっと手直ししました。 テーマによっては簡単にメニューを設置できるみたいですが、当ブログは自力でCSSいじっているのでメニューの設置も自力でやりました。 今回のコードは、あまり初心者向けではないので参考になるかは微妙です。そもそも、コードの出来に自信ありませんww　駆け出しなので許してちょ☆ サンプルコード まずはHTMLです。これをデザイン→カスタマイズ→ヘッダにぶち込めばベースができます。 ※もしここにコードが表示されてない場合は、ページを再度読み込んでください。 リンク先のアドレスはご自身のブログのカテゴリーURLを貼ってくださいね。 id=”js

経営コンサルタントを本業（自称）にテレビ番組のコメンテーターを務めていた自称ショーン・マクアードル川上氏(47)に学歴詐称疑惑が浮上し、本人が「誤りがあった」と認めた件について、続々と追加の嘘が見つかっている。 一体何が嘘で何が本当だったのか。netgeekでは錯綜する情報をまとめ、真実を分かりやすく8つにまとめる試みを行った。 １．テンプル大学卒→日本の高卒 ２．ハーバード大学院（MBA）卒→オープン授業を3日受けただけ ３．パリ大学留学→オープンキャンパスに行っただけ ４．経営コンサルタント→実態のないペーパーカンパニー ※ただし、ショーンKは自身のHPにて経営コンサルタント事業は下請けという形でやっていたのでクライアントからの証言は得られないが本当に仕事はしていたと主張している。 ５．米国人親から生まれたハーフ→純粋な日本人 ６．ショーン・マクアドル川上→川上伸一郎 ※昔、熊本で同級

css3でアニメーションを使用するサイトが近頃増えてきました。背景としては、css3アニメーションのプロパティにほぼ対応しているスマホ端末の普及や、animationプロパティ未対応のIE9（IE6～IE8を含む）のシェアが低下してきていることが挙げられると思います。 つまり、css3アニメーションの対応ブラウザは「増加中」ということに他ならず、実装するサイトは更に増えていくのではないでしょうか。 今回は、そんなcss3アニメーションの実装時に参考できる22サイトを集めてみました！ 1：丸型オブジェクトにピッタリのアニメーションギャラリー 丸型オブジェクトに対して、様々なホバーエフェクトを実装しています。 何気なくマウスオーバーした時にこんな動きがあれば、注意を引きつけられそうですね！ http://tympanus.net/codrops/2013/05/30/simple-icon-h

実際に使用したものやいつか使うかもと思ったものをJSFiddleやEvernoteなんかでバラバラにメモしていたのですが、それらの中でよく使いそうなものを一覧化したものが欲しかったのでまとめました。 今となっては様々なところで用いられていますし、もっと凄くて面白い動きを実装しているチュートリアルなんかも沢山見かけますが、個人的に汎用性高いと思うもの中心です。 対象ブラウザに古いIEなどが含まれている場合はもちろん使えませんが、いずれもjQueryや画像などを一切使用せずにデザインやアニメーションも全てCSSのみで実装しているものです。 また、同様にCSSのみでクリエイティブなボタンデザインやエフェクトを実装できるエントリーや便利なジェネレータツールなども備忘録兼ねて併せて紹介します。 CSS3を多用しているため、ブラウザ（特にIE7・IE8など）によっては動きや見栄えが説明と異なる場合があ

今回は素敵なCSS3アニメーションを用意してくださっているサイトをご紹介します。 2016年1月にIE8のサポートが切れる…とのことなのでいつかバンバンつかえる日が来たらいいなと思います。 Hover.css サイト・デモ 主にボタンにカーソルを当てた時に使えそうなCSSライブラリです。 綺麗にまとめてくださっているので使いたいものがすぐに見つかりそうですね。 CSSのみで実装するボタンデザインやホバーエフェクト 20＋α 目次 サイト・デモ 使い勝手のよさそうなエフェクトが用意されています。 CSSのみで実装できる、画像と相性が良さそうなホバーエフェクト 15 サイト・デモ 画像にカーソルを当てた時の動きに使えそうなCSSをまとめてくださっています。 CSSのみで実装するキャプションエフェクト 20 サイト・デモ カーソルを当てた時にキャプションを表示する際の動きについてまとめてくださっ

更新日: 2018年10月11日公開日: 2015年10月28日これ全部CSS!?驚くほど自由自在なCSSアニメーション20選 "CodeCampus"はオンラインプログラミングスクール No.1のCodeCampが運営するプログラミング未経験の方のための学習メディアです CodeCampとは？（受講生体験記） 「エンジニアは女性のキャリアとして魅力的」未経験からの転職体験記リモートワーク×多拠点居住の新しい生き方を実現する。元バレエダンサーの挑戦普通の文系大学生/営業職が、エンジニアへ転職し起業するまで成長の記録 CSSアニメーションの基礎知識 改めてCSSアニメーションとは 2011年6月にFirefox5がCSSアニメーションに対応したことを皮切りに、GoogleChrome、Safari、iOS、Androidなど次々に各ブラウザがCSSアニメーションに対応するようになりました。C

PR：はてなブログのテーマ「Naked」を作成しました！デフォルトでもカスタマイズもしやすいテーマです。よろしければご利用ください！↓ www.yukihy.com 今までいろいろとはてなブログをカスタマイズしてきて、特にシェアボタンなどはいろんなところで使われているようでありがたいです！ 数も多くごちゃごちゃになってきたので、一旦まとめたいと思います。 新しいカスタマイズを行い次第、この記事にどんどん付け加えていこうと思っています。 カスタマイズ記事まとめ 見出しのデザイン SNSシェアボタン関係 旧バージョン 新バージョン SNSフォローボタン メニュー関係 スマホ版のみ グローバルメニューと両立してレスポンシブ対応にする グローバルメニュー（ドロップダウン）&トグルメニューのレスポンシブ対応 グローバルメニュー（ドロップダウン）&スライドメニューのレスポンシブ対応 レスポンシブ対応な