WEBサイト制作の勉強

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

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

Webクリエイター能力認定試験 エキスパート サンプル問題をやってみる

www.sikaku.gr.jp http://school.yachin29.com/web-ex/start.html UIデザインが勉強出来るUIデザインクイズサイト「can't unsee」 cantunsee.space

フォントサイズremについて

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

最新のcssについて

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

vs codeのdiff機能を使う

diff機能を使ってvs codeで差分をチェック vs codeのcompare機能を使って、ファイルの差分を簡単にチェック出来ます。 shift+control(command)+pでコマンドパレットを出し「Compare」と入力すると、下の画面のように選択できるので実行する。 この中の「クリ…

githubでissue管理をする

Git

基本的にサイト制作はチームで行うのですが、未経験者であっても「githubのissue」機能を使って、チーム開発を見据えたサイト制作をしてみましょう。 gitの初期化 git init gitのユーザー登録 git config --global user.name "Sample" git config --global u…

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

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

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

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

ブランチモデル

Git

masterブランチ メインブランチ。基本的には現在サーバーで運用されているデータ。このブランチに直接コミットはせずに下のdevelopブランチをマージするだけ。 developブランチ 開発用メインブランチ。細かい修正がコミットされる featureブランチ 機能追加…

Sassを@importから@useや@forwardに置き換える

Sassの公式サイトで今後はDartSassを使うことが推奨とされると発表がありました。それに伴ってSassの初期の方から実装されていた@importが廃止予定になりました。とても便利な機能ですが、CSSの@importと重複しているため、SassなのかCSSなのか一見してわか…

フリー素材集

画像編 burst.shopify.com girlydrop.com https://www.pexels.com/ja-jp/ https://o-dan.net/ja/ イラスト編 illust-navi.com www.linustock.com tyoudoii-illust.com loosedrawing.com イラスト・アイソメトリックver isometric.online pulpxstyle.com

Gitのインストールとvs-codeを使ってgithubに自身のリポジトリーを作成

Git

学校のPCの場合、前回のクラスの生徒の設定が残っている場合があるので、まず環境変数を削除しましょう。・「コントロールパネル>システム>システムの詳細設定」 ・「スタートボタン右クリック>システム>システムの詳細設定」 まずは自身のPCに入ってい…

LPの作成・実践編

フェリカテクニカルアカデミーwebサイト制作科の生徒募集用のランディングページの作成 コンバージョン フェリカ公式サイトの見学会申し込みページへのリンクボタンをクリックしてもらう URL:http://www.felica.info/kikin/web/web_form/index.shtml LPのア…

Gitとは

Git

Gitとは? Git(ギット)とは、バージョン管理を行うためのツールのことです。複数人でプログラミングやコーディングを行う場合、ソースコードを効率的に管理・運用する必要があります。「誰がどのファイルのどの部分を修正したのか?」や「リリース予定の機…

cssのクラス命名規則

小・中規模でのサイト制作では、それほど明確なcss設計をしなくても問題は起こりませんが、大規模案件になるとhtmlもcssもかなりの量になり、css設計がないと保守性が悪くなってしまったり、意図しないところに影響してしまったりします。また、複数人で制作…

自身のスキルを丁寧に説明する

自身のスキルを他者に説明する事は、そのスキルを身に付けるのと同じくらい重要であり、意味のある事です。 「htmlとcssが出来ます」だけでは無く、この6ヶ月で具体的にどういう事を学んだか、どういう事が出来るようになったか、をしっかりと説明しましょう…

Sassを使ってレスポンシブサイトをコーディングしてみる

素材 http://school.yachin29.com/0815test.zip レスポンシブサイトを作る際にはメディアクエリーが必須ですが、これもSassのmixinを使う事で見通しの良い記述に変える事が出来ます。 またブレイクポイントやメインのカラーコードを変数化する事で効率化が図…

htaccessを使った動的配信

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

スクロール位置に応じてナジゲーションボタンにカレント表示をする

ある程度スクロールする必要がある縦長ページでは現在地を示すようにナジゲーションボタンにカレント表示をした方が良いでしょう。 各要素の「.offset().top」の位置を取得し、if文を使い、各要素の開始位置以上スクロールしたら、その要素にaddClassします…

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

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

sassを使ってみる

Sassとは? Sass(Syntactically Awesome Stylesheets)とはcssのメタ言語で、簡単にいうとcssの機能を拡張した高機能版cssといった感じです。 Sassを使うメリット 変数などプログラム的な使い方が可能 メンテナンス性が高い 記述量を減らし、データの圧縮が…

6月15日作業分データ

パーティクルとマウスとか色々ファイル構成 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>svgとparticle</title> <link rel="stylesheet" href="css/style.css"> </head>…</html>

Canvasでパーティクルを表現する

Canvasとは Canvasとは、ブラウザ上に図を描くために策定された仕様です。これまでHTML上で図を表現するためには、GIFやJPEGといったフォーマットの画像を用意する必要がありました。また、条件に応じて表示する図を変化させたり、アニメーションを実現する…

jQueryでのcookieの指定

Cookie(クッキー)とは? Cookie(クッキー)とは、ホームページを訪問した ユーザーの情報を一時的の保存する仕組み、またはそのデータです。ID、パスワード、メールアドレス、訪問回数などが ユーザー情報として保存されます。これによって再訪問したとき…

ポートフォリオ制作の時に参考にしたいサイト

tomoyukiarasuna.com webdesigner-go.com note.com drive.google.com

Googleフォームに自作のCSSを当ててカスタマイズする

以前授業でも使ったGoogleフォームですが、設置も簡単でスプレットシートと紐付けする事でお問い合わせ内容をデータベース化する事も簡単に出来てしまう、とても便利なツールですが、唯一の問題が「自分でCSSをいじれない」事です。特にレスポンシブサイトに…

修了生のポートフォリオ

kuma0911.starfree.jp

background-clipを使ってcssを使って文字で画像を切り抜く

以前、Photoshopでクリッピングマスクを使い、文字で画像を切り抜く加工を行いましたが、css3の「background-clip」と「text-fill-color」を使う事で同じような表現が出来るようになります。 background-clip background-clipプロパティは、背景の適用範囲を…

スマートフォンの時だけ電話番号のリンクを有効にする

スマートフォンやタブレットでウェブサイトを見ている時にボタンをタップすると通話発信ができるようにするためには電話番号用のtelリンクを設定する必要がありますが、一部のスマートフォンではtelリンクを設定していない、電話番号で無いただの文字列もリ…

EFO お問い合わせフォーム最適化

EFO(Entry Form Optimisation)は「入力フォーム最適化」の略で、入力フォームをユーザーにとって使いやすく入力しやすい形に最適化し、入力して内容を送信できるように改善を行う施策のことを指します。 対面でのサービスが難しくなった今日「お問い合わせ…

フルスクリーンナビゲーションの作成

PCレイアウト時にもナビゲーションを隠し、ハンバーガーメニューを付け、全画面で表現をする機会が増えてきました。サイトに合わせた構成をいくつか覚えておきましょう。 yamashita-fruit.com www.lumine.co.jp webdesignday.jp pulpxstyle.com https://twit…