記事一覧

デイトラ中級Day5~6 : jQuery実践編

今回はjQuery実践編ということで、デイトラから下された指令通りに実装していくカリキュラムでした。 ※ちなみに、僕が超絶初学者だった頃「実装」という言葉がいまいちピ…

けけ丸
2年前
1

デイトラ中級Day4 : jQueryの基礎

chapter1 : jQueryとはjQueryとは、JavaScriptでできることをより簡単な記法で実現できように設計されたJavaScriptライブラリです。 jQueryのおかげで、プログラミングの…

けけ丸
2年前

デイトラ中級Day3 : DOM操作

chapter1 : DOM操作とはDOM(Document Object Model)操作とは、HTMLなどのドキュメントにJavaScriptからアクセスするための仕組みのことを言います。 Webブラウザは、Webサ…

けけ丸
2年前

デイトラ中級Day2:JavaScriptの基本文法②

chapter1 : 配列配列とは複数のデータを管理する時の考え方です。 例えば複数の点数を管理する時にはこのような書き方をします。 const scores = [89, 56, 72, 91, 90] …

けけ丸
2年前
1

デイトラ中級Day1:JavaScriptの基本文法

chapter1 : JavaScriptとはJavaScript(以下JS)はフロントエンドで使う言語の一つで、HTMLやCSSに動きをつけたりすることができます。 最近ではJSを使ってアプリケーション…

けけ丸
2年前

【Day15〜20】自分のポートフォリオを作ってみる

ポートフォリオといえるほど大それたものではありませんが、デイトラを受講し始めてたった14カリキュラム(11日間)で簡易的ながらも自分でWebページを作れるようになるのは…

けけ丸
2年前

【Day14】またまた簡単なWebサイトをBootstrapで作ってみた(画像あり)

今回もBootstrapで簡単なWebサイトを作ってみました。 だいたい2時間くらいかかりましたね。 慣れてる人だったら1時間とかで作っちゃうんでしょうけど僕の場合はまだまだ…

けけ丸
2年前
1

【Day13】Day12で作ったページを解説なしで作ってみた感想

明けましておめでとうございます。 2022年も引き続きよろしくお願いいたします。 さて、今日のカリキュラムはきのう解説付きで作ったWebページを自分の力で作ってみようと…

けけ丸
2年前

【Day12】Bootstrapを使って簡単なWebページを作ってみた感想

今日はBootstrapを使って簡単なWebページを作ってみました。 アウトプットというより感想を述べたいと思います。 どんなWebページを作ったのか気になる方もいるかもしれま…

けけ丸
2年前
1

【Day10】【Day11】Bootstrap

chapter1 : BootstrapとはBootstrapはCSSのフレームワークです。 「フレームワーク」が初耳の人は書きブログを読んでみてください。 今までBootstrapの存在は知ってたんで…

けけ丸
2年前

【Day8】【Day9】実際にWebページを作ってみた感想

chapter1 : Webページを作ってみた感想Day8〜Day9にかけて4時間くらいで簡単なWebページを作ってみようという課題だったのですが、今日はたんまりと時間があったので2日分…

けけ丸
2年前

【Day7】レスポンシブデザイン

chapter1 : レスポンシブデザインまずはレスポンシブデザインについて説明します。 「なんか聞いたことある言葉だけどよくわかんないや」という人も一定数いるのではない…

けけ丸
2年前

【Day6】Flexbox / Emmet / クラス名

chapter1 : FlexboxWebデザインを勉強している初学者がどうしてもぶち当たりがちな壁が、横並びの鬼門「float」の概念です。 僕も以前、某プログラミングスクールで学習し…

けけ丸
2年前
1

【Day5】ヘッダーを作る

chapter1 : 実際にコードを書き始める前の注意点index.htmlの書き始めは「!」からの「tab」を押して以下のコードを表示させるお話をDay3でしました。 ただこれだけだとCSS…

けけ丸
2年前

【Day4】環境構築

プログラミングをするにあたって環境構築は避けては通れない道なんですけど、HTML/CSSの環境構築に関してはさほど難しいものではないのでさくっと構築しちゃいましょう。 …

