プログラミング 【Astro】Marqueeコンポーネントを実装する
Astroにおいて、Marqueeコンポーネントを実装します。
CSS
プログラミング プログラミング 【CSS】スクロールバーをカスタマイズする
-webkit-scrollbarを設定する。index.html<!DOCTYPE html><html lang="ja"> <head> <meta charset="utf-8"> <title>【CSS】スクロールバーをカスタマイ...
プログラミング 【CSS】マーキーを実装する
divタグにclass属性を指定し、pタグの animation を設定する。index.html<!DOCTYPE html><html lang="ja"> <head> <meta charset="utf-8"> <title>【C...
プログラミング 【CSS】メニューを横並びに配置する
ulタグの display を flex に設定する。index.html<!DOCTYPE html><html lang="ja"> <head> <meta charset="utf-8"> <title>【CSS】メニューを横並びに...
プログラミング 【CSS】ヘッダーをページ上部に固定する
headerタグの position を sticky に、top を 0 に設定する。index.html<!DOCTYPE html><html lang="ja"> <head> <meta charset="utf-8"> <tit...
プログラミング 【CSS】2行目以降の行頭を揃える(ぶら下げインデント)
margin-left と text-indent を設定する。index.html<!DOCTYPE html><html lang="ja"> <head> <meta charset="utf-8"> <title>【CSS】2行目以...
プログラミング 【p5.js】スケッチを画像としてダウンロードする
canvas要素をtoDataURL()メソッドで画像データに変換し、aタグのリンク先のURLに指定することで画像ファイルとしてダウンロードできるようにする。そして、bodyタグの最後の行に以下の1行を追加する。<script src="s...
プログラミング 【p5.js】スケッチをWebページの背景に設定する
style()メソッドでcanvas要素の z-index を -1 に設定する。index.html<!DOCTYPE html><html lang="ja"> <head> <meta charset="utf-8"> <title>...
プログラミング 【CSS】文字を四角い枠で囲む
文字をspanタグで囲み、spanタグのstyle属性で border を指定する。<!DOCTYPE html><html lang="ja"> <head> <meta charset="utf-8"> <title>【CSS】文字を四...
プログラミング 【HTML】CSSを外部ファイルから読み込む
headタグの中に以下の1行を追加する。<link rel="stylesheet" href="style.css">index.html<!DOCTYPE html><html lang="ja"> <head> <meta chars...