| 未経験から転職を成功させた！駆け出しデザイナーのめっちゃいいポートフォリオまとめ
| イケてるWebデザインで作られたポートフォリオサイト20選まとめ | マイナビクリエイター
2024年3月29日
ショーゴさん 中級編 コーディング実例
実例① ユアコーディング
実例② ユアコーディング Ｂａｓｉｃ認証→ ishii／ishii-141
2024年3月20日
2024年3月6日
2024年3月6日
| お子様に最適！楽しく学べるタイピング練習サイト | ロジクラ！
| Google FontsのNoto Sans JPの使い方【反映されないを解決します】｜しょーごログ
2024年3月1日
2024年3月1日
※【あなたもやってる】Web制作の実案件やスクール課題でよく指摘されるミスと解決方法を徹底解説！｜しょーごログ
2024年2月16日
１行で書こう！backgroundのショートハンド記述 2024年4月17日
※ライブコーディングAdvancedにfigmaカンプを追加しました。 2024年2月14日
※WINDOWSの方用の教材ファイルをアップしました。 2024年1月31日
｡・ﾟ・ ライブコーディング講座 BASIC ｡・ﾟ・。｡・ﾟ・。｡・
(まずは取っ掛かりから)
解説
◆ リセットCSS
【2023年版】おすすめのリセットCSS（reset.css）3選【CDNのコピペあり】
ライブコーディング講座 Advanced ｡・ﾟ・。
( css設計とscssを学ぶ )
◆ ちずみさん
解説
◆BEM
◆SCSS
。・。｡・ﾟ・。 ライブコーディング講座 SPECIALIST ｡・ﾟ・。
( サイトに動きをつける)
◆ ショーゴさん中級
コーディング実例
ライブコーディング講座 スペシャリスト② ｡・ﾟ・。
| ユアコーディング② Ｂａｓｉｃ認証→ ishii／ishii-141
◆ 中級編応用 (牧場サイト)
※ほぼ中級編と同じですが、牧場サイトでのどかなデザインです。
お好みでこちらを選択されてもよいかと思います。
コーディング実例
長野県茅野市の農園 | 蓼科ごとう農園
id→user-111
パスワード→user-111
｡・ﾟ・。ライブコーディング講座 ワードプレス編 ｡・ﾟ・。
FTP講座
◆アップロード
ある程度作品ができたらまずは無料サーバーを契約してアップしてみましょう。
◆サーバー
おすすめの学習書籍
◆バックエンドエンジニアのすすめ
| 未経験・1年目のWeb/ITエンジニアに必読の書籍17選 – YouTube
ワードプレス講座
■ヒューマンの映像授業
admin
UtpnNv4K2ySx@3k@UvDL2vCk
■ポートフォリオ講座の生徒さんへ
各セクションを切り替えながら確認するテーマのダウンロードはここから
kasio
hINFjQeSR^7NpTmsYEU(ux^d
kasio
hINFjQeSR^7NpTmsYEU(ux^d
パソコン内にワードプレス専用をつくろう。 Local
ワードプレスを機能拡張しよう add_theme_support
オリジナルテーマ作成時に役に立つプラグイン
■ Yoast Duplicate Post
■ Show Current Template
投稿でphpを使うとき(urlの出力など)
【コピペOK】WordPressでプラグインを使わずに人気記事を表示する方法
Contact Form 7内で自作ショートコードを呼び出す | RishunTrading
｡・ﾟ・Git 講座 ｡・ﾟ・。｡・ﾟ・。
| SourceTree（Windows）と GitHub の連携手順 #GitHub – Qiita
｡・ﾟ・。｡mac講座 ｡・ﾟ・。｡・ﾟ・。｡・
(MAC WIN を使いやすくする)
◆便利ツール MAC
■初期設定
■入力
| 【Mac】意外と便利！Controlキーのショートカットキー！【作業効率爆上がり！】
| Macの日本語入力状態で、英数キー2回押しでアルファベット変換させる
■ファインダー
■アクセシビリティー
画面の拡大
スクリーンショット
ビデオ録画
｡・ﾟ・。｡WINDOWS講座 ｡・ﾟ・。｡・ﾟ・。｡・
◆便利ツール WINDOWS
|クリボー Cliborを入れとけ! クリップボード履歴を表示・保存するフリーソフト! | ヨッセンス
・ﾟ・。 VSコード講座 ｡・ﾟ・。｡・ﾟ・。｡・
(vsコードを使いやすくする)
以下の手順で VSコードをどんどん使いやすくしよう!
◆ リンク集
| VScodeの設定（MDNを無効にする、日本語表記にする） | リリイログ
| VSCodeでダブルクォーテーションの中の文字列を一発で選択したい #VSCode – Qiita
| VS Codeで選択範囲をHTMLタグで囲むショートカットキーを設定する
| 【Visual Studio Code】開始タグから閉じタグまでを一瞬で選択できるショートカットキー #HTML5 – Qiita
| Web制作コーディング案件着手前に確認しておくべきこと【トラブルを防ぐ】｜しょーごログ
| 【VSCode】よけいなものを消し去ってコードに集中しよう【ミニマリスト】 – Kurusugawa
| VSCodeでインデントのスペース数を変更する #VSCode – Qiita
| 【Visual Studio Code】コマンドからVS Codeを起動できない場合 (Mac編) #VSCode – Qiita
【松木さんへ】VSCodeでカッコの色がつかないとき
| 個人設定とプロジェクト設定の説明 VSCodeにおけるsettings.jsonの優先度について / Cursorも対応 #初心者 – Qiita
| VSCodeでインデントのスペース数を変更する #VSCode – Qiita
“liveSassCompile.settings.autoprefix”: [
],
“liveSassCompile.settings.formats”: [
{
“format”: “expanded”, // 出力されるCSSの形式。”expanded”は通常の読みやすい形式。”compressed”は圧縮された形式。
“extensionName”: “.css”, // 出力されるファイルの拡張子。通常は.css。
“savePath”: “~/../css/” // .scssファイルからの相対的な出力先のフォルダを指定。nullだと同階層、’/’はルートディレクトリを意味する。
}
],
| vscodeでopen with live serverの規定ブラウザ変更法
| 【コーディングが爆速に！】ユーザースニペットとは？【Visual Studio Code】
ﾟ・。｡・ﾟ・。figma講座 ｡・ﾟ・。｡・
(figmaの基礎を習得→webサイトのデザインができるようになるっ！)
◆ 参考書(まずはこれをやりましょう！)
| 参考書これからはじめるFigma Web・UIデザイン入門 –
| Figmaで大きな画像を貼ったら縮小されて困ったときに見る記事 #Design – Qiita
◆フォント
| 【Figma】フォントの追加方法とフォントの変更・置き換え方法 – tagnote
◆ プラグイン
テキストを縦書きにする方法とプラグイン「Vertja」の使い方
◆印刷物にもつかえる
| Figmaで名刺をデザインするための豆知識 – takanorip blog
◆パワポ代わりにもなる
◆その他
｡・ﾟ・。デザイン養成講座 ｡・ﾟ・。
■もくもくトレース
(ひとまずこちらでツールを使う体力をつけましょう。)
バナー (1 週間に7トレースしましょう)
チラシ (1 週間に1トレースしましょう)
■自分で考えて制作をしよう
| バナーデザインお題10個【ポートフォリオ掲載OK】作成の練習にも◎
■デザイン界のすごい人
佐藤可士和
■色彩
■その他
| ヒューマンアカデミー／通学／デザインワークス講座講座 – 社会人向け資格情報サイトBrushUP学び
■イラストレーター
Illustratorを使うとき、手放せないスクリプト（2021更新版）｜DTP Transit 別館
もう完璧だと思うバナーをさらに良くしている動画(圧巻・・💦)
■イラスト
・ﾟ・より高度なCSS講座 ｡・ﾟ・。｡・ﾟ・。
教材
| 【html/CSS】幅(width)を親要素に合わせる方法
コーディングの教科書デザインカンプ
nth-of-type()を使って1〜6ある中の3〜5までを指定するとき
:nth-of-type(n+3):nth-child(-n+5)
nth-childのof構文でより高度な指定ができるようになったのでnth-of-typeとの違いを改めて整理してみる #CSS – Qiita
・ﾟ・クローム講座 ｡・ﾟ・。｡・ﾟ・。
タブ周りのシートカット
| chromeで開いたタブのURLをまとめてコピー&ペーストできる拡張機能、「Copy All Urls」の使い方 : ビジネスとIT活用に役立つ情報（株式会社アーティス）
・ﾟ・JS(jQuery) ｡・ﾟ・。｡・ﾟ・。
| 動くWebデザインアイデア帳 | 動くWebデザインアイディア帳
・ﾟ・その他 ｡・ﾟ・。｡・ﾟ・。
| (386) 【初心者向け】アニメーションの作り方【Adobe AnimateCC講座】 – YouTube
| 【CSS設計】FLOCSS(フロックス)で保守性の高い記述を極める！ – 株式会社TANE-be｜大阪にあるWebサイト制作
| さあ、才能(じぶん)に目覚めよう 最新版 ストレングス・ファインダー2.0
| デザインの構成要素とは？6つの基本要素と4つの原則をわかりやすく解説 | WEB集客ラボ byGMO（GMO TECH）
| ヒートマップとは？活用方法からおすすめのツール6選まで解説！
| ヒューマン 講座 HTML+CSS+JS – Google ドキュメント
| chromeで開いたタブのURLをまとめてコピー&ペーストできる拡張機能、「Copy All Urls」の使い方 : ビジネスとIT活用に役立つ情報（株式会社アーティス）
| (20) XユーザーのカシオPCスクールさん: 「Chromeの便利拡張機能「Copy All Urls」 アドオンの設定画面でちょっとの一手間で、 「url+記事タイトル」
、？
｡・ﾟ・。グループワーク ｡・ﾟ・。
(最新) マインドマップを使っての説明
｡・ﾟ・。ワードプレス講座 ｡・ﾟ・。
｡・ﾟ・。クラウドソーシング｡・ﾟ・。
| 主婦の在宅ワーク・内職の求人・バイト・お仕事情報ならママワークス
| 【課題】架空水族館TOPページデザイン(デザインカンプ) | Tanimoto Eisuke
| デザイナーのためのペットボトルのラベル印刷・制作方法やテクニック
| 無料性格診断テスト、性格タイプ詳細説明、人間関係およびキャリアのアドバイス | 16Personalities
キャンバ
業務委託→正社員
面接担当の人、ポートフォリオ見てちゃんとできる人かどうかを判断する