けけ丸
2年前
4

【Day3】CSS

chapter1 : まずはCSSが反映されるように準備エディタ(僕はVScode使ってます)に index.html / style.css / あとついでにimgのファイルをそれぞれ作る。 『vscodeって何?…

けけ丸
2年前
2

デイトラ中級Day5~6 : jQuery実践編

今回はjQuery実践編ということで、デイトラから下された指令通りに実装していくカリキュラムでした。

※ちなみに、僕が超絶初学者だった頃「実装」という言葉がいまいちピンと来なかったので似たような境遇の方のために説明しておくと、「実装」とは【機能をつける】みたいな意味合いです。

デイトラから下された指令は3つ。
(今回に限ってはjQueryライブラリの使用は禁止で、自力で書くものとする)

①メ

もっとみる

デイトラ中級Day4 : jQueryの基礎

chapter1 : jQueryとはjQueryとは、JavaScriptでできることをより簡単な記法で実現できように設計されたJavaScriptライブラリです。

jQueryのおかげで、プログラミングの初心者でもフロントエンド開発に参加しやすくなったそうです(昔を知らんからなんとも言えない)。
とにかくjQueryは初心者にやさしい、とても有用なJavaScriptライブラリだそうです。

もっとみる

デイトラ中級Day3 : DOM操作

chapter1 : DOM操作とはDOM(Document Object Model)操作とは、HTMLなどのドキュメントにJavaScriptからアクセスするための仕組みのことを言います。

Webブラウザは、Webサーバから受け取ったHTMLを解析し、DOMと呼ばれるデータ構造に変換。そしてCSSを解析して得られたスタイルをDOMに紐づけてレイアウトが計算され、最終的にユーザーの画面に表示さ

もっとみる

デイトラ中級Day2:JavaScriptの基本文法②

chapter1 : 配列配列とは複数のデータを管理する時の考え方です。

例えば複数の点数を管理する時にはこのような書き方をします。

const scores = [89, 56, 72, 91, 90]

・ひとつひとつの点数のことを「要素」という。
・左から順にインデックスという番号が振られている。
89→0, 56→1, 72→2, 91→3, 90→4
※1からスタートではなく、0から

もっとみる

デイトラ中級Day1:JavaScriptの基本文法

chapter1 : JavaScriptとはJavaScript(以下JS)はフロントエンドで使う言語の一つで、HTMLやCSSに動きをつけたりすることができます。
最近ではJSを使ってアプリケーションを作ったりも出来るそうです。

「フロントエンドって何?」という方は以下の記事を見てみてください。

JSを実際に書いて練習したい方は以下のURLに飛ぶだけで記述できます。

※コードがいっぱいに

もっとみる

【Day15〜20】自分のポートフォリオを作ってみる

ポートフォリオといえるほど大それたものではありませんが、デイトラを受講し始めてたった14カリキュラム(11日間)で簡易的ながらも自分でWebページを作れるようになるのは感動です。

ちなみに今回作ったのはこんな感じのやつです。

本当はもっと全体的なデザインや・トップの部分・画像・動き等にこだわりたかったんですけど、デイトラにはスピード感を持って取り組みたいので、11日間で学んだことを容量だけ抑え

もっとみる

【Day14】またまた簡単なWebサイトをBootstrapで作ってみた(画像あり)

今回もBootstrapで簡単なWebサイトを作ってみました。

だいたい2時間くらいかかりましたね。
慣れてる人だったら1時間とかで作っちゃうんでしょうけど僕の場合はまだまだ未熟なので時間がかかってしまいます、、

3日前に初めてBootstrapに触れたときは
「かなり使いづらいなこれ、、」
と思っていたのですが少し慣れてきて1番実感してることがあります。

それはエディタを使ってるときに「i

もっとみる

【Day13】Day12で作ったページを解説なしで作ってみた感想

明けましておめでとうございます。
2022年も引き続きよろしくお願いいたします。

さて、今日のカリキュラムはきのう解説付きで作ったWebページを自分の力で作ってみようという内容でした。

