web制作のしおり

日々の学習をアウトプットします。

2022-11-01から1ヶ月間の記事一覧

91.テーマって何だ? ~見栄えの管理~

本日はWordPressのテーマについて。 テーマって一体なんでしょうか? 早速やっていきましょう。 まずはおさらい タイトルやカテゴリー、日付やコンテンツ等のデータに関してはデータベースから取得してくるんでしたね。 その辺りの細かい話は昨日の記事を参…

90.WordPressを知ろう② ~管理画面とデータベース~

本日はWordPressの実際の管理画面とデータベースがどのように紐づいているのか。 ここを確認していきます。 では早速やっていきましょう。 サイトデータはデータベースに保存されている 昨日の動的サイトのイメージでも確認したように、サイトデータはデータ…

89.WordPressを知ろう ~基本的な仕組みを確認しよう~

本日からWordPressの学習に入っていきます。 まずは基本概念の学習からということで、めちゃくちゃ大切な所ですね。 しっかり、やっていきましょう。 Webサイトが表示される流れをおさらい ブラウザが、URLをもとにサーバーに対してリクエストを出す。 サー…

88.復習しよう⑤ ~データベース・SQL~

復習シリーズ第5弾 データベース・SQLについて。 これで今までの学習を再咀嚼したので、明日からはWordPress課題に入っていけます。 では早速やっていきましょう。 データベースとは データを「集めて」「使いやすい形に整理」して「まとめた」もの。 こん…

87.復習しよう④ ~PHPについて~

復習シリーズ第4弾 今回はPHPについて 割りと最近学習した内容ですが、WordPressを触っていくに当たって、結構な頻度で触れ合うことが予想されます。 改めて基本を復習していきます。 PHPとは プログラミング言語の一つで、特にWeb分野の開発が得意と言われ…

86.復習しよう③ ~Sassについて~

復習シリーズ第3弾。 本日はSassについて。 早速やっていきましょう。 Sassとは SassはSyntactically Awesome Style Sheetsの略です。 CSSの拡張言語で、CSSを楽に書くための言語です。 JavaScriptとjQueryの関係に似てますね。 Sassを覚えてからというもの…

85.復習しよう② ~JavaScriptとjQuery~

本日は復習編第2弾 JavaScriptとjQueryについてです。 正直、忘れてしまっている気がする。 早速やっていきましょう。 JavaScriptとは HTMLとCSSとは違い、プログラミング言語。 DOMというウェブページとプログラミング言語をつなぐ仕組みを使うことで、Jav…

84.復習しよう① ~HTML・CSS~

最近、前に進めてはいるのですが、消化不良な感じがしていました。 なので、この辺りで今までの学習を振り返っていきます。 「やりきること」は1つの「目標」ですが、「目的」はちゃんと使える力を身に着けて「稼ぐこと」なのでしっかりとやっていきます。 …

83.SQLを使おう ~データベースを操作する~

本日はSQLについて データベースを操作する為の言語でしたね。 早速やっていきましょう。 データを取り出す データベースからデータを取り出す為には、昨日学習したテーブル、カラムをSQLで指定します。 下記テーブルを例にして操作を行っていきましょう。 …

82.データベースを知ろう ~SQLで操作する~

なぜ、ここに来てデータベースなのか。 というかデータベースとは何なのか。 本日はやっていきたいと思います。 何故データベース? 今後、学習する「WordPress」においてデータベースの基本的な知識くらいは必要になるからです。 PHPを学習するときにも「Wo…

81.アクセス修飾子ってなんだ? ~クラスのプロパティやメソッドへのアクセス権~

本日はアクセス修飾子について。 先日クラスを学習した際にチョロっと登場していたアイツについて。 では、やっていきましょう。 アクセス修飾子って何? アクセス修飾子には public private protected の3種類があります。 これが何に使われるのかと言えば…

80.クラスからインスタンスを生成する ~テンプレートと作成物の関係~

本日はインスタンスについて。 調べているとクラスが型で、インスタンスが実体という説明をよく目にします。 これが自分でイメージが湧くように咀嚼・整理していきたいと思います。 クラスとインスタンスの関係 似たようなものをいくつも作れる仕組みという…

79.クラスを定義してみよう ~わからない時は、すぐ手を動かしてみる~

昨日に引き続きクラスについて学習していきます。 クラスって何という方はこちら manablo.hatenablog.jp では、早速やっていきましょう。 PHPでクラスを定義する まずはコードから name = $name; } } ?> 1行ずつ、確認していきましょう。 まずは class TestC…

78.クラスって何だろう? ~データと処理の塊~

昨日までとは変わって、概念的なものを学んでいきます。 オブジェクト指向言語には必ずついて回るらしい「クラス」について、やっていきましょう。 クラスとは データと処理の塊を作る。 データのことをプロパティ 処理のことをメソッド と呼びます。 複数の…

77.if文でHTMLの表示を切り替えよう! ~受け取ったデータで条件分岐~

昨日はフォームのデータ送受信について、ざっくりとした仕組みを確認しました。 action属性、name属性がいい味を出していましたね。 今回は「条件に基づいてHTMLの表示を切り替える。」 これをやっていきたいと思います。 if分の基本はこちらの記事でやって…

76.Formを使ってデータを受け渡そう! ~HTMLでの疑問部分がようやく明らかに~

