Help us understand the problem. What are the problem?

CSS HTML Web コーディング CSSの opacityと transitionを使用して、オンマウス（hover）した時に画像をフェードさせる方法です。マウスアウトした時もフェードの効果を与えるにはどうすればよいか知りましたので、メモしておきます。 CSSを使用すれば、リンクの設定された画像にオンマウスした時に画像をゆっくり透過（フェードイン）できますが、マウスアウトした時にフェードアウトする方法です。 HTMLのソースは以下の通りです。 HTML

今回は初めてGoogleマップのカスタマイズに挑戦したので、備忘録としてやり方をまとめました。 カスタマイズできると知ってはいるけど難しそうで試したことない人も多いはず…そんな方は是非チェックしてみてください！ それではどうぞ！ Googleマップのカスタマイズをする意味 実店舗があるお店のサイトにとって、そのお店の行き方や場所が分かるマップは重要なコンテンツだと思います。初めてお店に行きたい時に、サイトにマップがあるととても分かりやすいですよね！ そんな時よく使われるのがGoogleマップです。ただサイトによってはマップとサイトデザインがあっておらず違和感を感じる場合もあります。 デザインをあわせるためにオリジナルの地図画像を作るという手もありますが、道が変更されたり、目印のお店が無くなったりするたびに変更しないといけないので正直あまり実用的ではありません。そこでオススメしたいのが、Go

どうもです、はやちです(◞‸◟) いきなりですがみなさん、せっかくデザインされたWebサイトの中にデフォルトのGoogleマップがあるとなんだかもったいなく感じませんか？(◞‸◟) どーにかこれをうまくデザインできないだろうか(◞‸◟) ということで、今回は簡単にGoogleマップのデザインをカスタマイズできる方法をご紹介したいと思います٩( ᐛ )و Googleマップを表示させよう まずはじめに基本から。Googleマップを設置しましょう( ˘ω˘)☝ Googleマップの設置 <script src="http://maps.google.com/maps/api/js?key=ここにAPIキーを入れます&language=ja"> </script> headerタグAPIを取得するスクリプトをつけます。 APIの取得はこちらをご参照ください <div id="js-map-tae

スマホサイトといえば三本線の「ハンバーガーメニュー」が定番ですが、最近ではメニューを表示したまま横スクロールさせるサイトも見かけるようになってきました。 タップしなくてもメニューが表示されているので、ハンバーガーメニューよりも気付いてもらいやすくなるかもしれませんね。 でも「横にスクロールするよ」っていうのが分かりやすくないと、隠れている部分に気付かない人もいるかもしれません。 ということで、ユーザーが分かりやすく、使いやすいレスポンシブな横スクロールナビゲーションを作ってみたのでご紹介します。 HTMLとCSSだけなので簡単ですよ♪ 横スクロールメニューって何よ？まずはどんなメニューを作るのか見てください。 PCだとこんな感じの普通のメニューです↓ そしてウィンドウの幅が狭くなると、横スクロールするようになります。 スマホで見るとこんな感じ↓ どうですか？良い感じでしょ？ 右側に固定のア

Photoshopで背景にパターンオーバーレイで模様をつけました。 ですが、いざコーディングするときに書き出そうとしたら困ってしまったので、その方法を書き留めておこうと思います。 ※記事で紹介している環境はPhotoshop CC（Mac OS）です。 今回背景パターン素材として書き出したいのは、 ・レイヤースタイルのパターンオーバーレイでパターンを適応 ・比率を10%にして（図１） ・なおかつカラーオーバーレイで描画モードをスクリーンにした（図２） という、大変面倒なパターン素材です。 （図１） （図２） １、元のパターンの大きさを調べる 比率もカラーオーバーレイも反映されていない、元素材であるパターンのサイズを調べます。 まず、レイヤースタイルパネルのパターンオーバーレイを表示します。 次に、パターンのプルダウンを押して、調べたいパターンの上にマウスをしばらく置いておくと詳細【パターン

