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

スムーズスクロール以外の方法で、ページ内リンクによって画面が切り替わったことを利用者にわかりやすく伝える方法はないかということで、ページ内リンクでの移動時に画面を一瞬点滅させるスクリプトを jQuery で書いてみました。 タイトルが （謎） な感じですが...... ページ内リンクでページ上部に移動させたりするとき、最近は所謂スムーズスクロールってやつを実装するのが当たり前になっていますよね。パッと瞬時に画面が切り替わってしまうと、ページ内で移動したことがわかりにくいので、スクロール処理を入れることでわかりやすくしてあげましょうって言う、親切心から採用されるケースが多いと思います。 実装方法は JavaScript と CSS アニメーションの組み合わせや、JavaScript （というか jQuery） でというのが多いと思いますが、今回はそのスムーズスクロールの実装方法はどれが良いの

スマートフォンサイトを制作する際、個人的に覚えておいた方が良いと思うCSSのプロパティやテクニックをまとめてみました。 自分用の備忘録ではありますが、他のブログ等でも取り上げられていることが多いので、いずれも覚えておいて損はないものだと思います。 普段から制作している方にとっては目新しいのはないと思いますが、まだスマートフォンサイトを制作したことがない方やまだまだ苦手だなと思う方は参考にしてみてください。 UA切り替え・Viewport指定・拡大縮小の有無・電話番号リンクの無効化・ホーム画面用のアイコン指定など、スマートフォンサイトを制作する際に最低限覚えておくべきと思うことは他にも沢山あるんですが、今回はCSSに焦点を当てています。 また、タイトルでは「スマートフォンサイト制作時」としてはいますが、レスポンシブWebデザイン制作時でも頻繁に使うものだったり、PCサイト制作時でもCSS3に

【ご注意事項】 1. ご自身のサイトのみに利用ください。2. 一度の作成で、最大1,000URLの取得が可能です。3. 1,000URL以上は「除外ディレクトリ」をご活用ください。例えば、1,000URL以上ある*****.com/のサイトマップを作成する際、*****.com/ABC/、*****.com/DEF/、のみのURL構成だった場合は、ABCとDEFを別々に除外ディレクトリに指定し2つのsitemap.xmlを生成します。その後どちらかにまとめて一つのsitemap.xmlとするか、2つのsitemap.xmlをアップしそれぞれ認識させます。4. rel="nofollow"のついたリンク以降のURLは取得しません。5. 生成されたファイルはご自身の責任のもとでご利用ください。

[対象: 上級] この記事では、「DNSプリフェッチ」という仕組みを利用してウェブページの表示速度を高速化する方法を解説します。 DNSプリフェッチとは 上級者向けの記事なのでDNSが何かの説明は省きます。 DNSプリフェッチを利用すると、外部ドメイン名（ホスト名）の名前解決（DNSルックアップ）を事前に強制できます。 ユーザー（ブラウザ）がそのドメインにアクセスする前にすでに名前解決が完了しているので、読み込み時間の短縮を図ることができるのです。 DNSの名前解決にかかる時間は平均して200ミリ秒とわずかですが、モバイル回線では無視できる長さではないかもしれません。 またときとして1秒以上かかることもあり、遅延による表示速度の低下の防止に役立てられます。 DNSプリフェッチは、ページの読み込みと同時に実行されまたCPUやネットワークへの負荷が低いため、そのほかの処理を遅らせてしまう心配も

デザインするのが楽しくなる！ダウンロードしておきたい最近リリースされた無料フォントのまとめ -2015年1月

通常ページデザインを行うとき、教科書通りで行くと、まず「大枠」と呼ばれるものを、たとえば「wrapper」とか「countainer」とかいうＩＤ名の<div>で制作し、それを画面中央に浮かぶように、CSSで右と左に{margin:auto}をかけたのち、その内側に「ヘッダー」や「メインヴィジュアル」を作るのが一般的とされています。 ただ、いろいろな企業サイトを見てみると、たとえば「ヘッダー」や、「フッター」、ページ途中の「ナビゲーション」などが「大枠」から飛び出して、画面いっぱいに広がっているデザインを見たことがあると思います。 たとえばこのページのヘッダー部分も画面のサイズに関わらず、必ず画面の端っこまで伸びるようにデザインされています。 ためしにウインドウサイズを変えたりしながら確認してみてください。 これの仕組みを解説していきたいと思います。 まず、通常の制作の仕方は上図のようにな

