2022-10-01から1ヶ月間の記事一覧

10月28日作業データ(スニーカーショップ)

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>Sneaker-shop</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <h1>Snea…</h1></header></body></html>

githubでreadmeファイルを作成する

Git

READMEというのは、GitHub等で公開されるソフトウェア(リポジトリ)の説明書きのことです。そのリポジトリーがどういった趣旨の物なのか、しっかりと説明しましょう。 readmeに記載する物 プロジェクトのタイトル プロジェクトの概要説明 プロジェクトのURL…

LPの作成・実践編

フェリカテクニカルアカデミーwebサイト制作科の生徒募集用のランディングページの作成 LPのアウトライン(あくまでも一例) Attention部分のコンテンツ タイトル(ロゴ画像orフェリカテクニカルアカデミーwebサイト制作科) キャッチーなコピーが入ったリード…

LP(ランディングページ)の作成

ランディングページ(Landing Page)とは本来、訪問者が最初に着地する(land)ページという意味合いでサイトのトップページの事をLPと呼んでいましたが、今ではLPというと「訪問者のアクションを誘導することに特化した縦長のレイアウトのページ」のことを…

cssのmotion-pathを使って自由にオブジェクトを動かす

cssのmotion-pathを使う事でオブジェクトを自身で作成したパスに沿って動かす事が出来ます。 caniuse.com

svgで手書き風アニメーション

フォントサイズを画面幅に応じて可変にする

emを使ったフォントサイズ emは親要素のフォントサイズをそのまま継承します。一見すると判りやすいですが構造が複雑になってくると、複利計算されてしまい判り難くなってしまいます。 remを使ったフォントサイズ 次にremを使ったフォントサイズの指定です。…

モダンリセットCSSのress.css

リセットcssには色々な方法があり、どれが1番優れているかは難しいので、自身の必要な用途に合わせて使い分けましょう。 html{box-sizing:border-box;-webkit-text-size-adjust:100%}*,:after,:before{background-repeat:no-repeat;box-sizing:inherit}:afte…

箇条書きのパターン

https://twitter.com/n_seitan/status/1565988372807503872

2022年に適したリセットcssを考えてみよう

coliss.com

スクロールを促すスクロールダウンアニメーション

www.nxworld.net CSSで実装する次のコンテンツへと促すスクロールダウンボタン 10 - NxWorld

タイムラインをサイトに埋め込む

年表や沿革などで使うタイムラインを作ってみましょう。cssのみで作れるシンプルな物のありますが、今回は「CodyHouse Framework」というフレームワークを使ったアニメーションタイムラインを作成してみます。 Vertical Timeline codyhouse.co さらにCodyHou…

新しいcssを使ってみる

ユーザーのアンケート結果からその年のCSSの流行りや動向がわかるThe State of CSS 2020というサイトの中で、今後さらに利用頻度が増していくであろう、新しいプロパティをいくつか試してみましょう。ただ、新しいプロパティはブラウザごとに対応状況が違う…

htaccessを使った動的配信

felica29.starfree.jp 「.htaccessファイル」を使った動的配信 動的な配信 | 検索セントラル | Google Developers スマートフォン利用者を自動的に「スマートフォン版サイト」へ誘導できるよう、「アクセス者の端末に応じて自動でアクセス先を振り分ける機能…

githubの公開リポジトリーを使ってみる

github.com

『Web制作会社年鑑』のフリーダウンロードキャンペーン

毎年恒例の『Web制作会社年鑑2022』のフリーダウンロードキャンペーン。期間限定で無料ダウンロード出来ます。読み物としても面白いし、就活にもめちゃめちゃ役に立つので是非ダウンロードしてみましょう。 今年も『Web制作会社年鑑』のフリーダウンロードキ…

トンマナを合わせたバナー作り

トンマナ とは、「トーン&マナー」の略で、 広告 におけるデザインの一貫性を持たせることを指します。 また、ブランドのイメージカラーとホームページのデザインカラーを合わせる必要があるなど、「 トンマナ 」は企業部 ブランディング においても重要で…