マガジンのカバー画像

デイトラWeb制作

49
本
運営しているクリエイター
ren_k0227

DAY29.Sass学習編 CSS設計の基本概念

01.クラスの付け方クラスの付け方をCSS設計から考えていく CSSには色んな書き方ができる 「こうした方がいい感じにCSS作れる」考え方を 先人が体系化して共有してくれていたりする これを一般的にはCSS設計と呼ぶ CSS設計の考え方を押さえておくことで、 効率的かつ管理しやすい形でCSSを作ってくことができる CSS設計には色んな型がある 現時点では考え方だけ押さえておいてもらえたら大丈夫 02.重要な考え方その①1.共通化する部分は共通パーツとして定義 OO

ren_k0227

DAY28.Sass学習編 Sassで書き直し

初級で作ったデイトラ簡易版サイトのCSSを、Sassを使って書き直し 必ず使うもの ・入れ子 ・変数 ・＆記号 ・@mixin 01.Sassをローカル環境で使えるようにする①Sassはそのままだとブラウザで読み込めない Sassで書いた内容をCSSに変換する『コンパイル』という処理が必要 Webページの装飾をするのはあくまでCSS コンパイルによってSassファイルをCSSファイルに変換 変換したCSSファイルを読み込み HTML上で直接Sassを読み込むことはで

ren_k0227

DAY27.Sass学習編 Sassを学習

01.Sassとは構造的にイカしたスタイルシート 「Syntactically Awesome StyleSheets」 の頭文字をとって名付けられた、CSSの拡張言語 CSSをより楽に書くための言語 Sassで書くとベタでCSSを書くより圧倒的に早い Sassの書き方2種類 ①Rubyのようにインデント形式で書いていく『SASS』スタイル ②CSSと同じようにカッコでくくる『SCSS』スタイル 主流は『SCSS』スタイル 02.入れ子1.Sassの入れ子の書き方

ren_k0227

DAY26.JavaScript・jQuery学習編 【調べながら実装】jQuery実践課題②

