お知らせ内容 1. イベント開催決定！ 「池袋コーヒーフェスティバル2025」開催決定！2025年〇月〇日～〇日の3日間、池袋駅周辺のカフェを中心に、「池袋コーヒーフェスティバル2025」を開催いたします！国内外の有名バリスタによる特別セミナーや、ここでし…
多くのコンテンツを見せる際にフィルタリング機能やソート機能などを付けて、ユーザーの利便性を向上させましょう。 さらにモーダルウィンドウを追加して、ページ遷移することなく、動線をそのページで完結出来るようにしましょう。 github.com 高機能モーダ…
<html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>IKEBUKURO COFFEE FESTIVAL</title> <link rel="preconnect" href="https://fonts.googleapis.com"> </link></meta></meta></head></html>
ics.media
環境変数（environment variable）はプログラムを実行する環境固有の値を埋め込むための仕組みです。 どうしてそんなものが必要なのかというと、プログラムは動かす端末固有の値を使うことがあるからです。 プログラムが動くときに『サーバーの名前』や『デ…
レシピ一覧ページのソース <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>料理レシピアプリ|レシピ一覧ページ</title> </head> <body> <header> <h1>料理レシピアプリ</h1> </header> <main> <h2>レシピ一覧</h2> <table> <tr> <th>料理名</th> <th>カテゴリー</th> <th>難…</th></tr></table></main></body></html>
ポートフォリオ制作でまず自身が把握する事は中に入れるコンテンツの分量です。今までの授業で作ったデータをもう一度見直し、手直しする物は手直して、ポートフォリに掲載する物を決めましょう。 次にwebのポートフォリオを何で作るかを決めましょう。選択…
cssのセレクタの「隣接セレクタ」「擬似クラス 」「擬似要素 」などを使用する事で、今までjQuery等を使わないと出来なかった事がcssのみで出来るようになります。 :checked inputのラジオボタン、チェックボックスの2つのみで使用可能。チェックしたinput要…
See the Pen 弁当ボタン by yachin29 (@yachin29) on CodePen. www.xserver.ne.jp ginneko-atelier.com
columns を使ってピンタレスト風のカラムレイアウトの作成 このカラムレイアウトの一番のメリットは画像をすべて同じ大きさにトリミングする必要が無いことです。 www.pinterest.jp See the Pen css column layout by yachin29 (@yachin29) on CodePen. colu…
See the Pen スマホ時にスクロールスナップ by yachin29 (@yachin29) on CodePen. www.nike.com 以前はjavascript等で制御していたスクロールスナップも現在ではcssのみで簡単に実装出来ます。またflexやvw、vhを使う事でレスポンシブにも簡単に対応出来ます…
高機能モーダルウィンドウ「Fancybox」のCDNを使ってギャラリーページを作ってみるfancybox CSS <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />fancybox JS <script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script> https://web.…</link>
WordPressの投稿データにはカテゴリーを設定でき、カテゴリーごとに記事を表示させられます。似た機能でタグという機能もありますが、カテゴリーは親子関係を設定出来るのが特徴です。 wordpressで特定のカテゴリー記事を表示させる為には「 get_posts( );」…
今ではpcでもspでも最適に表示されるレスポンシブサイトは当たり前で、最近はむしろspでの表示を優先させ、pc時は画面いっぱいの固定背景（多くはbody要素を固定）を置き、モバイル幅の中にコンテンツを入れるようなspファースト、もしくはスマホ特化型のの…
通常のCSS Gridではカード型レイアウトなどのアイテム（子要素）の縦位置を揃える事がとても難しく、コンテンツによってタイトルの文字数が異なる場合など、高さを指定しないとズレてしまいます。 2024年9月現在、主要ブラウザはすべてsubgridに対応している…
入力画面からデータを確認画面に送れたら、次はPDOを利用してデータをデータベースに送ります。 PDOとは 「PHP Data Objects」の略で、PHPからデータベースへ接続するためのクラスのことです。 書き方 インスタンス名 = new PDO('データベースの種類:host=接…
<html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>もぐもぐレシピ|トップページ</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <header> <h1>もぐもぐレシピ</h1> </header> <main> <div class="main-visual"> </div></main></body></html>
mySQLが立ち上がらない時は以下の作業をしてみてください1.XAMPPを起動する。 2.ExplorerボタンをクリックしてXAMPPがインストールされているフォルダを開く（ExplorerボタンはQuitボタンの３コ上にある） 3.mysqlフォルダを開く 4.dataフォルダをコピーし別…
コンテンツのインポート まずはサンプルデータをダウンロードしましょう。 https://yachin29.jp/school/posts.xml ダウンロードしたサンプルデータをダッシュボードからインポートします。 「ツール」→「インポート」→「WordPress」 ダウンロードした「posts…
Traversingメソッドを利用 Traversingのメリット トラバースを利用することで、イベントが発生した要素に関連した要素を操作する事ができます。ボタンが複数ある場合などは「this」を使う事になりますが、このトラバースを使えば操作したい要素を「this」か…
WordPressとは wordpressとはヒューストンに住んでいた若者とイギリスに住んでいた若者がインターネットを通じてコラボレーションで開発を進めたオープンソースのプロジェクトです。2003年にリリース。 logmi.jp WordPressとは、オープンソースのブログソフ…
CMSとは？ CMSとは、コンテンツ・マネジメント・システムの略で、Webサイトを外部から管理・更新できるシステムのことをいいます。 Webサイトの更新は、テキストや画像の情報だけでなく、HTMLやCSSと呼ばれるプログラム言語の専門的な知識が必要で、他のペー…
以前授業でも使ったGoogleフォームですが、設置も簡単でスプレットシートと紐付けする事でお問い合わせ内容をデータベース化する事も簡単に出来てしまう、とても便利なツールですが、唯一の問題が「自分でCSSをいじれない」事です。特にレスポンシブサイトに…
index.html <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Felica Donut&Salad</title> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/jquery.bxslider.css"> </link></link></meta></meta></head></html>
作例 入力画面 EFO（Entry Form Optimisation）は「入力フォーム最適化」の略で、入力フォームをユーザーにとって使いやすく入力しやすい形に最適化し、入力して内容を送信できるように改善を行う施策のことを指します。 対面でのサービスが難しくなった今日…
UNIXタイムスタンプとは UNIXタイムスタンプとは、コンピューターのシステム時刻の一種で、協定世界時（UTC）での1970年1月1日（午前0時0分0秒）からの経過時間を指します。 time関数 現在のタイムスタンプを取得 strtotime関数 指定した…
基本的にはJavascriptと同じですが、PHP独自のフォーマットをしっかりと覚えましょう。 １、「現在の日付」を取得できる関数：date関数（フォーマット文字列） ２、「いつかの日付を」を取得できる関数：mktime関数（タイムスタンプ） timezoneの設定 本来は…
style.css @charset "utf-8"; @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Zen+Maru+Gothic&display=swap'); /* カスタムプロパティの登録 */ :root{ --base_color:#ffffff; --text_color:#3…
PHPでは情報を別のデータに受け渡すときにGETとPOSTの２つの方法（メソッド）が使われます。 GET GETメソッドはURLの末尾に「?」をつけ、「パラメーター名="値"」という形式でデータを送ります。 そのせいで、URLにデータが表示されてしまい、誰からでも見る…
PHPとは？ PHP: Hypertext Preprocessor（ピー・エイチ・ピー ハイパーテキスト プリプロセッサー）とは、動的にHTMLデータを生成することによって、動的なウェブページを実現することを主な目的としたサーバーサイドプログラミングである。一般的には PHP …
