テキストなどでディレクトリ構造を伝える便利な記号
メールやチャットなどテキストベースでディレクトリ構造を伝えなければならない事がある場面があると思いますがそんな時に便利な記号を紹介します。 ディレクトリ構造とは？ Webサイトやアプリケーションを開発した際、さまざまな用途のファイルがフォルダ分けされて格納されています。それらのマップのようなものがデ…
Web Design Coding
HTMLやCSSなどWebデザインのコーディングに関する記事を掲載しています。
Vue.js Router設定でNot Foundになる場合の対処方法
Vue.jsで製造されたサイトでRouter設定を利用している際、サーバーによってはアクセスしたURLが正しく表示されず、Not Foundになる場合があります、今回はのNot Foundになる場合の対処方法を紹介します。 Vue.js とは？ ユーザーインターフェイスを構築するためのプログレッシブ…
jQuery 指定の処理が完了後に別の処理を実行する
jQueryで処理を順番に記述しても、先の処理が終了する前に次の処理に入ることが多々ありますがこれを解消する方法を紹介します。 jQuery 処理の順番 通常は先に記述した処理から順番に開始していきますが、処理に時間がかかる場合、終了間に次の処理が走ってしまします。 下記の例の場合、test01Sc…
CSS3 レスポンシブデザイン ブレークポイントでデザインの変更をアニメーションする
Webサイトのレスポンシブ化が当たり前になってきました。今回は、ブレークポイントでCSSの切り替えをアニメーションする方法の解説です。 レスポンシブデザインとは？ レスポンシブデザインとは、画面サイズの異なる端末（PC、タブレット、スマートフォンなど）でサイトを閲覧した際、それぞれの画面サイズに最適…
jQuery $(this)でoptionの情報を取得する 備忘録
jQueryを利用して動的にoptionのdata()を取得したく調べた内容の備忘録です。 $(this)を利用して選択されたoptionを取得 classやIDを利用する場合はの記述は「$('.className option:selected').val()」などですが「$(this)」を利用し…
HTML 5 基本的な構造とWebアクセシビリティの考慮
Webサイトのコーディングで必要なHTMLですが、現在は「HTML 5」が基本となっています。今回は「HTML 5」の基本的な構造を見ていきます。 HTMLとは？ HTMLとはHyperText Markup Language（ハイパーテキスト・マークアップ・ランゲージ）の略でWebサイトの構造をマ…
CSS-Sassをコンパイルする便利なアプリ「Prepros」Mac&Win両対応
コーディングでSassを利用する機会もあると思いますが、毎回コマンドでコンパイルするのが面倒だと思います。そこで、Sassをコンパイルするためのアプリ「Prepros」を紹介します。 Sassとは？ Sassとは「Syntactically Awesome StyleSheet」の略で、CSS（カス…
ブログやWebサイトに掲載する画像ファイルの最適化
現在のサイトに利用されている画像ファイルはRetina対応などで高解像度の画像ファイルが多数ありコンテンツのダウンロードに時間がかかります。今回はこれらを最適化する方法を記事にしました。 画像ファイルが重いとなぜダメなのか？ 画像ファイルが重いとコンテンツの表示速度が極端に遅くなります。検索結果など…
メールフォーム作成時の備忘録 button type
メールフォームはプログラムではよくある案件です。今回、一部のIE11（インターネットエクスプローラ11）で起きた現象への対処法の備忘録です。 IE11（インターネットエクスプローラ11）でメールが二重送信されてしまう PHPの関数「mb_send_mail()」でメールを送信しているのですが、「送信…
CSSフレームワーク Bootstrap 4 チートシート
WEBサイトのコーディングで幅広く利用されているCSSフレームワークのBootstrapですが、個人的にはフロントではほとんど利用しませんが、そこまでデザインを気にしないシステムの管理画面で大変お世話になっています。 あくまで管理画面などで簡易に利用する場合ですが、非常に便利なサイトを見つけたので記…