HTML/CSS

【JS/datatables】任意の列のソート順をカスタマイズ

もくじ DataTablesとは 実現したいこと 留意点 完成形 解説 1. columnDefsオプション 2. ソート順を指定 Before After 参考URL

【JS/datatables】各td全体をハイパーリンクに設定する

もくじ DataTablesとは 実現したいこと Script HTML CSS 範囲調整 参考URL

【CSS/jQuery/DataTables】テキストが長いときに省略して表示する

もくじ 実現したいこと 何もしないとき 設定したとき 全体像 HTMLとJavaScript HTML JavaScript CSS 完成 参考URL

【jQuery/JavaScript】入力フォームで"Enter押すだけで送信"を無効化する

もくじ どういうときに無効化するか Enterでの送信を無効化 inputタグ selectタグ 参考URL

【WEB】ブラウザでSVG画像が表示されない

もくじ SVG画像が表示されない 原因 必要なコードを追記 自分がサーバ管理者の場合 レンタルサーバの場合 Chromeで表示されない場合 参考URL

【HTML】テーブルで縦/横のセルを結合

もくじ 基本構文 横(行)結合 縦(列)結合 横(行)結合と縦(列)結合の組み合わせ マークダウンでは結合できない 参考URL

【HTML】モーダルを設定しても一瞬でモーダルが消える問題。

したいこと 問題 原因 解決 参考URL

【HTML】<input>タグのreadonly属性とdisabled属性の違い

inputタグで編集不可に readonly属性 disabled属性 サンプル 環境 テキスト入力欄での使用 プルダウン まとめ 参考URL

【PHP/Laravel】<input>で入力した日時をタイムスタンプに変換

日にちの場合(type="date") 時刻の場合(type="time") 日時を共に入力(type="datetime-local") 注意点 strtotimeメソッド(タイムスタンプ に変換) どれでも使える 参考URL

【Windows/IE】CSSやjQueryが読み込まれない!!解決

IEで動作確認って必要? IEでCSSやjQueryが読み込まれない 解決? キャッシュクリア アプリを同時に開かない

【HTML/PHP】nl2br関数を使って、改行コード(\n)を変換(<br>)して改行させる

もくじ 改行コード nl2br関数 nl2br関数使わない nl2br関数使う エスケープさせない 参考URL

【jQuery】formの確認画面をモーダルで出す

もくじ 完成図 HTML CSS white-space: pre-wrap; JavaScript(jQuery) .val() .find() .text() 「入力フォームに入力した内容を、送信する前に確認画面(モーダル)を出したい」 そんなときに、jQueryを使って入力内容を取得してモーダルに渡す方法をご紹介…

【JavaScript】文字列の扱い方

文字列を扱う時はどの言語でもクォーテーションを用いますよね。 そのクォーテーションの違いや文字列の連結などについてまとめました。 今回は主にJavaScriptに基づき解説します。PHPなどでも似たように使うようですが、他言語では少し挙動が変わると思うの…

【jQuery】thisの構文

もくじ thisの構文 HTML jQuery $(this)を使う $(this)を使わないと パフォーマンス向上

【jQuery】基本のキ

もくじ jQueryを使う準備 ダウンロード CDN 基本構文 本来の構文 短縮系 $(function(){ 処理 });で囲む意味 jQueryの処理の記述方法 セレクタ メソッド 変数を使う メソッドチェーン よく使うメソッド cssメソッド hideメソッド fadeOutメソッド findメソッ…

【HTML/CSS】positionプロパティとz-indexプロパティ

もくじ 前提 positionプロパティ 距離指定のプロパティ 要素の配置順 基準の位置 それぞれの違い static(初期値) absolute(要素同士を重ねたり) relative(親要素を基準に) fixed(要素を固定) sticky(途中から固定) z-index(重なり順) 豆知識 ま…

【HTML】aタグなのにhoverしてもカーソルがかわらない

あまり起きない現象かもしれませんが、ひょんなことから詰まってしまったので備忘録。 前提 原因 解決 参考URL

【Laravel】SCSSの導入

もくじ はじめに 1.準備 2.Mixの変更 ファイルのビルド先を指定 ビルドがエラー時のみの通知 3.Gitの管理 pullするとエラーになったら 4.Mixの実行 参考URL

