WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

2022年8月クラス

CODEPENを使ってコードを掲載させる

https://codepen.io/ CODEPENとは? 「CODEPEN」とは、HTML・CSS・JSなどのソースコードを保存・公開・共有できるWEBサービスです。他の人が作ったソースをその場で編集できたり、プレビューで確認出来、動作確認などにも使えて非常に便利です。ソースをブロ…

10月25日の作業データ(スマホサイト)

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>

10月18日の作業データ

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要素=表全体を示す要素です。表の大き…

10月4日の作業データ

レストランのシングルページ ポイント ヒーローヘッダー pcからハンバーガーメニュー(js) スライダーの実装(js) お知らせ(js) 動画の埋め込み モーダルウィンドウの実装(js) SNS(twitter)の埋め込み GoogleMapの埋め込み Google formの実装 スムーススクロー…

jQueryとCSS3を使ったアニメーション

HTML5 × CSS3 × jQueryのハイブリッドアニメーション 最近のWebアニメーションはスマホで表示する事も考慮し、動きの軽いアニメーションが求められています。その為には単一のスクリプトではなく複数のスクリプトを合わせる必要があります。 jQueryの特徴の1…

ヒーローヘッダーの設定

最近、よく見かける「1枚画像」を画面全体に表示させているようなフルスクリーンレイアウト。 「ヒーローヘッダー」と呼ばれています。 ヒーローヘッダー(Hero Header)とは、ウェブサイトのファーストビューに全画面の画像を使用するなど、巨大なイメージ…