2022年8月クラス
https://codepen.io/ CODEPENとは? 「CODEPEN」とは、HTML・CSS・JSなどのソースコードを保存・公開・共有できるWEBサービスです。他の人が作ったソースをその場で編集できたり、プレビューで確認出来、動作確認などにも使えて非常に便利です。ソースをブロ…
index.html <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>モバイル幅でサイトを作成する</title> <link rel="preconnect" href="https://fonts.googleapis.com"> </link></meta></meta></meta></head></html>
index.html <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>モバイル幅でサイトを作成する</title> <link rel="preconnect" href="https://fonts.googleapis.com"> </link></meta></meta></meta></head></html>
テーブル table要素を使うことで、表を作成することができます。 表内の行とセルは、table要素内に配置するtr要素とtd要素(th要素)で示します。 caption要素は、表のキャプション(タイトルや説明)を表します。table要素=表全体を示す要素です。表の大き…
レストランのシングルページ ポイント ヒーローヘッダー pcからハンバーガーメニュー(js) スライダーの実装(js) お知らせ(js) 動画の埋め込み モーダルウィンドウの実装(js) SNS(twitter)の埋め込み GoogleMapの埋め込み Google formの実装 スムーススクロー…
HTML5 × CSS3 × jQueryのハイブリッドアニメーション 最近のWebアニメーションはスマホで表示する事も考慮し、動きの軽いアニメーションが求められています。その為には単一のスクリプトではなく複数のスクリプトを合わせる必要があります。 jQueryの特徴の1…
最近、よく見かける「1枚画像」を画面全体に表示させているようなフルスクリーンレイアウト。 「ヒーローヘッダー」と呼ばれています。 ヒーローヘッダー(Hero Header)とは、ウェブサイトのファーストビューに全画面の画像を使用するなど、巨大なイメージ…