なので本日もカリキュラムで学んだことのアウトプットというよりも感想寄りの記事になります。

正直なところBootstrapはまだまだ使いこなせません。
そのためBootstrapを使えば通常よりもスピーディにW

もっとみる

【Day12】Bootstrapを使って簡単なWebページを作ってみた感想

今日はBootstrapを使って簡単なWebページを作ってみました。
アウトプットというより感想を述べたいと思います。

どんなWebページを作ったのか気になる方もいるかもしれませんが、規約的に多分公開したらだめなので割愛させていただきます。

Bootstrapを使ってみた感想なんですけど、たしかに便利なんですよね。
便利なんですけど初心者ながら、Bootstrapを使うことにそんなにメリットを

もっとみる

【Day10】【Day11】Bootstrap

chapter1 : BootstrapとはBootstrapはCSSのフレームワークです。
「フレームワーク」が初耳の人は書きブログを読んでみてください。

今までBootstrapの存在は知ってたんですけど特に勉強したことなかったんですよね。

でも実際に使ってみるとまあ凄い。
通常だとコーディングするときはCSSに書かないといけないですよね。
でもBootstrapを使えばHTMLに直接コー

もっとみる

【Day8】【Day9】実際にWebページを作ってみた感想

chapter1 : Webページを作ってみた感想Day8〜Day9にかけて4時間くらいで簡単なWebページを作ってみようという課題だったのですが、今日はたんまりと時間があったので2日分進めました。

やってみた感想としては
「もっとコードを書いて慣れるしかない。」
ですね。

いきなり何も見らずには作れなかったので一度声に出しながら模写コーディングをしました。

「これを書いたらこうなる」
「こ

もっとみる

【Day7】レスポンシブデザイン

chapter1 : レスポンシブデザインまずはレスポンシブデザインについて説明します。

「なんか聞いたことある言葉だけどよくわかんないや」という人も一定数いるのではないでしょうか。

めっちゃ噛み砕いていうと
『端末に合わせて表示が変わるようにデザインする』ということです。

あなたももしかすると経験があるかもしれませんが、スマホでWebサイトを見ているときにスクロールしたら左右にブレるページ

もっとみる

【Day6】Flexbox / Emmet / クラス名

chapter1 : FlexboxWebデザインを勉強している初学者がどうしてもぶち当たりがちな壁が、横並びの鬼門「float」の概念です。
僕も以前、某プログラミングスクールで学習していた際に理解するのに時間がかかりました。周りの受講生も理解に苦しむ人は多々いましたね。

ここで初学者には難解なfloatの概念を打ち砕いてくれるのが「Flexbox」という便利な概念。

floatで躓いている

もっとみる

【Day5】ヘッダーを作る

chapter1 : 実際にコードを書き始める前の注意点index.htmlの書き始めは「!」からの「tab」を押して以下のコードを表示させるお話をDay3でしました。

ただこれだけだとCSSを反映させることができないので以下のようなコードを追記する。

どこにある何を反映させるのか階層を示す感じです。
ちなみに僕のエディタの階層はこんな感じになってます。

なんかうまい感じに説明できないので階

もっとみる

【Day4】環境構築

プログラミングをするにあたって環境構築は避けては通れない道なんですけど、HTML/CSSの環境構築に関してはさほど難しいものではないのでさくっと構築しちゃいましょう。

chapter1 : VS Codeをインストールまずはコードを書くためのエディタと呼ばれるツールをインストールしましょう。
macとwindowsでやり方がやや異なるみたいなのでそれぞれ下記の記事を参照してみてください。

ma

もっとみる

【Day3】CSS

chapter1 : まずはCSSが反映されるように準備エディタ(僕はVScode使ってます)に
index.html / style.css / あとついでにimgのファイルをそれぞれ作る。

『vscodeって何?』の方はこの蟹みそハゲ太郎さんの解説をご覧ください。

chapter2 : HTMLからCSSを読み込めるようにするエディタのindex.htmlで「!(半角)」を入力し、Tabキ

もっとみる