Japanese

「CSSを知ってはいるけれど、どうも苦手で・・」 Webページを作成するうえで、避けては通れないのがCSS。 少し書くのは問題ないけれど、 ページ数が増えてくるにつれ、ぐちゃぐちゃになりがちなのもCSSの特徴で。 最近ではレスポンシブ対応・モバイルファーストという事もあいまって、 さらにややこしさが増しています。 CSSの設計をかじってみるも、 つい『Boostrap』などのCSSフレームワークに頼ってデザインする事になり、 結果的に、いつも他のサイトと同じようなデザインになってしまう。。 『Boostrap』よりも微調整がしやすくて、 CSSよりも簡単に書ける方法はないのだろうか・・・ そんな需要を知ってか知らずか颯爽と登場し、 近年人気急上昇中のCSSフレームワークが、 『tailwindcss』です。 『Bootstrap』を筆頭とするこれまでのCSSフレームワークと違い、 厳選されたCSSプロパティ集になっていて、 簡単に微調整でき、さらにカスタマイズしやすい事がウリになっています。 PHPの人気フレームワーク『Laravel』でも、 『Laravel8』から『Bootstrap』->『tailwindcss』へ移行された事で、 今後さらに人気が高まってくることが予想されます。 この講座では、 CSSを知ってはいるけれどデザインが苦手な僕のような方を対象に、 デザインが苦手でもそれなりにきれいなサイトをつくれるような方法・コツを ギュッと詰め込んだ方法を解説しています。 ■更新情報 2021/12 ver3追加 ■講座の内容 section1〜6までは tailwindcss ver2 で解説をしています。 ・section1  tailwindcssの基本 　HTMLのおさらい/ボックスモデル/margin/padding/width/height/hover:/focus:/font/ 　color/shadow/border/ring/opacity/background ・section2  レイアウト周り 　display/BoxAlignmentModel/flexbox/grid/position/z-index/overflow/visibility/container 　レスポンシブ対応(モバイルファースト)　 ・section3 サンプル集 　SVG/Flexboxのレイアウト集/ボタン/カード/フォーム ・section4 その他の機能 　グラデーション/トランジション/アニメーション ・section5 カスタマイズ方法 　npmを使ったインストール方法/tailwindcss.config.js/色追加/グーグルフォント追加/ 　@apply/@layer/preflight(normalize)/purge ・section6 Laravel講座で扱ったページの解説 ・section7 tailwindcss ver3

▼ご注意ください storeGが公開している講座は、講師によるナレーションではなく、全てプロのナレーターによるナレーションを採用しています。そのため、ナレーションにこだわりがある方は、ひとまず無料視聴動画をご確認いただき、受講をご検討いただければ幸いです。 新着情報 [NEW] 特典レクチャーの「WEBデザイナーの仕事は将来、AIに奪われるのか？」で 9.最新のテスト結果  (GPT-4V) 2023/10/10 を追加しました。 ※ChatGPTのコーディングレベルがかなりアップしています！【追加】WEBデザイナーの仕事は将来、AIに奪われるのか？【7】【8】※2023年7月上旬版 ツールのバージョンアップに伴い、バージョンを戻す方法についての、テキストレクチャーを追加しました。レクチャー名：【注意】次のレクチャーに進む前にお読みください 特典動画を追加しました！ ※シリーズWEBデザイン講座共通の特典動画となります。 WEBデザイナーの仕事は将来、AIに奪われるのか？について、気になっている方も多いのではないかと思います。そのような疑問に対する答えとなるような動画を作成しましたので、是非、ご視聴ください！ Udemyのシステムにより自動で生成された字幕が表示されるようになりました。※字幕内容は自動生成のため、正しい日本語に置き換わっていない部分があります。予めご了承ください。 エディタソフトの Brackets が復活！※詳細については、学習の進め方と学習する環境 ※受講前にご確認くださいのレクチャーをご確認ください。 本講座のサポートについてのレクチャーを追加しました。 特典セクションに以下のレクチャーを追加しました。 Visual Studio Code のインストール テーマの変更 ファイルの保存と設定 リアルタイムプレビュー 本講座の特徴 最新のカリキュラムを導入 WEB制作業界は今大きな変革期を迎えているため、これから先も通用するWEB制作技術を身につけるためには、最新の情報やツールをもとにした学習カリキュラムが必要です。このような背景から本講座では、実践的なWEBデザイン(制作)を学ぼうとする方に向けて、最新の学習カリキュラムをご用意しました。 新しいCSSモジュールの「CSSグリッドレイアウト」の基礎について学習する HTML5 (HTML文書)と CSS3 (スタイルシート)の仕様にもとづくWEBページを作成(コーディング)する Media Queries (メディアクエリ) CSS Grid Layout (グリッドレイアウト) JavaScript ( jQueryのプラグイン )で「スライダー」を実装する JavaScript ( jQueryのプラグイン )で「ドロワーメニュー」を実装する レスポンシブWEBデザインに対応したWEBページを作成する 画面サイズに応じて最適化されたデザインを表示させる「レスポンシブWEBデザイン」ページを作成します。 PC用ページ タブレット用ページ

【アメブロを整えて集客力をあげたい！】 【スマホからもPCからもどこから見られても綺麗！】 【理想のお客様を引寄せるメインビジュアルを作りたい！】 ＜＜　この講座はこんな方のための講座です　＞＞ 自分のターゲットとするお客様に発信を届けやすくしたい人。 お客様を引寄せるビジュアルを作って、理想のお客様と出会いたい人。 メインビジュアルの作り方、ツールの使い方を学びたい人 集客動線を整えたい人。 枠囲みなどで、ブログを読んでくれる人に伝わりやすくしたい人。 アメブロをホームページのように活用出来たらいいと思っている人。 パソコンで見られても恥ずかしくないアメブロを作りたい人。 法人さんからお仕事が欲しいと思っている人。 ＜＜　講座の特徴　＞＞ アメブロのTOP画像、メニューバーの設置方法はもちろん、 　　プロのWEBデザイナーがいつもやっている 　　TOP画像を設置する前に考えておくべき 　／ 　「ブランディングにつながる写真選び」 　「集客動線の作り方」 　「画像の作り方」 　＼　 　を、分かりやすく、実際の作業を通して実践できるようになっています。 ●以上のワークを取り入れ、見て学ぶだけではなく、講座にしたかって作業を進めることで、アメブロカスタマイズをひとりで最後まで完成させることができます。 プロが作った４つのメインビジュアルテンプレートを用意。それを真似て素敵なデザインを作ることができます。 画像制作が初めての人、アメブロを使う初心者のかたでも大丈夫。それぞれの基礎的な使い方説明もレクチャーしています。 スキマ時間で見ることが可能！レクチャーは項目ごとに細かく分けているので、必要なところを繰り返し見ながらアメブロカスタマイズを行うことができます。