月別: 2018年6月

cssだけでレスポンシブなナビゲーションメニューを作る

2018年6月27日 CSS

ソースコード   ヘッダーのメニューが横一列に並んでいて、画面幅が狭くなるとアイコンが出てきて、クリックするとメニューが表示されるという、スマホサイトではあるあるの仕組み。 だいたいが、jQueryのトグルクラスを使って実現しているのですが、今回はcssだけで作ってみました。 まだまだ改良の余地があるのですが、一応機能的には十分...

ワードプレスでお店のホームページを作るならゲール

2018年6月23日 ワードプレス

ワードプレスのテーマを作りました。 テーマの名前はゲールです。   ゲール紹介ページ デモページ   主に飲食店や美容系のお店をターゲットにしています。 普通のブログには向いていないのですが、ビジネスサイトを作るならば、とてもオススメのテーマになっています。   今のところは飲食店や美容系などのお店のホームペ...

レスポンシブなスティッキーヘッダーを作るチュートリアル

2018年6月18日 jQuery

スティッキーヘッダーとはページをスクロールしても上部に固定されている、ヘッダーメニューのことです。 ヘッダー部分を固定させるだけなら簡単にできますし、Bootstrapを使ってしまえば、レスポンシブで便利なヘッダーもサクッと用意できてしまいます。 しかし、今回は0から作っていきます。   なぜ0から作るかというと、オシャレなステ...

Bootstrap4のグリッドデモページを作成

2018年6月17日 Bootstrap

Bootstrapはレスポンシブなサイト高速に作る上で、非常に強力ですが、グリッドの仕組みを理解する必要があります。(理解しなくても感覚でいける気もしますが・・・笑) そこで勉強がてらデモページを作りました   Bootstrap4グリッドシステムデモページ   このデモページでブラウザの画面幅を変えると、その仕組みが...

jQueryで超クールなタスク管理アプリを作る

2018年6月16日 jQuery

このチュートリアルのクオリティが高いので共有します! 微妙にカスタマイズしつつ作りました デモ     これくらいのアプリがサクサクと作れたら気持ちいいですね。     機能としては 新規タスクの追加 タスクの編集 タスクの削除 タスクの完了 これら全てjQueryで行なっていきます。  ...

JQuery Ajaxを使うときにハマったこと

2018年6月15日 jQuery

JQuery Ajaxを使ってみたのでそのメモ。 Jsonデータからリアルタイムに検索して結果を出力するものです。   YouTubeの動画を参考にしました     いざこれを実際に作ると環境によっては動作しません。     ローカル環境からはAjaxは使えないようです。   な...

jquery.inviewに変更したら見やすいサイトの動きになった

2018年6月15日 jQuery

追記:現在のテーマでは使用していません。 現在はKYOというテーマを使っています   たまに、ふわっと表示されるかっこいい動きのあるサイトがあります。 そういうサイトを見ると、真似したくなりますよね? でも、難しそうと思うかもしれませんがプラグインを使ってしまえば簡単です!       jquery...

デザインパターン-PHPでTemplateMethodの入門

2018年6月12日 PHP

デザインパターンとはオブジェクト指向を理解するために最高の設計方法です。 オブジェクト指向を知っているからデザインパターンが使えるのではなく、オブジェクト指向を理解するためにデザインパターンを勉強するという意見もあります。   今回は中でも使用頻度の高いTemplateMethodを実装していきます。    ...

enchantjsでノベルゲームエンジンの作り方チュートリアル

2018年6月11日 enchantjs

enchantjsを使えばブラウザで動作するアプリケーションを作成できます。 また開発環境の構築も大したことはありません。必要なファイルをダウンロードすればすぐに、開発を始めることができます。 というわけで、今回はノベルゲーム(ギャルゲー)を作っていきます。 enchantjs特有の処理などについては極力省略し、あくまでノベルゲームを作る...

jQueryでフォームのバリデーション機能を実装する

2018年6月10日 jQuery

最近は、phpとjQueryをメインに勉強しています。 今回はjQueryを使って簡単なバリデーション機能を持った、フォームを作成します。   ソースコードはgithub   完成するとこんな感じです       バリデーションフォームの概要 phpでバリデーション処理を書くと送信ボタンを...