ちょっと珍しい写真素材の時間がやってきました。 今回は、建物や物件の写真が商用でも無料で利用できる素材です。 物件数は9108棟！ 写真は40,000枚以上で、思わず自分が前に住んでいたとこがないか探してしまいました。 物件写真.net 建物の写真に著作権が発生することを知らない人は、意外と多く感じます。 参考: 著作権・肖像権について、写真やイラストなどの素材を安全に使うために知っておきたいこと 物件写真.netではそういった問題を解消すべく、すべての人が自由に使用できる物件写真素材を扱っており、不動産業界だけでなく、広告の素材やイラストの背景などにも無料で利用できます。 利用にあたっては、完全無料で商用利用可。クレジット表記の義務無しで、登録も不要です。詳しくは、下記ページをご覧ください。 初めての方へ -物件写真.net どんな建物・物件の写真素材があるか見てましょう。 写真は、3つ

This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.

春ですね、いや、夏の匂いを感じる人もいることでしょう。 フロントエンド担当、ザワです。 今回は、フロントエンドエンジニアの私が日常的にチェックして情報を得たり、困ったちゃんの時にお世話になっている主なサイトをご紹介します。 フロントエンド系記事 CSS-TRICKS https://css-tricks.com/ CSS関連といえばこのサイトではないでしょうか。サイト名もカッコイイですし。CSSでお困りの際に検索すると、大体ヒットしてきます。CSSのTips系の記事や、最新のプロパティに関する記事などが掲載されるので、フロントエンドならマストでチェックしておきたいサイトです。 HTML5Experts.jp https://html5experts.jp/ Web技術に関する最新動向、エキスパートによる見解などが見所のメディアサイトです。最新の技術に関してプロ中のプロ、いわゆるロープーの人

こんにちは、フロントエンドエンジニアのいなばです。 最近何件かフォームのバリデーションの実装について相談される機会が続いたので、 社内勉強会の資料を作ったついでに記事にもしてみました。 今回は、大きく分けて下記2点を満たすフォームを作ってみたいと思います。 不正な入力値のとき、エラー内容がリアルタイムに表示される 各項目の入力内容により、送信ボタンの非活性化 / 活性化が切り替わる 最近では当たり前になりつつある、エラーの内容がその場で確認できて、項目のバリデーションがすべて通らないと送信ボタンが押せないフォームです。 基本方針 HTML/CSSでできることはHTML/CSSでやる HTMLでできないことをJavaScriptでカバーする HTML5からフォームのバリデーションに関する機能が拡張されたため、使えるものは使ってなるべく楽に実装することを目指します。 フォームを構成する要素 ざ

こんにちは。フロントエンドエンジニアのつっちーです。 2017年4月12日、ついにWindows Vistaのサポート終了しましたね。これによってInternet Explorer 9のサポートも終了（※1）となりました。CSSアニメーションも、display:flexもやっと遠慮なく使える！（※2） ということで今回は、クロスフェード式のスライドショーを、IE9を切り捨てることでよりシンプルに実装してみましょう。 ※1 Windows　Serverを除く ※2 接頭辞-ms-は必要 今回つくるスライドショー まずは完成した状態を確認してみましょう。 See the Pen 1702-completed by ligdsktschy (@lig-dsktschy) on CodePen. 一定時間ごとに画像がクロスフェードするスライドショーです。演出としてズームの効果も加えてあります。 ち

Mac小技・裏技・初心者Macのショートカット・作業効率化Macでの作業効率アップ！「初心者」が覚えておくべきMacショートカットまとめ2017年5月15日1 @JUNP_Nです。Macでの作業効率をあげるためには「ショートカット」を覚えることが一番の近道。Macを使う上で、"初心者向け"の基本的なショートカットをまとめてご紹介。これで仕事が2倍速になるかも!? Macに限ったことではありませんが、パソコンの初心者と中級者をわける1つのポイントに「"ショートカット"を使いこなせるか」という点があります。 いちいちマウス(トラックパッド)を操作して、メニューを選択〜、右クリック〜、といった操作をしているよりも、キーボードからショートカット1発でサッと済ませられることがたくさんあります。 この記事では、"Macを使い始めたばかり"という超初心者の方が覚えておくと仕事が捗るショートカットをご紹介

一時期、多くのサイトで導入され大流行した jQuery プラグイン［Lightbox］の使い方を紹介します。 皆様もうご存知でしょうけれど、念のために動作のサンプルを以下のURLに置いておきます。 画像をクリックすると背景が暗くなり、指定された画像がズームして再表示されます。 Lightbox：サンプル・デモ まずは公式サイトより、［Lightbox］のデータ一式をダウンロードしてきます。 Lightbox：ダウンロード ダウンロードした zip ファイルを展開すると、いくつかのフォルダとファイルが解凍されます。 基本的に、使用するのは「js」フォルダの中にある［lightbox.js］と、「css」フォルダの中にある［lightbox.css］、それと「img」フォルダの中の、ベースとなる画像４点（close.png、loading.gif、next.png、prev.png）になります

こんにちは。 今回は本のようにページをパラパラめくる事ができるjQueryプラグイン「turn.js」！です。 画像を本のようにページをパラパラめくるような機能を実装するのにjQueryプラグイン「turn.js」を使ってみたので紹介したいと思います。 ※当サイトはアフィリエイト広告を利用していますが、当サイトが独自に作成した記事であり、第三者から依頼を受けたものではありません。