HTML5 による実装を進めるにあたり、何らかのポリフィル用のライブラリを導入することが望ましいです。 ここでは Webshim というポリフィル・ライブラリの紹介、簡単な使用方法について説明します。 日々開発が続けられているものなので、利用する際には Webshim 開発プロジェクトのウェブサイトを参照してください。 Webshim はポリフィルライブラリと UI コンポーネントの拡張ライブラリ Webshim はフォーム検証、ジオロケーション、メディア・エレメント、各種 UI ウィジェットなど、HTML5/CSS3 (以後 HTML5) で導入された機能に関するポリフィルを行なうライブラリです。 またポリフィルを実施するという目的からさらに発展して、現在は UI コンポーネント、ウィジェットのカスタマイズ用のライブラリとして多数のオプションを提供するべく拡張が進められています。 Web

<form action=""> <section> <h2>radio</h2> <input type="radio" name="hoge" value="高坂さん" checked id="radio01" /> <label for="radio01" class="radio">高坂さん</label> <input type="radio" name="hoge" value="南さん" id="radio02" /> <label for="radio02" class="radio">南さん</label> <input type="radio" name="hoge" value="園田さん" id="radio03" /> <label for="radio03" class="radio">園田さん</label> </section> <section> <h2>

select{ -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: 0; margin: 0; height: 30px; background: transparent; position: relative; z-index: 1; padding: 0 40px 0 10px; border: 1px solid #ccc; } select::-ms-expand { display: none; } .selectWrap{ position: relative; display: inline-block; } .selectWrap::before{ content: ''; position: absolute; z-index: 0; top: 0; right: 0; b

こんにちは、リードスペースです。 ラジオボタンやチェックボックスってブラウザー依存のデフォルトデザインだと少し味気ないですよね？ 今回は、CSSでラジオボタンやチェックボックスをオリジナルデザインでカスタマイズする方法について根掘り葉掘り説明します。 ズバリ、labelタグを使う ラジオボタンやチェックボックスなどに使用するinputタグはcssで装飾できないという難点があります。 そこでラジオボタンやチェックボックスを装飾するのに役立つのが「label」タグです。 「label」とは、チェックボックス、ラジオボタンなどの構成部品とその項目名を関連付けるためのタグです。 関連付けを行えば、ブラウザでlabelタグをクリックしただけでも、その構成部品をクリックしたものと同じ動きをしてくれます。 指定方法その1・フォームパーツのidとlabelタグのforの値を同じにする 下記のようにidとf

TOPjQuery 【jQuery】slickのカルーセルスライダー実装方法とサンプル集 【jQuery】slickのカルーセルスライダー実装方法とサンプル集 公開日：2015.12.02 更新日：2023.03.19 jQuery, カルーセルスライダー 様々なレイアウトのスライダー、スライドショーを実装出来る slick の使い方をまとめました。 これまでも slider-proやcarouFredSelをご紹介しましたが、slickは両者のいいとこ取りという感じです。詳細は以下の機能概要をご覧ください。 slick.js配布元 サンプルページ slickの機能概要 レスポンシブ対応 横幅のブレイクポイントごとにスライドの表示数、スクロール数を変更可 （centerModeではスクロール数は1つで固定） タッチデバイス対応 IE8以上で動作（スライド数のドットの色は変化しない） 縦カル

画像をブラウザやDOM要素の背景いっぱいに表示し、フル表示の画像にかっこいいエフェクトを加えたり、スライドショーを設置できるjQuery/Zeptoのプラグインを紹介します。 アニメーションやオーバーレイが数多く用意されており、画像にスタイリッシュなエフェクトを加えることが簡単にできます。 Vegas 2 Vegas -GitHub Vegas 2は以前紹介した1の単なるバージョンアップではなく、大きく進化しました。 ※1との互換性はありません。 Vegas 2のデモ Vegas 2の使い方 Vegas 2のデモ デモでは写真画像をブラウザや要素の背景としてフル表示し、スライドショー機能を伴ったコンテンツを楽しめます。 Doc -Animations 表示方法にも多彩なエフェクトが用意されています。 Vegas 2の使い方 Step 1: 外部ファイル 当スクリプト・スタイルシートとjQu

Webで調べると、ol要素を丸数字で実装する時はspanとか①②③とかを使うしかないように思えますが、クリーンなHTMLで数値文字参照を使わずに、丸数字を実装するスタイルシートのテクニックを紹介します。 対応ブラウザはすべてのモダンブラウザで、IEは8+です。

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?