Flexboxを使った便利な小技

かゆいところに手が届く!Flexboxを使った便利な小技

Flexboxを使ったちょっとした小技や、ハマりがちなポイント
とその回避例を紹介します!

画像とテキストを互い違いに表示

横並びにした画像が伸びるのを防ぐ

フッターを最下部に固定表示

参考文献:Webクリエイターボックス
(かゆいところに手が届く!Flexboxを
使った便利な小技)

デザインは第一印象が大切!

デザインは第一印象が大切!5秒でできる3つの
デザインチェック方法

大切な「第一印象」。どのようにチェックすればいいのか、
考えていきましょう!

ぼかしテスト

グレースケールテスト

5秒間テスト

テスト後の改善策

 

 

参考文献:Webクリエイターボックス
(デザインは第一印象が大切!5秒で
できる3つの
デザインチェック方法)

jQueryコーディングの基本的なことからなど

jQueryコーディングの基本的なことからプラグイン化
までの注意書き(Webデザイン)

jQuery コーディング 目次

jQueryの一番小さな基本形
jQuery のセレクタはCSSでお馴染みのものばかり!
要素に「何か」をするメソッド
プログラムの動くきっかけ … イベント系メソッドとイベントハンドラ
ちょっと寄り道 … 予備知識 ? DOMとは?
イベントハンドラと自己参照変数 this
ひとつの処理が終ったら、次の処理を実行する ? コールバック
それぞれの要素に対して処理を実行する ? each()メソッド

ちょっと寄り道 … DOM要素とjQueryオブジェクト
this の中身は記述場所によって違うので気をつけよう!
アコーディオンを作りながら復習してみよう!
ちょっと寄り道 … 変数 this の中身は?
アコーディオンの汎用化に挑戦!
プラグイン化に挑戦!
オプションを設定できるようにしてみよう!

参考文献:Web Design RECIPES
jQueryコーディングの基本的なことからプ
ラグイン化
までの注意書き(Webデザイン)

初心者向けHTMLCSSのコ―ディング

初心者向け!HTML/CSSのコーディング手順をイチからしっかりと

きちんと構成を考えてコーディングを始めないとレイアウト崩壊の危機…!今回は完成したデザインをHTML/CSSでコーディングしていく第一歩目の手順を紹介します。

1. ファイル、フォルダーを作る
2. レイアウトをメモに書き出す
3. 基本のHTMLと head 内を記述
4. HTMLでレイアウト部分のマークアップ
5. CSSでレイアウト部分のスタイリング
6. レイアウト部分のレスポンシブ対応
7. 各パーツのHTMLマークアップ+CSSスタイリング

参考文献:Webクリエイターボックス
(初心者向け!HTML/CSSのコーディ
ング手順をイチからしっかりと)

 

 

Webサイト制作のはじめかた

これからWebサイトの制作をしたいけど、何から勉強したら
いいの?っていう人のためのガイド

Web制作の学習フロー 目次

Web制作の学習フロー 目次

Webサイトの骨組み ? HTML
Webサイトのデザイン担当 ? スタイルシート
HTML から CSS を読み込む
ブラウザについて知ろう!
Webサイトを作成するときに使うツール
ちょっと寄り道 … グラフィックをつくるには?
レンタルサーバーで公開!
HTML + CSS の次に挑戦したい ? Javascript

jQuery を勉強しよう!
Javascript でできること ? 例)Web API
クライアントサイドとサーバーサイド
サーバーサイド ? PHPとMySQL に挑戦!
サーバーサイド用のツール
効率化を考えよう!
その他トレンド … というか、時代的なもの
まとめ

参考文献:Web Design RECIPES
これからWebサイトの制作をしたいけど何か
ら勉強したらいいのっていう人のためのガイド