はてなブックマーク

Webサイトを閲覧していると、テキストが右から左に流れていく帯（バナー）を見たことがある方が多いかと思います。 主に新着情報やお知らせ、セールの情報を告知する際に使われていますね。 もともとHTMLにはテキストを自動的にスクロールさせるmarqueeというタグがあったのですが、現在は廃止され非推奨になりました。 この機能は廃止されました。まだいくつかのブラウザーで動作するかもしれませんが、いつ削除されてもおかしくないので、使わないようにしましょう。 マーキー要素 (廃止) – HTML: HyperText Markup Language | MDN そこで今回の記事では、CSSのみで横に流れるテキストを実装する方法を紹介していこうと思います！ サイト上で新着情報などを効果的に告知したいという方は、ぜひ参考にしてみてください。

jQueryにはslideUp(),slideDown(), slideToggle()といったメソッドがあります。 これらを使用すると、少ないコードで要素をスライドしつつ表示/非表示にできるので、すごく便利ですね。 しかし案件によっては、jQueryを使いたくない場合があるかと思います。 そこで今回の記事では、jQueryのslide系メソッドをJavaScriptで実装する方法を紹介します！ 「jQueryを読み込みたくないけど、slide系のメソッドは使用したい」という方は、ぜひ使ってみてください。

レスポンシブ対応をする中で、文字サイズの最大値・最小値を設定できたらいいなと思ったことはありませんか？ 横幅の最大値や最小値を指定できるmax-width min-widthのように、max-font-sizeやmin-font-sizeがあればすごく便利ですよね。 残念ながらそういったプロパティは現状ありませんが、CSSのcalcとvwという単位を使えば、最大・最小フォントサイズを設定することができます！ 今回の記事では、このcalcとvwの合わせ技の使い方を紹介しようと思います。 IE11を含め主要ブラウザ全てでサポートされていますので、安心してお使いいただけます。

WEBページのファーストビューに画面いっぱいに要素を表示したいとき、heightやmin-heightに100vhを指定することが多いですよね。 PCだと問題なく表示されますが、スマホで見るとアドレスバーとツールバーの高さ分下にはみ出してしまうという現象が起こります。 これを解決するために、JavaScriptでアドレスバーとツールバーを除いた100vhの値の取得方法を解説します！ DEMOページも用意しましたので、実際の挙動もチェックしてみてください。

ランディングページのナビゲーションやブログページの目次など、ページ内の特定の場所にリンクを設定することは多いですよね。 ページ内リンクは、デフォルトだとリンク先の場所まで一瞬でジャンプしてしまいますが、滑らかにスクロールさせたい場面が多いかと思います。 今回の記事ではJavaScriptを使用して、ページ内リンクをスムーズにスクロールさせる方法を紹介していきます。 ページ内リンクをクリックすると、対象位置までスムーズにスクロールするjQueryやライブラリは使用せず、素のJavaScriptで実装IE11やSafariにも対応させる

Webページ上に「ノートのような罫線つきのデザインを実装したい！」という方もいるかと思います。 単純に線を引くだけならborderプロパティを使えばよいのですが、ノートの罫線のように何本も線を引く場面には向いていません…。 そこで今回の記事では、CSSのグラデーションlinear-gradient()を使用して、ノート風の罫線を引くデザインの実装方法を紹介します！ この方法を使うと、文字の長さや改行に合わせて何本も線を引くことができるので、オススメです。 また、文字サイズ、罫線の色、背景色などのカスタマイズ方法も解説しますので、是非参考にしてみてください。

Glassmorphism（グラスモーフィズム）は、2021年に入ってから注目されている新しいデザインのトレンドです。 Mac OSのBig Surにも採用されており、半透明で背景がぼやけて見える磨りガラスのようなエフェクトが特徴的ですね。 PinterestやDribbbleなどのサイトでも、グラスモーフィズムを採用したUIデザインが多くみられるようになってきました。 Glassmorphism – Pinterest 今回の記事では、グラスモーフィズムのエフェクトをCSSで実装する方法を紹介していきます！

WEBサイトのレスポンシブ化をする上で、スマホなどの画面幅が狭いデバイスには収まりきらないコンテンツがあることが多いです。 特に情報量の多い表（テーブル）などは、スマホの画面幅に収めるのはなかなか難しいですよね・・・。 そういった場合、CSSのoverflowプロパティで横スクロールを可能にすることができますが、ユーザーからするとスクロール可能か判断できず、見落としてしまいがちです。 そこで今回の記事では、横スクロール可能な要素にヒントを表示するJavaScriptライブラリ「ScrollHint」を紹介します！ このライブラリを導入することで、スクロール可能な要素には以下のようなヒントが表示されるようになります。 横スクロール可能な要素をアイコンとテキストで知らせてくれるので、ユーザビリティの向上にもつながりますね。