HTMLでフォームを作っていた時に、このデータは「どうやってやりとりするのかなぁ」という疑問をぼんやり持っていました。 今日、遂にその疑問が解消されます。 では早速やっていきましょう。 formデータの送受信 <form action="example.com" method="post"> HTMLの学習中に、このような記述を見たこと</form>…

75.PHPファイルを分割してみよう ~意外と楽に管理ができる~

PHPファイルにはHTMLを記述したり、配列を書いたり、HTMLの中に文字列を埋め込んだり用途が様々ですよね。 今回は用途別にPHPを分割することで、目的別にPHPを作成し管理したいと思います。 配列だけのPHPファイルを作る 難しいことはなく、単純にPHPファイ…

74.foreachでHTMLのブロックをまとめて書く ~PHPで楽して書こう~

foreachを使ってHTML要素の繰り返し記述が楽になる。 結構な衝撃でした。 本日はこれをやっていきましょう。 どんなところに使うのか カードとかアイテムとかニュースとか 形は同じで中身が違うような そんなところで大いに力を発揮してくれます。 例えば、p…

73.PHPで書いてみよう ~PHPファイルにHTMLと併せて書く~

素朴な疑問なんですが、PHPファイルにやたらって書いてると思います。 そこれと同時にHTMLを大量に書いてもページが正しく表示されるのは何故? ということで、今日もやっていきましょう。 PHPとHTMLの混在したPHPファイル サーバーで、どうやってこのPHPフ…

72.連想配列 ~番号ではない、データの管理~

本日は連想配列について。 普通の配列とは何が違うのでしょうか。 早速やっていきましょう。 連想配列とは? 配列はデータのまとまりを、インデックス(番号)で管理するんでしたね。 では、連想配列とは? キーという文字列で、データを管理する仕組みです。 …

71.PHP基本文法③ ~配列~

本日はPHPの配列についてやっていきます。 ここ2,3日PHPとは別に学習することがあって内容が薄くなっている感が否めませんがカメの歩みなのはいつものことなので、それでも継続していきます。 PHPでの配列 まずはコードを見てみましょう。 こんな形で複…

70.PHP基本文法② ~条件式~

本日で基本文法編がひとまず終了のようです。 さっそくやっていきましょう。 条件式を使いこなす 条件式と言えば…。 そう、「IF」ですね。 もちろん、PHPでもif文はあります。 まずは書き方 if( 条件 ){ ~実行される処理(※ただし、「条件」が「真」の時だ…

69.PHP基本文法を学ぼう ~やっぱり基本は丁寧に~

昨日からPHPの学習に突入しました。 ということで、本日もやっていきましょう。 変数について デイトラでは「データに名前をつける行為」と紹介されています。 ラベルが貼られた「箱」に「データ」を入れて管理する仕組みのようなもの。 ダンボールにりんご…

68.PHPを使ってみよう ~まずは環境を整える~

今日は初めて見る「PHP」についてやっていきます。 そもそもPHPって何? プログラム言語の1つで、WordPressを作っている言語。 WordPressを扱うためにPHPの理解が必須ということです。 なぜWordPressを扱うのか…。 世界の3割のページはWordPressでできてい…

67.モーダルを作る ~クリックで最前面に表示させる~

モーダルを作る。 これは以前の課題でも出てきたような・・・。 過去、28~29回目くらいの記事でクリックされた画像を拡大表示するやつを作っていましたね。 今回はリンクをクリックしたら最前面に表示される画面です。 とは言え、一度作ったものの応用なの…

66.アコーディオンを作ろう ~slideToggleと相対的な要素指定を使う~

今日はアコーディオンについて。 特に相対的な要素の指定方法を初めて知ったので そこはガッツリ確認したいと思います。 アコーディオンって? 楽器…ではありません。 ただ、アコーディオンは開いたり閉じたりしながら音を出しますよね。 それが由来のようで…

65.クリックした要素に下線を引こう ~ページ内リンクのクリック~

ページ内リンクをクリックした時に、下線を引く。 目にしたことはあるけれど、イマイチどうやって作ればいいのかイメージが湧かない。 要領がわかれば難しいことは無いです。 では早速やっていきましょう。 何を使って実現するのか 今回はHTML、CSS、jQuery(…

64.スクロールしたら要素を表示する ~jQueryで検知~

今日はスクロールを検知して、要素を表示する。 そんな動きを作っていきましょう。 どうやって作るの? ざっくり今回の流れは、 jQueryでスクロールを検出 トップからのピクセル数を条件に 指定したクラスの要素を表示・非表示 これで行きましょう。 jQuery…

63.スムーススクロールを作ろう ~jQueryを使って~

本日はスムーススクロールを作ります。 待ったなしで早速やっていきましょう。 時間が押しているので(汗 スムーススクロールとは Webページのリンクやボタンをクリックした時に シューッと目的の箇所まで移動するアニメーションに出会ったことがあるハズ。 …

62.データ属性って、なに? ~自分で決めて、使える~

先日、課題の中でJavaScriptを使って動きをつける中で、 「データ属性を使う方法もある」と紹介がありました。 そして、ライブラリにも「データ属性」を使っているものが見られました。 これはちょっと、しっかり整理しておかないと…ということで 早速やって…