2020-01-01から1年間の記事一覧

【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】controllerからbladeに変数を渡して表示

もくじ Controller 左辺 右辺 Blade Htmlタグを認識させる 参考URL

【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>

【laravel】composer global require "laravel/installer"で随分はまった件

laravelのインストールはとっても簡単です。 bonoponz.hatenablog.com しかし、このたび新しくプロジェクトを作成しようと改めて実行したところうまくいかない。 公式サイトを見たり参考URL見たりして試行錯誤するも全くうまくいかず、仕方ないからDockerに…

【Mac】アバストを無効にする

windows版の手順しか記事がなかったので覚書。 Macでは設定画面からいくわけではなかったので少し迷ったのに、公式ヘルプでも見つけられんかった。どうして…?探し方が悪いの?自力で方法見つけました。 では早速。 とっても単純でした。 1.アバストセキュリ…

【Laravel】インストール

まさかのインストール方法をまとめてなかった。 git cloneして起動することは記事にしていたのに…。 そして全く覚えていなかったので復習のために記事します。 Composerの有無を確認 インストールして新規プロジェクトを作成 パターンA composer create-proj…

パッケージ管理のあれこれ(composer、yarnなど)

パッケージ管理っていろんなプロジェクトで使うことが多いので、手順を覚書。 一度設定してしまえばあまりこの手順は必要ないが、だからこそパソコンを買い替えたりしたときほぼ初めての作業になってしまうので必要性を感じました。 何度もやらないことって…

IT用語、略語

業界未経験のエンジニアにとって、IT用語がアルファベット3文字とか略語ばかりでMTGや会話についていけないことも多いんですよね。 私が転職してから初めて耳にした用語、略語をまとめていきます。IT用語関係ないものもあるかもしれませんが、そこは私の無知…

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

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

【WEB】CSRFとXSSの違いって?

もくじ Webアプリケーションの脆弱性及び攻撃手法 双方を比較 CSRF 手法・特徴 被害 対策 XSS 手法・特徴 被害 対策 制作者サイドでも対策を 参考URL

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

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

【React】{children}でコンポーネントを受け渡す

もくじ propsの流れ propsの使い方 (本題)親子の要素をまたぐコンポーネント 流れを図解化 実際のコード 複雑な構造をわかりやすく 参考URL

配列とオブジェクト

配列とオブジェクトが、いつも違いがわからなくなるのでまとめました。 配列とは オブジェクトとは オブジェクトを要素に持つ配列 配列とは 複数の値をまとめて管理するもの。 [値1, 値2, 値3, ... ]のように書きます。 const fruits = ["apple","banana","o…

【ES6】環境構築をする

もくじ 流れ 1.Homebrewのインストール 2.nodebrewのインストール 3.node.jsのインストール インストール手順 バージョンを指定してインストール インストールできるバージョンの確認 必要なバージョンをインストール インストールされたバージョンを確認 参…

【Git】認証情報を切り替える

もくじ 現在の情報を確認する オプション 認証情報を切り替える パターン1(明示的にアカウントを指定) 1.アカウント指定を必須にする 2.グローバル設定を削除 3.アカウント情報を設定 4.ログを確認 パターン2(新しくアカウントを登録し直す) 1.グローバ…

【React/ES6】named exportsとdefault exportsの使い分け

もくじ Reactにおけるエクスポート exportとは importとは エクスポート方法 named exports default exports named exportsとdefault exportsの使い分け named Exportsを使うべし 参考URL Reactにおけるエクスポート export自体はJavaScriptの構文ですが、Re…

【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…

【React】インストール〜起動

環境 最新の Node.js 及び npm がインストールされていることを確認してください。 Node.js サーバー側で動作するJavaScriptのことです。つまり、フロントエンドで使っていたJavaScriptをサーバサイドで使えるようにしたもの。 バージョンを確認する。 $ nod…

【Git】個人でGitHubを使用する

もくじ ローカルでgitを使用する GitHubに登録 リモートリポジトリの作成 repository names Description 公開/非公開 Initialize this repository with a README create repository ローカルリポジトリの設定 ローカルをリモートに反映させる リポジトリを削…

ChromeでSVG画像が表示されない時の解決法

もくじ 問題 HTMLやCSSは関係ない テキストエディタで書き換える いつから? Chrome以外は?('21 1月追記) 参考URL

【Git】コンフリクトが起きたらrebaseで解決!

もくじ コンフリクトとは 例になぞって確認 1.プルリクエストする 2.リベースする 3.コードの修正 修正を反映(リベースモード) リベースを続行(リベースモード) リベースモードの終了(元に戻す) 4.プッシュする 5.完了 コンフリクトとは 複数人で作業…