なるの備忘録

エンジニアリングそして営業ができるエンジニアに向けて、日々学んだことをアウトプットしていきます。

2019-04-01から1ヶ月間の記事一覧

【未解決】flexboxの子要素の位置指定とpositionは同時に利用できなさそう

flexboxで等間隔に並べたリストをpositionで画面上部に固定したいが… タイトルの通りです。flexboxで等間隔に並べたリストをpositionで画面上部に固定したかったのですが、どうもうまくいかなかったので改めて調べてみました。 サンプルコード HTML <html lang="ja"> <head> <link rel="stylesheet" href="style.css"> </head> <body> <h1>fl</h1></body></html>…

【予約語に注意】FuelPHPでユーザ登録をしようとすると「Fuel\Core\Database_Exception [ 1064 (1064) ]: You have an error in your SQL syntax;」と出る

FuelPHPでユーザ登録をするとエラーが出る。 FuelPHPでユーザ登録をしようとすると以下のようなエラーが出た。Fuel\Core\Database_Exception [ 1064 (1064) ]: You have an error in your SQL syntax; check the manual that corresponds to your MySQL serv…

「クラス名:nth-of-type(n)」で記載した場合、「クラスでn番目」ではなく、「要素でn番目」という数え方になる

「クラス名:nth-of-type(n)」で記載した場合、「クラスでn番目」ではなく、「要素でn番目」という数え方になる 「クラス名:nth-of-type(n)」で記載したときの挙動が気になったのでメモ。 以下の簡単なコードで動作を確認します。 簡単な動作確認用コード HTM…

コマンドラインでfuelPHPがインストールできないときの対策(syntax error near unexpected token `newline')

コマンドラインでfuelPHPがインストールできないときの対策(syntax error near unexpected token `newline') コマンドラインでfuelPHPをインストールしようとしたら、以下のようなエラーがでました。 $ curl get.fuelphp.com/oil | sh % Total % Received % …

Sassの変数と@mixinでレスポンシブデザインを作るときは@mixinの呼び出し順に注意

Sassの変数と@mixinで３パターンのレスポンシブデザインを作ろうとすると、CSSが適用されない PC・タブレット・スマホの３パターンのレスポンシブデザインをSassの変数と@mixinで作ろうとして、CSSがうまく適用されませんでした。 結論としては、Sassの変数…

yarnでnode-sassのライブラリを使うと「An output directory must be specified when compiling a directory」とエラーが出る

単なる打ち間違いですが、わりとハマってしまったのでメモ。 jsonファイルの中身 { "name": "test", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "build-css": "node-sass --include-path scss scss/style.scss css/style.css…

CSSのアニメーション機能を使って、扉から飛び出すように画像を表示させる

せっかく学習したのでCSS3のアニメーション機能を使って、扉から飛び出すような画像表示機能を作ってみます。 動作イメージ 最初は扉のような画像が表示されています。 扉にカーソルを重ねると勢いよく扉が開きます。 直後に勢いよく画像が飛び出してきます…

基本的なクロージャの実践例の「モジュールパターン」は何が起きているの？

なんとなくクロージャーは分かったけど… 「JavaScriptのスコープの概念」や「クロージャーのメリット」は理解したけど、いまいち典型的なクロージャーのコードで何が起きているか分からなかったので調べてみました。 典型的なクロージャーのコードと分からん…

自動的に画像がスライドしていく画像スライダーを作る

HTML、CSS、JavaScript(jQuery)で自動的に画像がスライドしていく画像スライダーを作ります。 よくWebページのトップバナーがこんな感じに変化していますね。 動作イメージ ページを開くと１枚目の画像が表示されています。 しばらくすると画像が左にスライ…

今一度jQueryの.html()と.text()と.val()の違いを確認する

指定した要素の内容を変えるのによく使うjQueryの「.html()」と「.text()」と「.val()」。 正確に動作の違いを確認していなかったとふと思ったので、改めて整理します。 動作確認用コード HTML <html lang="ja"> <head> <meta charset="UTF-8"> <title>html text val</title> </head> <body> </body></html>

jQueryでほぼ一行で、ページを開くとスクロールして一番下の文章を表示させるテキストエリアを作成

ページを開くとスクロールして一番下の文章を表示させるテキストエリアを作ります。履歴一覧など、ユーザには基本的には最新の情報を見せたいけど、過去の内容も見せたいってときに使えそうですね。 jQueryでほぼ一行で実装可能です。 動作イメージ ページを…

画像をクリックするとPOST送信できるボタンをHTMLとCSSで作成

画像をクリックするとPOST送信できるボタンをHTMLとCSSで簡単に作ります。 画像自体をクリックして先に進めるので、UIが良くなりますね。やり方としては、透明なsubmitボタンを画像の前に置き、まるで画像をクリックしたようにPOST送信をさせます。 動作イメ…

HTMLとCSSとJavaScriptでキャラクター選択画面を作る

ゲームとかにありがちなキャラクター選択画面のアニメーションをHTMLとCSSとJavaScriptで簡単に作ります。 動作イメージ キャラクターを選択する前はボタンは灰色になっていて押せません。 キャラクターをクリックすると、キャラクターの周りが赤く囲われま…