CSS

Tips

モーダル(ポップアップ)が作れるdialogタグとは?【showModal,close,clientX,clientY,backdrop,getBoundingClientRect】

「モーダルやポップアップをサクッと作ることができない」「JavaScriptは簡単なメソッドかライブラリしか使ったことがない」「モーダルやポップアップを要素外をクリックしたときにも閉じれるようにしたい」 本日はそんな方に […]

Tips

CSSのみ!ヘッダー固定でアンカーリンクがずれるを解決【ページ内スクロール、スムーススクロール】

「ヘッダーの固定をすると下の背景と重なってしまう」「ヘッダー固定しながらアンカーリンクさせると思った場所にスクロールされない」「スクロール位置の調整をJavaScriptで書いているけど上手く動かない」 本日はそんな方に […]

Tips

Youtube、Twitterタイムライン、GoogleMapを埋め込む方法

サイトやアプリにSNSを埋め込むのは当たり前になりました。 それぞれ簡単な仕組みで表示させることができるので、主要なSNSについて表示方法を解説していきます。 また動画もあるので必要に応じて活用してください。 Webサイ […]

Tips

はみ出たテキストを(…)省略して表示するCSSのテクニック【text-overflow, overflow, white-space】

ウェブデザインにおいて、テキストがコンテナからはみ出てしまうことはよくある課題の一つです。 Web制作ではブログ記事など長文のテキストを抜粋文のような形で途中で省略して表示する場面がありますよね。 限られたスペース内に多 […]