webサイト制作の勉強|2019年10月クラス用ブログ

ファリカテクニカルアカデミーのwebサイト制作科の授業解説ブログです。フェリカテクニカルアカデミーは池袋にある求職者支援訓練の学校です。

Google Formにオリジナルのcssを適用させてカスタマイズと自動返信機能を追加

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

vs code でEmmet機能を使う

EmmetというのはHTMLやCSSを効率よくコーディングするためのプラグインで、SublimeText、Dreamweaver、Bracket、vs codeなど様々なエディターやIDE(統合開発環境)で利用することができます。もともとはZen-Codingというものでしたが、その次期バージョンが…

GoogleサーチコンソールとGoogle アナリティクス

Google Search Consoleとは Search ConsoleとはWebサイトの検索結果の状況とそれに付随する情報(Webサイトの改善案・被リンク数・キーワードなど)やGoogleが認識しているページ数、Googleクローラーのクロール状況が把握できるツールです。 Search Console…

cssのdisplay:grid を使ってグリッドレイアウトを作ってみる

CSS グリッドレイアウトは、 表と同様に簡単に段組等が作れ、グリッドレイアウトによって要素を列と行に整列させることができます。 CSS グリッドを使用する事で表で実現するよりもより複雑なレイアウトが可能で簡単に実現できます。またflexboxの場合、多段…

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

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

投稿記事内の最初に使われている画像をサムネイル画像として表示させる

アイキャッチ画像をサムネイルをして表示させる場合 上記のテンプレートタグを使うと、imgタグごと出力されます。 投稿記事内の最初に使われている画像をサムネイル画像として表示させる場合 functions.php function first_post_image(){ global $post, $pos…

wordpressで特定の記事を表示させる

前回の授業では特定の記事を表示させる為に以下のように「query_posts」を使いましたが、現在「query_posts」は非推奨なので、代わりに「get_posts」を使った形に変更しましょう。 「query_posts」の場合 <dl> ID); $recent_class = 'popular_post_box recent-'.</dl>…

新しいスキルを身に着ける

授業も残り3週間になりました。残りの期間はとにかく今まで授業でインプットして来た物をポートフォリオという形でアウトプットしていきます。 けれど、ただ漠然とポートフォリオを作るというのも難しいので、目標となる物(入りたい会社や仕事でやりたい事…

htmlのwordpress化

ステップ1 まずはいつものようにHTMLとCSSでページを作成 /* ヘッダー部分 */ header{ width: 100%; height: 60px; position: fixed; top:0; left:0; z-index: 1000; background:#f9f7e8; display: flex; justify-content: space-between; } h1{ font-size:…

よく使うwordpressテンプレートタグまとめ

ここの多くはwordpressのテキストで既に出て来た物がほとんどですが、よく使うwordpressテンプレートタグをまとめたので使ってみましょう。 ページファイルをカスタムテンプレート化する テンプレート化したheader.phpを呼び出す サイトのURLを表示 使用…

wordpressの公式テーマに子テーマを作ってカスタマイズする

wordpressでサイトを制作する場合、大きく分けると2つの方法があります。 1つは真っ白い状態からオリジナルでテーマを作っていく場合(travel sketch)、もう1つは既存のテーマを自身でカスタマイズしていく方法です。今回は既存のテーマを自身でカスタマ…

OSS(オープンソースソフトウェア)とは?

オープンソースソフトウェアとは、利用者の目的を問わずソースコードを使用、調査、再利用、修正、拡張、再配布が可能なソフトウェアの総称である。 GithubやCodePenのようにソースコードをオープンして共有する、と言う考え方は最近出来た考え方では無くPC…

ポートフォリオのテンプレート

ポートフォリオを作るに当たって、WordPressやBootstrapなどのフレームワークを使用する事も視野に入れておきましょう。 それぞれの長所・短所を理解し、自身にとって最も有効だと思う物を選択する事が大事です。 wordpressのテンプレート ポートフォリオ <…

フィルタリング機能とモーダルウィンドウを使ったギャラリー

複数のjQueryプラグインを使って、フィルタリング機能とモーダルウィンドウを使ったギャラリーを作成しましょう。 複数のプラグインを使うことで、管理すべきファイルの数が多くなるので、気を付けましょう。 参考サイト chiyo-katsumasa.com <html lang="ja"> <head> <meta charset="utf-8"> <title>mix it up</title></meta></head></html>…

配色の基本

webサイトはおおまかに別けるとテキスト・画像・色の3つの情報から成り立っています。 3つの中でも色はユーザーに最初に伝わる情報なので、配色次第でサイトの第一印象が決まってしまいます。 初心者にとって配色は難しい部分ですが、まずは既存のサイトやサ…

ポートフォリオの制作

ポートフォリオ制作でまず自身が把握する事は中に入れるコンテンツの分量です。今までの授業で作ったデータをもう一度見直し、手直しする物は手直して、ポートフォリに掲載する物を決めましょう。 次にwebのポートフォリオを何で作るかを決めましょう。選択…

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

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

githubでissue管理をする

Git

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

xamppでルートパスを使えるようにする

PHP

相対パスと絶対パスに対して、3つ目のパスとしてルートパスというものがあります。 ルートパスとはサーバーのルート(一番上の階層)からみてのパスになります。PHPなどでファイルを呼び出すような時にはこのルートパスが非常に便利です。 しかし、ルートパ…

cssのクラス命名規則

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

photoshopでアセット機能を使ってみる

以前はwebサイト制作のワークフローとして、Photoshopでカンプを作成し、画像を書き出す為に「スライスツールで各画像を切り出す」という作業を行なっていましたが、この「スライスツールで画像を切り出す」という作業が色々と制約があり、とても細かい作業…

第5回実技試験:LPの作成

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

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

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

8の倍数デザイン論とそれに伴ったブレイクポイント

従来、divや余白の大きさはデザインやコンテンツのボリュームによってマチマチですが、その都度値を決めるのでは無く、ある指針(ガイドライン)に沿って決める場合がよくあります。 その中でも、 「8の倍数デザイン論」と呼ばれる、全ての物を8の倍数でデザ…

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

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

SELECT文とwhere句を使って検索機能を実装してみる

PHP

今回はoutput.phpに検索枠を作り、その枠に入力した値で検索できるようにしましょう。 <form action="out.php" method="post"> ID:<input type="text" name="id"><br> 性別:<input type="text" name="gender"><br> 地域:<input type="text" name="area"><br> <input type="submit" value="検索"> <input type="button" value="リセット" onClick="resetBtn()"> </form> リセ…

sassの便利な機能を使う

入れ子(ネスト)にできる style.scss header { width: 100%; height: 100px; background: #B6E3F4; h1 { text-align: center; } } style.css header { width: 100%; height: 100px; background: #B6E3F4; } header h1 { text-align: center; } メデイアクエ…

ブランチモデル

Git

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

プラグインを使ったwordpressのデプロイ

以前、バックアップを取って、sql文を使ってwordpressのデータを移動させましたが、今回はプラグインを使ってデプロイさせます。ja.wordpress.org このプラグインは検索 & 置換操作中に発生する、あらゆるシリアライゼーションの問題も解決します。 とても簡…

求職者支援訓練 【はじめてのwebサイト制作科】 2020年4月開講クラス

www.felica.info東京池袋のフェリカテクニカルアカデミーでは、只今2020年4月16日より 開講する「はじめてのwebサイト制作科」の受講生を募集しています。 600時間を超える講座を無料で受講出来、プロになるために必要なスキルを身につける事が出来ます。ま…