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

ファリカテクニカルアカデミーのwebサイト制作科の授業解説ブログです。

第6回実技試験 既存サイトのトレース

課題1 corp.chatwork.com 課題2 www.fujiya-peko.co.jp 課題3 stylebread.com 課題4 www.lumine.co.jp 課題5 dining-grip.com 課題6

input要素にcssを適用させる

フォームで使用するinputやtextareaなどの要素は他の要素に比べて、ブラウザやデバイスのデフォルトのスタイルシートが多く指定されています。 特にこだわりがなければこのまま使用したり、多少手を加えるだけということもありますが、異なるブラウザやデバ…

Illustratorでギンガムチェックのパターンを作る

20x20pxの正方形を4つ作り2x2に並べ、好きな色をつけ、(※左下のブロックは必ず塗りを白色に設定する)スウォッチに登録します。 好きなサイズでオブジェクトを作り、上で作ったパターンを適応させる 斜めの線を入れたい場合 斜めの線を作り、斜め線をスウ…

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

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

Illustratorチュートリアルまとめ

パターンの作成 helpx.adobe.com パスファインダーの使い方 uxmilk.jp design-trekker.jp バナーの作成 blog.digimerce.jp イベントポスターの作り方 helpx.adobe.com チュートリアルまとめ note.mu アイデア探し www.pinterest.com

Googleフォームに自身のcssを適応させる

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

フォームのパーツにアニメーションを追加する「pretty checkbox」

チェックボックスやラジオボタンにclassを加えるだけで、さまざまなデザインのチェックボックスとラジオボタンが実装できるラリブラリ「pretty checkbox」。 角を丸くしたり、カラーをつけたり、アニメーションをclassを加えるだけで簡単に実装できます。 lo…

既存サイトをトレース|ポカリスエット公式サイト

既存の物を模写するというのは昔からデザイン上達のコツとしてよく取り上げられます。デザインを細かく観察して自分で再現してみることで、自身のパターンを増やし、実践でも活かしてみましょうpocarisweat.jp note.mu Xdを使って既存サイトをトレースする …

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

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

cssで作るメガドロップダウンメニュー

メガドロップダウンメニュー 最近よく見かけるメガドロップダウンメニュー。特にコーポレートサイトなど情報量が多いサイトでは、リンク先のページに飛んでからさらにそのページの中から目当てのコンテンツを探さなければならない、といった手間がかかります…

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

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

wordpressで固定ページをカスタムテンプレート機能を使って作成する

自分で作った「page-about.php」をカスタムテンプレート機能を使って固定ページのaboutページと紐付けします。 カスタムテンプレート機能 カスタムテンプレート機能を使うには「page-about.php」の冒頭に必要な記述をします。 特定カテゴリーの投稿記事を呼…

求職者支援訓練 webサイト制作科 2019年10月開講クラスを募集中

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

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

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

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

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

cssの正規表現を使って要素を絞り込む

divなどの要素に複数のクラス名を付けてcssでコントロールする、という事自体は以前からやって来ましたが、クラス名が増え過ぎてしまうと、逆にコントロールし難くなってしまいます。 そういう場合に正規表現を上手に使う事でコントロールしたい要素を絞り込…

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

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

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

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

sassを使ってみる

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

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; } メデイアクエ…

バナーの作成

helpx.adobe.com

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

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

レスポンシブイメージの設定

img要素を画面幅によって切り替えたい場合、以前はJavascript等でwindow幅によって画像のファイル名を変える、などの方法が取られていましたが、html5.1,で策定された「レスポンシブイメージ」を使う事で手間のかかるCSSやJavaScriptを必要とせず、htmlのみ…

スニペットを使ってホバーアニメーションを付ける

最近はcss3のアニメーションだけで色々な事が出来るようになっています。特にホバー時のように小さいアニメーション(マイクロインタラクション)であればcssのみで充分表現できます。 とは言え、css3のアニメーションをゼロからスクラッチで書いていくのは…

スクロール関連のプラグイン

Animate On Scroll Library michalsnik.github.ioスクロールすると、コンテンツが色々なエフェクトで表示される。 <html lang="ja"> <head> <meta charset="utf-8"> <title>Animate On Scroll Library プラグイン</title> <style> html,body { margin:0; padding:0; } body { background:url(img/main.jpg) no-repeat center ce</meta></head></html>…

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

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

Canvasを使ってグラフが作れる「Chart.js」

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

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

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

Google品質評価ガイドラインを読む

SEO対策にはサイトが必ず自動的に掲載順位 1 位になるような秘訣は無く、とにかく自身のコンテンツの品質を高める事が結果として検索結果の上位表示に繋がるという事をしっかりと理解しましょう。 www.dentsudigital.co.jp 低品質のページに該当されやすいペ…

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

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