2022-09-01から1ヶ月間の記事一覧
本日からSassの学習に入っていきます。 どうやら楽しそうな内容です。 まず、Sassとは何なのでしょうか？ Sassとは お決まりの略語説明から入っていきます。 Sassとは「Syntactically Awesome Style Sheets」の頭文字です。 構造的にイカしたスタイルシート…
jQueryで動きをつける こちらもまずはコードを $(function(){ const modal = $("#js-modal"); const overlay = $("#js-overlay"); const overImg =$('#open-img'); const miniImg =$('.js-open'); miniImg.click(function(){ const index = miniImg.index(th…
昨日に引き続きjQueryの実践課題③と言うことで、 モーダルで画像拡大表示 をやっていきたいと思います。 プラグイン？は使用禁止だそうなので、jQuery単品での実装です。 実装の条件 画像をクリックすると 縦横画面いっぱいに薄いグレーの背景ボックスを表示…
昨日に引き続きjQueryの実践課題②と言うことで、 ページトップへ戻るボタンを付ける をやっていきたいと思います。 実装の条件 トップから80pxスクロールしたら 300ms（0.3秒）かけて フェードイン・フェードアウトで表示 表示してる間はボタンはページ右下…
本日からjQueryの実践課題と言うことで、 ドロワーメニューの実装 をやっていきたいと思います。 色々な情報を自分で拾い集めて、実装できる…解決力を養うことが目的の課題ですね。 本題に入る前に、「実装」について調べたので書いておきます。 「実装」と…
引き続きjQueryについて学習しましたので、整理します。 中でも「イベント監視」と「アニメーション」についてやっていきます。 イベント監視 JavaScriptの所でもやりました、イベント監視。 状態の変化があった時に何らかの処理をさせたい 時に使うものでし…
昨日に引き続きjQueryについて整理していきます。 jQueryがどんなものか、どんなメリットがあるかという事を昨日はまとめました。 本日は書き方のルールと、使い方についてまとめていきます。 jQueryの書き方 JavaScriptを使いやすく簡単にしたものがjQuery…
jQueryとは JavaScriptのライブラリ１つで JavaScriptをより簡単に記述できるようにしたもの ということだそうです。 ライブラリとは ライブラリって何でしょうか。 プログラムでよく利用される機能を切り出して、再利用しやすく纏めたものとのこと。 まず、…
昨日に引き続きDOM操作について整理していきたいと思います。 JavaScriptからボタンの操作 早速コードから書いていきます。 document.getById('test').click(); では１つずつ見ていきましょう documentで、ブラウザで読み込んだHTMLファイルを取得します。 …
昨日に引き続き、DOM操作について整理していきます。 HTML要素の追加 JavaScriptでHTMLの要素を追加することもできます。 コードを書きながら整理していきます。 今回の流れは以下のようになります。 login_btnというオブジェクトを作成する そこへaタグ要素…
DOMとは DOMとはDocument Object Modelの略で、文書を操作する為の取り決め。 JavaScript(プログラム)でHTMLを参照したり、操作したりする為の仕組みと言えます。 ようやく、「JavaScriptでwebサイトに動きをつける」と「今までの基本学習」が繋がった感じが…
基本も大詰め 変数や関数、条件分岐についていままで進めてきました。 配列、オブジェクト、繰り返し処理について今日は進めていきます。 配列 配列でできることは「複数のデータを管理する」こと。 その方法は インデックスという０からスタートする数字 複…
まずは基本文法から 昨日の学習で、全容がつかめないという話をしましたが 基本文法のお話だったので、当たり前でした。 まずは、基本を知ってそれからどう使うかを学んでいくという事なのでしょう。 というわけで、引き続き基本文法についてまとめてみます …
JavaScriptとは フロントエンド言語、HTMLやCSSと違い「サイトに動きをつけるもの」 ブラウザ上で動く、プログラミング言語と考えて良さそうです。 中級編初日に学んだことと、追加で調べたことについてまとめていきます。 早速使ってみる jsconsoleというサ…
復習も兼ねての「まとめ」 本日は初級編の終わりに差し掛かったので、 復習も兼ねて「初級編」で学んだ事をおさらいしていきます。 ただ書くだけでは面白くないので、当時の自分の感想も含めて書いていきます。 初級編の内容 デイトラではweb制作コース初級…
ポートフォリオとは？ まず、人によってイメージするものが違う。 ポートフォリオとは？と聞かれて何をイメージしますか。 調べてみると、業界によって「ポートフォリオ」が指す意味が異なります。 みなさんはどんなイメージをしましたか。 私は現金・株式・…
Bootstrapとは CSSフレームワークの１つです。 フレームワーク？？ 一言でいうと、 「デザインのテンプレート集」 です。 テンプレート集？ 普段、CSSを用いてデザインをする場合、 CSSでクラスに対して、プロパティ、バリューを設定して HTMLタグにクラスを…
便利に慣れすぎた 快適に入力していたのに、突然絶望の淵に立たされたような感覚。 Emmetで思った入力が出きずに、非常に不便になった。 最初は壊れたのかと思ったが、結論そんなことはなかった。 CSSの入力でそれは起きた 前触れもなく、入力候補が出てこな…
デイトラを始めて 予備知識無しで、デイトラの学習を始めた私。 現在の学習の進捗と、普段気をつけている事を書いていきたいと思います。 初日にぶつかった壁 HTMLとかCSSとか、そういった専門用語を使った説明についていけない。 デイトラの説明は簡潔でわ…
floatって？ 要素を横並びにしたい時に、使うCSSプロパティの１つです。 ・・・ そっとページを閉じようとしている、そこのあなた！ 大丈夫です。 噛み砕いて、書きますので見ていきましょう。 要素を横並びに？最初からなるんじゃないの？ 要素のある性質に…
marginとは 前回の記事でも書きましたが、 paddingは「領域の確保」 marginは「最低限確保する距離」が妥当な表現かなと思います。 一般には「margin」は「padding」とセットで 「外側の余白・内側の余白」と言われています。 私はこの捉え方は混乱を招くと…
marginとpaddingとは 何？と聞かれてすぐに答えられますか。 一言で表すなら、「距離の確保」と「最低限確保する距離」が妥当かなと思います。 どちらも余白という言葉を使って表されることが多く、 外側の余白・内側の余白と表現されていますね。 今回はpad…
何の為に書くのか HTMLやCSSを何のために書くのか？ 考えたことはありますか。 私は現在デイトラで学んでいますが、 大半の時間が「見え方」を変更する為に書いています。 ということは、殆どのコードが「デザイン目的の内容」ということです。 そして、今回…
先日、HTMLタグの中身について整理した記事を書きました。 本日はタグの属性の部分、特にclassについて整理します。 属性のおさらい HTMLタグの「属性」にはブラウザに「どんな種類の付加情報があるか」を伝え、 さらに「値」を設定することで、「付加情報の…
HTMLタグの中身とは？ 製作者の「こういう風にしたい」という思いをブラウザに伝えるテキスト。 ブラウザへ伝えたい情報を「括弧の内側」に書いたもの。 まさに、内なる想い（違) ※ブラウザやHTMLとの関連は以前の２つの記事が参考になると思います。 2.web…
ブロックレベルとインライン 昔々のお話です。 HTMLの「要素※」には「ブロックレベル」と「インライン」という 2種類の「分け方」が存在しました。 しかし、現在は使われていません。 (※要素が何かについては前回の記事を御覧いただければと思います。) じゃ…
テキストなのに親子が存在する 親子ってなに！？ ハイ、私です。 今回はHTMLの要素と親子関係について整理していきます。 要素って何？ まずは、親子関係の前に要素について知りましょう。 要素って言うと難しく感じるかもしれません。 要素 ＝ １個の「かた…
web界隈のテキストファイル２大巨頭 前回は２種類のテキストファイルの１つHTMLについて学習しました。 今回は残るCSSについて掘り下げていきます。 前回に引き続き、専門用語を避けて、全体感を掴むことを目指します。 CSSって？ 例によって書きます。Casca…
webページはテキストファイル 前回の学習で、webページはあるルールに基づいて書かれたテキストファイルだと書きました。 今回は専門用語をなるべく使わずに、まずは全体感を掴むことを目的とします。 webページに使われるテキストファイルには以下の２種類…
必要な道具は？ webページを作る為に最低限必要な道具は？と聞かれたら、以下の２つだと答えます。 エディタ ブラウザ この２つを揃えてしまえば、web制作を学ぶには十分です。 (きれいな写真やイラストとかのデザイン部分は除きます) え、本当に？と私も疑…