【CSS】擬似要素と擬似クラス

もくじ 擬似要素とは 擬似クラスとは よく使う擬似要素 A:: first-letter(要素の一文字目を指定) A:: first-line(要素の一行目を指定) A::before(要素の直前にコンテンツを追加) A::after(要素の直後にコンテンツを追加) beforeとafterで画像を追加 …

【laravel/CSS】スタイルシートとbootstrapを適用する

もくじ 前提 スタイルシートの適用 スタイルシート作成 ビューで読み込む セキュアな通信の場合 bootstrapの適用 Aパターン CDN bootstrapのCSSを読み込む bootstrapのJavaScriptを読み込む Bパターン ダウンロードして使用 ダウンロード CSSファイル JSファ…

【laravel】ビューの継承〜bladeを表示

もくじ bladeの作成 全体を記述 共通コードと固有コードの選別 親ビュー 子ビュー ビューの継承 親ビュー @yield 子ビュー @extends @section 共通コード(親ビュー)の分割 親ビュー @include 子ビュー 実際のコード ルーティング 参考URL

HTMLページの基本

もくじ 全体 <html>タグ <html lang="ja"> <head>タグ <meta>タグ <meta charset=”UTF-8″> <meta http-equiv="X-UA-Compatible" content=IE=edge"> <meta name=”viewport” content=”width=device-width,initial-scale=1.0″> <title>タグ <link>タグ <link rel=”stylesheet” href=”/style.css”> <style>タグ <body>タグ 参考URL</body></link></link></meta></meta></meta></meta></head></html></html>

【React/CSS】初期値を設定する

もくじ ReactのCSSの設定場所 Reactstrap Reactstrapの初期値 初期値の上書き 変更を反映 ブラウザで確認 参考URL

【HTML/CSS】displayプロパティの活用(ブロック要素、インライン要素、インラインブロック要素)

もくじ 要素 親要素と子要素 要素の種類 ブロック要素 インライン要素 インラインブロック要素 概念の廃止 表で見る違い display プロパティ 参考URL

【React】styled-componentsでトグルスイッチを実装

もくじ トグルスイッチとは 経緯 手順 1.インポート 2.定義する 3.スタイルの指定 4.定義を呼び出し 隣接セレクタの指定 参考URL React + Reactstrap + styled-componentsでトグルスイッチを実装 トグルスイッチとは ON/OFFやYes/Noなどをスイッチ感覚で扱え…

【React】styled-componentsの導入 かつ Reactstrapの併用

もくじ ReactでのCSS styled-componentsとは styled-components 導入手順 1.インストール 2.インポートする 3.定義 4.DOM要素に追加 5.完成 Reactstrapを併用する 1.Reactstrap、styled-componentsの準備を整える 2. 双方ともインポート 3.定義 4.DOM要素に…

【Reactstrap】Reactで Bootstrapを使う

もくじ Reactstrapとは Bootstrapとは 手順 1.前提 2.インストール 3.Bootstrapをインポート 4.Reactstrapをインポート 5.コンポーネントを使う 6.完成 参考URL Reactstrapとは ReactでBootstrapを使えるようにしたライブラリです。 Bootstrapとは Bootstrap…

【React】Reactを使うための基礎知識

もくじ Reactとは JSX JSXを使わない構文 return内は一つの要素 JSXの命名規則 実践 中身を確認 書き換える Componentで管理 コンポーネントを分ける 複雑化していくとコンポーネントが便利 参考URL Reactとは React.jsまたはReactJSの名称でも知られ、JavaS…

【HTML/JavaScript】プルダウンで表示内容を切り替える

プルダウンで表示内容を切り替える 残念なパターン HTML JavaScript 完成版! HTML JavaScript 要素内は何でも記述可 プルダウンで表示内容を切り替える こちら実装にてこづったんですが、結果的にとても簡単な方法で出来ました。 HTML/JavaScriptを使用しま…

構造を意識したURLを設計する

URLの基本構造 プロトコル ホスト名 ドメイン名 FQDN ディレクトリ名 ファイル名 各々の名前の付け方 わかりやすい命名 英数字にする 小文字にする 二単語以上を使用したい まとめ 参考URL URLの基本構造 どのwebページも上記のような構造になっています。 …