【CSS3】サイズがわからない画像の縦横比を維持したまま表示する方法【object-fit】 - QiitaDeleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
jQueryとCSSでスクロール時に画像を下からふわっと表示させる方法 + ネイティブ javascriptでの書き方も掲載！
スクロールしていくと画像やコンテンツがふわっと表示されるWEBサイトってカッコイイですよね。動きがあると読者の目を引くだけでなく、WEBサイトがリッチになるのでぜひ取り入れたいエフェクトです。 僕もこのサイトに実装してみたので、その方法を書いていきたいと思います。単純にjQueryとCSSで作成する方法だけでなく、ネイティブjavascriptで書く方法も合わせてご紹介します。 デモはコチラ↓ ふわっと表示（フェードイン）させる仕組み 仕組は至って簡単です。 まず、ふわっとさせたい画像やコンテンツなどの要素にCSSのopacityを使って透明にします。さらに下から出てくるようにtransformで少し下の方に設置。 そしてある一定のところまでスクロールされた時に、jQueryやjavascriptを使ってCSSの値を書き換えて、要素をふわっと表示させるだけの簡単な仕組みです。 実装方法 そ
【HTML＋CSS】ウインドウ幅に合わせて画像サイズを変化させる方法 [ホームページ作成] All About
レスポンシブWebデザインとは、画面サイズなどの閲覧環境に応じてWebページのレイアウトや装飾が自動調整される作り方のことです。記事「レスポンシブWebデザインの簡単な作り方」でも解説しました。特に、画像サイズを画面幅に自動で合わせる方法は、Webサイトのスマートフォン対応目的でも需要が高いでしょう。 例えば、下図のWebページをご覧下さい。ページ上部に見える大きなバナー画像の表示サイズは、ブラウザのウインドウサイズをある程度小さくすると、描画領域の横幅に合わせて自動的に縮小されるデザインになっています。 今回はこのような、画面サイズ（ブラウザのウインドウの横幅サイズ）に合わせて、縦横比率を維持したまま画像の表示サイズを変化させる方法をご紹介いたします。レスポンシブWebデザインを採用したページではもちろん、そうでない場合でも、画面サイズに合わせて画像サイズを自動で拡大縮小させたい様々な場
![【HTML＋CSS】ウインドウ幅に合わせて画像サイズを変化させる方法 [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/1d9230bd03ef83fbdd879610f125c72468e6b161/height=288;version=1;width=512/https%3A%2F%2Fimgcp.aacdn.jp%2Fimg-a%2F1200%2F900%2Faa%2Fgm%2Farticle%2F4%2F0%2F0%2F6%2F3%2F0%2F1640285675%2Ftopimg_original.jpeg)
大きな背景画像を使った魅力的なWebサイトを作ろう
2014年9月9日 CSS, Webデザイン 以前このブログで背景に動画を使ったWebサイトの作り方を紹介しましたが、やはり動画を準備するのは少しハードルが高いと感じる人もいますよね。そこで今回は導入しやすく印象に残りやすい、大きな背景画像を用いたWebサイトの作り方を紹介します！ ↑私が10年以上利用している会計ソフト！ 背景に大きな画像を使うメリット・デメリット 大きな背景画像のメリットは、なんといってもその迫力です。言葉を使わずとも、そのWebサイトを通じて伝えたいイメージをストレートに表現できます。その写真が高画質で、クオリティが高いほど印象にも残りやすいので、近年海外を中心に多くのサイトで用いられている手法です。 しかし、いくつかの注意点をおさえておかないと、どんなに素敵な写真であっても効果が半減してしまいます。ひとつは画像が大きければ大きいほど、ページの読み込みに時間がかかって
[CSS]半透明のパネルを使って、画像にキャプションをかっこよく表示する12種類のスタイルシート -InContent
InContentの使い方 実装はとても簡単です。 Step 1: 外部ファイル 当スタイルシートをhead内に配置します。 <head> ... <link rel="stylesheet" href="css/incontent.css" type="text/css" /> </head> Step 2: HTML 画像のimg要素とキャプションのspan要素をdivで包みます。 <div class="pic"> <img src="img/01.jpg" class="pic-image" alt="Pic"/> <span class="pic-caption bottom-to-top"> <h1 class="pic-title">Pic Title</h1> <p>Some description or text.</p> </span> </div> 用意されているcl
身につけておきたいWebサイト高速化テクニック #3｜画像形式の基礎知識 | DevelopersIO
こんにちは、ご無沙汰しています。 Web担当の野中です。 前回の第2回「検証ツールとそもそもHTTPって何だ編」から少し時間が経ってしまいました。 というのもテクニックを紹介するために予想以上の予備知識の説明と検証・調査が必要になり、さらにどう順序立てて解説すべきか悩み時間がかかってしまいました。 ちなみに第2回では、Webサイト高速化に関連してくるHTTPについて基本的なことを紹介しています。 より詳しくHTTPについて解説したCodezineさまに寄稿している連載も是非チェックしてみてください。 本題 さて、今回から実践編ということでフロントエンド側のWebサイト高速化対策の１つ、画像の最適化について紹介します。 初学者向けに細かく基本的なことまで解説しますので、記事を3つに分けます。 画像最適化1回目の本記事では、画像に関する基礎知識について紹介します。 未だにWebサイト高速化の具
LightBoxはここまで進化したよ「VisualLightBox」:phpspot開発日誌
jQuery Image Lightbox: Prime Time DEMO LightBoxはここまで進化したよ「VisualLightBox」 CSS3等を使ってかなりオシャレに進化したLightBoxが実装できます。LightBoxはもう８年ぐらいまえに登場して、今オリジナルをみるとなんか古い感じがするということで時の流れを感じます クリックするとオシャレに拡大。 テーマが大量にあって好みのデザインを選びたい放題 Windowsっぽいスキン。LightBoxが出たのってポップアップを禁止するツールが多く出てきたことが背景にありますが、ページ内ポップアップされていて面白い。 関連エントリ スワイプできるLightBox実装jQueryプラグイン「Swipebox」 今こそ知っておくLightbox風プラグイン20+
CSS3を使ってできる画像まわりのエフェクトやスタイリング18
CSS3を使った画像のエフェクトやスタイリングについて、思いつく限り一挙にまとめてみました。 たくさん画像を扱うサイトなどを作る際に、CSSでできる表現のカタログとして使ってもらえたらと思います。 ※ 2/24 「2. めくれた風」を書き忘れていたので追記しました 目次 1. シャドウ 2. めくれた風 3. トイカメラ風トンネル効果 4. カラー調整 5. 回転 6. 角丸 7. 楕円のフレーム 8. 円のフレーム 9. 三角形フレーム 10. 重なった風 11. ぼかし 12. フェード（シャドウ編） 13. フェード（グラデーション編） 14. 反射 15. リボン 16. 差し込んだ風 17. フレームだけを傾ける 18. 半透明フレーム まとめ ※ 実際の表示はこちらから確認できます。 ※ この記事で掲載しているCSSは、シンプルにするためにベンダープリフィックスを付けていません
透過性をウェブデザインに取り入れる方法
CSSや画像などを使用して、透過性をウェブデザインに取り入れる方法をCSS-Tricksから紹介します。 Spectrum Theme どんなウェブデザインでも最終形では基本的に目の錯覚を巧みに利用しています。Photoshopをはじめ他のグラフィック用のアプリケーションで透過性のエフェクトを作成し、フラットな画像として書き出すことができます。 Photoshopで透過性のある画像を作成するには、レイヤーの不透明度、塗りの度合い、ブレンドモードなどで可能です。 Opacity <textarea name="code" class="css" cols="60" rows="5"> transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; } </te
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Illustfolio - イラストポートフォリオサイトを一瞬で作れるTumblrテーマ