CSS の display プロパティについて紹介します！ display: inline・display: block・display: inline-blockについてのおさらい。HTMLとCSSひよこちゃん向け！ いろいろ便利な CSS の display プロパティ。今回は display: inline display: block display: inline-block についておさらいしてみます。HTMLひよこちゃん向けの記事です！ displayプロパティで、ブロック・インライン・インラインブロックをおさらいしてみた displayプロパティ displayは、要素の「表示形式」を指定するプロパティ。 ブロックレベル要素をインライン形式で表示したり、インライン要素をブロックレベル形式で表示することができます。 構造的にはブロックレベル要素なんだけど、インラインとして表示

当サイトで配布しているホームページテンプレートのほぼ全てに、上記のようなお知らせ欄があります。日付と説明文とで構成されていますが、日付の右側にカテゴリーを示すアイコンを表示できるようにカスタマイズしてみる事にしてみましょう。 使用テンプレートは… tp_biz20_blueを使いますが、日付が左側、情報が右側になっているタイプであればどのテンプレートにも使えます。 まず、使いたいアイコンを準備します 今回は、「重要」と「製品情報」の２つを準備しました。 一般のお知らせの場合には特にアイコンを表示させない事にしますが、表示させたい場合は「お知らせ」アイコンも準備して下さい。アイコンはご利用のテンプレート内にあるimagesフォルダに入れておいて下さい。 ご利用中のテンプレートのstyle.cssファイルを開きます cssフォルダに入っているstyle.cssファイルをメモ帳など編集できる

10/06　■■■■■■が再入荷しました。 10/05　○○○を追加しました。 10/04　■■■ を追加しました。 10/03　○○■■■○が再入荷しました。 10/02　○■■■■■■○○が再入荷しました。 10/01　○○○が再入荷しました。 09/28　○○■■○■■■が再入荷しました。 09/25　○○○■■■を追加しました。 09/23　○○○■■■■■を追加しました。 09/22　○○○■■■を追加しました。 09/20　○○■■■■○■■■を追加しました。 09/18　○○■■○■■■を追加しました。 09/17　○■■○○■■■を追加しました。 サンプルソース sample1.html <style type="text/css"> .box_srcollbar { overflow:auto; width:300px; height:80px; padding:5px;

<ul id="menu"> <li><a href="#">html</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JavaScript</a></li> <li><a href="#">PHP</a></li> <li><a href="#">Perl</a></li> </ul> HTMLは最後まで変更しません。 #menu { width:530px; padding:0; margin:0; list-style-type: none; } #menu li { width:20%; float:left; padding:0; margin:0; text-align:center; } #menu li a { width:auto; color:#fff; font-size:12px; font-weight:

2015-01-17 ブログ収益が月10万円を越えたので、SEO対策とアフィリエイトについてまとめてみる TIPS WEB 今日から3回に分けてブログ運営のテクニックを知っている限りすべて書いていく。 とくに理由はないのだがせっかくここまで多くの人に見てもらえるようになったので忘れないうちにここまで試してきたノウハウをまとめておきたかったのだ。教えたくないこともあるが、ブログに対する執着心もそんなにないので全て書いてしまおうと思う。 今回は①このブログのPV数等の振り返りと ②SEO対策の手法 ③アフィリエイト等のマネタイズについて  次回は「ブログの運営テクニック全般」について、5つのポイント（ライティング、コンセプトメイキング、読者登録、バズ、ネタ選定）に分けて説明していく その次の回には「ブログ・Webメディアの未来」について仮説を基に書く予定 このブログの現状について  PV数 2

京アニ放火事件を受けて、メルカリに京アニ関連グッズ出品が急増しています。しかし中には高額すぎる出品があったり、そもそもメルカリで京アニグッズ …