01.モーダルで画像の拡大表示①コース一覧の画像をクリックすると ②縦横画面いっぱいに薄いグレーの背景ボックスを表示 ③その枠の中心に拡大されたコース写真を表示 ④画面のどこかをクリックすると拡大写真と背景ボックスを非表示 ⑤アニメーションはフェードイン・フェードアウト $(function() { 　$('.course-item a').click(function() { 　　var imgSrc = $(this).children().attr('src'); 　

ren_k0227

DAY25.JavaScript・jQuery学習編 【調べながら実装】jQuery実践課題①

課題に沿ってjQueryのアニメーションを実装 調べれば必ずサンプルコードが見つかるものばかり 「解決する力」を養うため 自分で調べて実装する 自分でjQueryコードを書いて自作 01.ドロワーメニューの実装①コース一覧をクリックすると ②初級・中級・上級のメニューを表示 ③開閉時間の指定は不要 ヒント：表示・非表示や再生・停止を操作するボタンのことをtoggleという $(function() { 　$('.drawer').click(function()

ren_k0227

DAY24.JavaScript・jQuery学習編 jQueryを学ぶ

01.jQueryとはJavaScriptのライブラリ JavaScriptをより簡単に記述できるようにしたもの 主にWebサイトやWebアプリケーションで使用される プログラマーの間だと「jQueryはちょっと古い」 サイト制作・アプリ制作の現場ではまだまだ超絶現役 世界中のホームページの1/3以上を作っている 「WordPress」にもjQueryが採用されている 02.jQueryを使うメリットとJavaScriptとの違い1.短いコードで簡単にかける jQ

ren_k0227

DAY23.JavaScript・jQuery学習編 Web制作初心者のためのjs基礎講座（DOM操作）

01.DOMとはHTMLなどのドキュメントにJavaScriptからアクセスするための仕組み サイトに動きをつけたいときはDOM操作をする Web制作する上で、ゴリゴリ複雑なJavaScriptコードをかける必要はない 「何をやっているのか」が分かって、カスタマイズできる程度の知識は必要 HTMLの階層構造を「ツリー構造」 全てのHTMLデータは一番上の階層から順番に オブジェクトデータとしてまとめられている 全体のHTMLデータが入っているオブジェクトは「docume

ren_k0227

DAY22.JavaScript・jQuery学習編 JavaScriptの基本文法②

01.配列（Array）複数のデータをindexによって管理する 配列（複数形） = [要素0, 要素1, 要素2, …] 0から始まる 1.要素の書き換え 配列名[要素番号] = 値 2.配列の最後尾に要素の追加 配列名.push(値) 3.配列の要素数を調べる 配列名.length 4.要素の最後を削除する 配列名.pop() 5.要素の最初を削除する 配列名.shift() 02.オブジェクト（Object）複数のデータをキー（プロパティ）で管理

ren_k0227

DAY21.JavaScript・jQuery学習編 JavaScriptの基本文法①

01.文字列を表示console.log("") ・文末に；は必要無くなった ・文字列を扱うときは("")か('')で囲う 02.数字の計算四則演算が出来る ・足し算 + ・引き算 - ・掛け算 * ・割り算 / ・余り % ()を使えば優先的に計算できる 算数と同じ 03.変数と定数プログラミングで最も重要な概念である「変数・定数」 データにラベルを付ける 1.変数の定義 let 変数名 = 値 変数名/定数名のルール ・アルファベットと数字で書く ・小文字

ren_k0227

DAY20.ポートフォリオ作成編 ポートフォリオを公開

01.サーバーの契約サーバー ＝ 土地 ドメイン ＝ 住所登録 家 ＝ HTML等のファイル エックスサーバー ・国内シェアNo.1 ・管理画面が使いやすい ・信頼できる安定性と速度 ・使い倒せる大容量（最安プランでも300GB） ・自動バックアップ機能がついている ・WordPressをボタンひとつで簡単にインストールできる ・無料でSSL化（https化）できる ・特典で永久無料のドメインがついてくる 02.サーバーとドメインの紐付け土地と住所名だけがわかっている

ren_k0227

DAY19.ポートフォリオ作成編 ポートフォリオブラッシュアップ②

01.ギャラリーサイトから見せ方のヒントをもらうコーディングやデザインを鍛える一番の方法 『良いものを見てマネする』 いいサイトを多く見て、自分の目を肥やす デザインを探すならPinterest 日本の優れたWebデザインを集めたギャラリー＆リンク集『81-web.com』 『awards』 アップロードされたデザインを世界中のデザイナーが採点 どんなデザインが評価されるのか分かる 02.装飾やデザインを整えてより魅力的なサイトにWeb制作者でも簡単にできそうなデザ

ren_k0227

DAY18.ポートフォリオ作成編 ポートフォリオブラッシュアップ①

01.タイトルタグを設定WebサイトのHTMLタグの中でトップクラスに重要なのが「タイトルタグ」 Google検索結果に表示されるタイトルとしても使われる このサイトはどういったサイトなのか Google検索した人にも分かるようする 02.アイコンを駆使してサイトをリッチにカラーアイコンを使いたい Bootstrapにはないアイコンを探したい 「FLAT ICON」がオススメ 03.画像ファイルを圧縮して軽量化画像ファイルはテキストよりも断然容量が大きい そのま

ren_k0227

DAY17.ポートフォリオ作成編 ポートフォリオ制作③

01.フリー素材の活用海外の画像を探すなら「O-DAN」 ・商用利用可の画像のみ ・32のフリー素材サイトから ・日本語で検索可能 日本の画像がほしい場合は「Photo-AC」 アイコン画像はICON MONO ・色 ・サイズ ・ファイル形式 柔軟に設定可能な無料のアイコン素材サイト 02.ロゴ作成に便利なサービス2つ1.Hatchful ロゴメーカーの中では圧倒的な神サービス いくつかの質問に答えるだけで、自動でオシャレなロゴを生成 2.LOGO MAKER

ren_k0227

DAY16.ポートフォリオ作成編 ポートフォリオ制作②

01.過去のデイトラ生のポートフォリオ例一人ひとり違う見せ方をしている ・自分が伝えたいこと ・表現したい雰囲気 新しく身に着けたスキルをぜひポートフォリオに反映する デイトラの進捗とともにポートフォリオもパワーアップさせる 02.ポートフォリオサイトの作成の流れ①シンプルな構成の参考サイトを元にHTMLとCSSで作成 ②テキストは自分の言葉に置き換える ③画像や写真も自分が所有しているものに置き換える ④より魅力的なサイトになるようにブラッシュアップ ⑤サイト

ren_k0227