[jQuery]audio要素とjQueryと画像を使ってオーディオの再生・停止 2016/05/21 最近の案件で、サイト上で音楽を流したいという要望がありましたので、jQueryを使って自分なりに調べて作ってみました。 本当はmp3以外にもoggやwavファイルもある方が良いようですが、最新のブラウザだとどのブラウザでも大丈夫そうだったので、mp3だけにしてます^^; サンプル ※画像をクリックすると音がなります。 再生・停止 設置方法 最初にボタンになるタグに「clicked」とクラス名をつけています。ボタンをクリックすると「clicked」のクラス名があれば、削除して、play()メソッドで音楽が再生され、「clicked」のクラス名がなければ、「clicked」のクラス名を付けて、pause()メソッドで停止するようにしています。 同時にcssで「soundBtn」のbackgr

scaleでは、負の値が設定できます。 x軸でマイナス1を設定すると、あら不思議。 左右反転させることが出来ます。 ぼくは業務でもかなりの頻度で使っています。 rotate(180deg)でもできるけど… 左右対称の画像の場合、rotate(180deg) で180度回転させることでも反転させられます。 .flip-horizontal { transform: rotate(180deg); } ただし、こちらはあまりおすすめできません。 画像の中心がずれている場合、きれいに左右反転させることができないのです。 これは transform-origin: 50% 50% を指定しても解決できません。 ですので、画像の反転は transform: rotate(-1, 1) がおすすめです。 上下反転するには もし上下反転させたければ、scale(1, -1) とy軸に設定すればいいのです

position:fixedを使ってヘッダを固定した場合 ページ内リンクの位置がヘッダの高さ分ずれてしまいます。 ヘッダを固定する案件が増えてきましたので覚書です。 CSSで調整する方法と、JavaScriptで調整する方法があります。 ヘッダの高さ：100px ■HTML <div id="header"> ヘッダーがはいります </div> <div id="content"> <a href="#link01">なんとか</a> <div name="link01" id="link01">かんとか</div> </div> CSSで調整する padding-topでヘッダの高さ分ずらして、margin-topでマイナスの値をいれるとうまくいきます。 margin-top:-100px; padding-top:100px; ■CSS #header { width: 100%; m

ブロック要素を左寄せ・中央寄せ・右寄せする方法の概要です div・p・ul・li・dlなどのブロック要素を左寄せ・中央寄せ・右寄せするときはwidthとmarginを使います。 中央寄せのmargin-right: auto; margin-right: auto;をしっかり覚えましょう。 ブロック要素を左寄せや右寄せしたり、左右に並べるときはfloatを使うときが多いのでmarginはあまり使いません。 まとめ！ 左寄せは、ブロック要素にwidth(幅)を指定してmargin-right: auto; 中央寄せは、ブロック要素にwidth(幅)を指定してmargin-left: auto; margin-right: auto; 右寄せは、ブロック要素にwidth(幅)を指定してmargin-left: auto;

1文字ずつ文字色を変える、文字単位でのCSS適用方法HTMLに書いた文字をCSSで装飾する際に、1文字ずつ異なる文字色で表示されるよう指定する方法を解説。HTMLの特定の要素内に書かれた文字列を、JavaScript（jQuery）を使って文字単位に分解して個別の要素でマークアップすれば、CSSのnth-child疑似クラスなどを使うことで1文字ずつ個別のスタイルを適用できます。1文字ずつ異なる色でカラフルに表示したい場合に便利。 文字単位で異なるCSSを適用し、1文字ずつ色やスタイルを変える方法 HTMLに書いた文字の色をCSS（スタイルシート）で指定する際には、ある要素に含まれる文字全体の色を一括指定するのではなく、1文字ずつが異なる文字色で表示されるように指定できると便利な場合があります。例えば下図のようにです。もしこのような文字単位での装飾が指定できれば、見出しをカラフルに装飾した

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

クリックして内容が表示されるボタンと、マウスを乗せて内容が表示されるボタンがあるとします。私はクリックよりマウスを乗せる方が気軽におこなえると思います。クリックはひと手間多いですし、クリックして別のページに移動したら面倒だと思うと躊躇してしまいます。 ですので、自分でサイトを作る場合、できるだけマウスを乗せて開くようにしています。しかし、タッチデバイスの場合、マウスを乗せるという動作がないのでクリックで開くようにしないと仕方ありません。 そこで、jQueryを使ってオンマウスでもクリックでも開くボタンを作ってみます。PCの場合はオンマウスで、タッチデバイスの場合はクリックという感じです。レスポンシブウェブデザインに便利だと思います。 ボタン1つの場合 まずは、HTMLですが、特に問題はないと思います。aがボタン、divが現れる部分になります。 <div id="hover-click">

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? Webエンジニアでも最低限のSEO知識を持っておきたい ferretやferretOneといったウェブマーケティングのメディア、ツールを開発、運営している株式会社ベーシックで働いており、近々ECサイトphocaseにて本格的にSEO施策を行うので、勉強がてらエンジニアが覚えておくべきだと思ったSEO周りの知識をまとめました。 この記事も書いていたら長くなってしまったので知らない部分をピックアップして読んでいただければと思います。 実装方法やSEO施策の詳細は貼ってあるリンクだけではなく、 別途Googleで検索するなどして複数の意見をイ