K's

web.developer https://ks-official.com/

K's

web.developer https://ks-official.com/

  • Heroku

    Herokuによるデプロイ

  • CSS

    CSS 備忘録

  • SQL

    SQL 備忘録

  • 環境構築

    環境構築 備忘録

  • jQuery

    jQueryプラグインの使い方

すべてのマガジンを表示

Webサイトギャラリー(個人用)

Award Lists①Awwwards②CSS Design Awards③Digital Design Award https://award.ddd.it/ ④CSSREEL ⑤The FWA Other Lists①SNKOU!SANKOU! | Webデザインギャラリー・参考サイト集Webデザイン制作の参考になるステキなWebサイト・LPを集めたギャラリー。業種・テイストなどで絞込検索可能。最新トレンド

K's

    • Web制作チートシート(個人用)

      CSS① CSS グラデーション ジェネレーター② CSS グラデーションアニメーション ジェネレーター③ CSS クリップパス ジェネレーター④ CSS ストライプ背景 ジェネレーター⑤ CSS マスクフィルター ジェネレーターThe Hero GeneratorGenerates the code for a website header. I've had to implemenhero-generator.netlify.app

      K's

      • シェルスクリプト『HTMLページ作成』

        今回使用するシェルは『bash』を使用します。 備忘録ですので、シェルコマンドの説明は省きます。 手順1.シェルスクリプトをまとめるフォルダを作成 今回は『shellscript』というディレクトリにします $ mkdir ~/shellscript$ cd shellscript 2.シェルスクリプト作成 今回は『mkdir-html』に命名しました。 $ vi mkdir-html.sh 3.viエディタに記述 『i』入力しインサートモード起動 mkd

        K's

        • Linux(備忘録)

          初めに個人用備忘録まとめです。 誤った理解をしていましたら教えてください。 Linuxについて ・Linuxとは コンプーター用のOS(オペーレーティングシステム)の一種。 つまり、コンピューター全体を管理しているプログラムのこと。 種類：『CentOS』・『Ubuntu』etc... ・CentOS 「Red Hat Enterprise Linux」のソースコードを元に開発が進められている無償のディストリビューション（サーバー構築する時に使用) ・Ubun

          K's

        マガジン

        • Heroku
          3本
        • CSS
          1本
        • SQL
          2本
        • 環境構築
          0本
        • jQuery
          6本
        • JavaScript
          1本

        記事

          HTMLページ『Herokuデプロイ』Basic認証

          はじめに『Heroku』にてデプロイする際にBasic認証した際に調べた内容をまとめます。 Heroku、GitHubに登録前提です。 1.index.php作成index.php<?php function require_auth() { $AUTH_USER = 'user-name'; $AUTH_PASS = 'pass-word'; header('Cache-Control: no-cache, must-revalidate, max-age=0'); $

          K's

          HTMLページ『Herokuデプロイ』Basic認証

          K's

          rails heroku デプロイ

          デプロイ手順$ cd アプリ herokuログイン『メアド、パスワード入力あり』 $ heroku login PostgreSQLをインストール『インストール済みならいらない』 $ brew install postgresql 本番 (production) 環境にpg gemをインストール『PostgreSQL』 『gemfile』group :production do gem 'pg'end ローカル除外して本番環境用にインストール $ bundle

          K's

          rails heroku デプロイ

          K's

          BEM

          BEMとはBEM ・・・ CSS設計、(Block Element Modifier) 　　　　　　　⚠︎CSS設計・・・CSSの記述ルール メリット・クラス命名が容易 ・要素の再利用が容易 使い方 Block ・・・要素の大元のブロック(命名：名詞) Element ・・・ブロックに属する子要素(命名：名詞) Modifier ・・・上記二つに修飾をする要素(命名：形容詞) Block Element はアンダーコアで接続(__) Modifier はハイフン二つで接

          K's

          BEM

          K's

          環境構築

          環境構築バージョン：macOS Catalina 1.シェル設定 1.zshをデフォルトに設定$ chsh -s /bin/zsh2.ログインシェルを表示$ echo $SHELL/bin/zsh 2. Command Line Tools Webアプリケーション開発に必要なソフトウェアをダウンロードするためのツール $ xcode-select --install『インストールクリック』『同意する』『ダウンロード完了』 3.Homebrew ソフトウェア管理ツ

          K's

          環境構築

          K's

          VS Code

          マイクロソフトが開発 無料で使用できるプログラミングに特化したテキストエディタ 導入1. ダウンロード リンク： vs-code.com 『Download for Mac』をクリックし『VSCode・・・.zip』をクリックし開く 2. アプリケーションフォルダに移動する 3. 開く macはシステム環境のセキュリティーとプライバシーにて許可する 拡張機能1. Japanese Language Pack for Visual Studio Code 　日本語

          K's

          VS Code

          K's

          MySQL導入(MySQLWorkbench)

          MySQLダウンロードサイトに飛んでダウンロード MySQL.com 『MySQL Community (GPL) Downloads »』クリック MySQL Workbench をクリック Select Operating System で自身のOSを選択し Download をクリック 『No thabks,just start my download.』をクリックしダウンロードする mac だとシステム環境のセキュリティーとプライバシーの変更を許可しなければい

          K's

          MySQL導入(MySQLWorkbench)

          K's

          Sequel Pro 導入

          Sequel Proとはデータベースの中身をわかりやすく視覚化して表示するアプリケーション ダウンロードsequelpro.com 　『DOWNLOAD』をクリックする。 『sequel-pro-○.○.○.dmg』を開く。 アプリケーションフォルダに移動させる。 設定名前           : localhost ユーザ名   :  root 接続クリックする。 接続エラーソケット接続失敗のエラー MySQLを再起動し再接続する。 < ターミナル >$ cd

          K's

          Sequel Pro 導入

          K's

          CSS ポケモンフォント使ってみた

          初めに見た目はこんな感じになります。 ダウンロードサイト： pokemon-font.com 下にスクロールし、『Download ↓』をクリックする Github に飛ぶと思います 『Source code(zip)』をクリックする 『pokemon-font-1.8.2.zip』をクリックして解凍する 設置するファイルの中身はこんな感じだと思います 今回使用するファイル、フォルダは2つです。 ・CSS 内の pokemon-font.css ・fontsフ

          K's

          CSS ポケモンフォント使ってみた

          K's

          タブ切り替え(jQuery)

          初めに今回の完成形 jQueryを読み込む<body>タグの後ろに記述 <script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script> <script src="js/script.js" ></script> </body></html> HTML 記述 <!-- タブ コンテンツ --> <div class = "tab-con

          K's

          タブ切り替え(jQuery)

          K's

          raindrops.js 水面アニメーション

          1. はじめに 『raindrops.js』は水面に滴が落ちるアニメーションです。 完成系は下記になります。 Gifが高速なので動画ファイルを貼っておきます。 2. ファイルをダウンロードする。 GitHub : raindrops-js-github.com 公式サイト : raindrops-js.com 以前以下の記事にて導入と設置をしていますのでわからない方はそちらをご覧ください。 ちなみに自身は以下の様に配置してあります。 3.HTML記述 <!-

          K's

          raindrops.js 水面アニメーション

          K's

          particles.js 背景アニメーション

          1. はじめに 『particles.js』は背景に幾何学模様や雪などの模様をカスタマイズできる。 今回の完成形です。 2. 導入 プラグインを公式GitHubからダウンロードする。 公式サイト：particles-js-github.com ダウンロード方法がわからない場合は以前の記事をご覧ください。 3. ファイルの設置と読み込みを記述 今回使用するファイルは『「particles.min.js」もしくは「particles.js」』です。 今回は自身はこの様

          K's

          particles.js 背景アニメーション

          K's

          SQL

          SQLとはSQL・・・『Structured Query Language』                     リレーショナルデータベースの操作をする言語 命令文の種類データを定義するDDL(Data Definition Language) データを操作するDML（Data Manipulation Language) DDL(データ定義)Create　・・・ 作成Alter　 ・・・ 更新Drop　 ・・・ 削除 DML(データ操作)Insert ・・・ 登

          K's

          SQL

          K's