WEBサイト制作の勉強

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

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

2022年10月クラス

モバイル幅でwebサイトを作成する

今ではpcでもspでも最適に表示されるレスポンシブサイトは当たり前で、最近はむしろspでの表示を優先させ、pc時は画面いっぱいの固定背景(多くはbody要素を固定)を置き、モバイル幅の中にコンテンツを入れるようなspファースト、もしくはspオンリーのサイ…

svgアニメーションの作成

See the Pen q-chan by yachin29 (@yachin29) on CodePen. tympanus.nethttp://gardenstudio.com.br/gardenstudio.com.brjakearchibald.com SVGとは? SVG【 Scalable Vector Graphics 】とは、XMLベースの2Dベクター画像記述言語。2001年9月にW3C勧告として…

高解像度ディスプレイへの対応

Retinaディスプレイ Retinaディスプレイの特徴は画面解像度の高さにある。iPhone 4の画面サイズは前モデルのiPhone 3GSと同じ3.5インチのままであるが、Retinaディスプレイの搭載によって解像度は320×480ピクセルから640×960ピクセルに、つまり倍になってい…

12月2日作業データ(シングルページのレストランサイト:PCレイアウト完成版)

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="stylesheet" href="css/style.css"> </link></meta></meta></meta></head></html>

フリー素材を編集してロゴ画像を作成する

ベクター形式のロゴデータであれば、文字などを自由に編集できるので、場合によってはフリー素材などを使って編集してみましょう。 photoshopvip.net 素材のダウンロード https://yachin29.com/Vector-Vintage-Logo-Designs.zip

レストランサイトの作成

要件定義 レストランサイトの作成 ページ構成:シングルページ ページ内容 メインビジュアル(3枚の画像をスライド) ナビゲーションメニュー(sp時はハンバーガーメニュー) ロゴ(svg) ニュース記事の更新(ajaxを使って外部データを読み込む) 動画の埋…

タッチアイコンの設定方法

スマートフォンの場合、PCのようにブラウザーから検索してWebサイトに行くよりも、ホーム画面に登録してあるアプリからワンタッチでWebサイトなりWebサービスを利用するケースがほとんどです。 なので、スマートフォンサイトを制作する場合には必ずスマート…

11月24日の作業データ(ハンバーガーメニューとLightbox)

lokeshdhakar.com jonsuh.com <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="stylesheet" href="css/style.css"> </link></meta></meta></meta></head></html>

jQueryについて

jQuery(ジェイクエリー)とは、ウェブブラウザー用のJavaScriptコードをより容易に記述できるようにするために設計された軽量なJavaScriptライブラリである。ジョン・レシグが、2006年1月にリリースした。様々な場面で活用されており、JavaScriptライブラリ…

ハンバーガーボタンの実装(11月18日)

<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="stylesheet" href="css/hamburgers.css"> <style> #box{ width: 300px; height…</link></meta></meta></meta></head></html>

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

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

11月10日の作業データ(コーポレートサイト:レスポンシブ対応)

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>

レスポンシブ演習

作例 PCレイアウト SPレイアウト cssは外部参照で記述すること cssに適切なリセットをかける事 767px以下はモバイルレイアウトになるようにメディアクエリーを設定する flexプロパティを使ってコンテンツを横に並べる 画像を自身で用意しトリミングしフルー…

11月4日作業データ(コーポレートサイト:PCレイアウトまで)

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>

11月4日作業データ(ホバーアニメーション)

<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> <style> div{ width: 200px; height: 200px; background-color: coral; margin-bottom: 20px;…</meta></meta></meta></head></html>

10月27日作業データ(日本の四季)

トップページ <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>

divの使い方と1カラムレイアウト

divタグ ・・ひとかたまりの範囲として定義する divタグはそれ自身は特に意味を持っていませんが、divで囲んだ範囲をひとかたまりとして、スタイルシートを適用するのに用います。 今回はh1やpをdivの中に入れ、カラムレイアウトを作っていきます。 カラムと…

レスポンシブ基礎

レスポンシブデザインとは? レスポンシブWebデザイン(Responsive Web Design)とは、PC、タブレット、スマートフォンなど、あらゆるデバイスに最適化したWebサイトを、単一のHTMLで実現する制作手法です。ブラウザーのスクリーンサイズを基準にCSSでレイア…