全角チルダ？波ダッシュ？に殺された記録
事件はAndroidの文字入力で起きました． PCとスマホで入力文字の挙動が違う 依頼を受けてブラウザ上で縦書き画像を簡単に作れるサービスを開発していました． textareaから文字の入力を受けて，それをcanvas上にjavascriptで縦書き文字として描画するっていうシンプルなロジックのものでした． Reactをベースにして，特にこれと言ったライブラリは一切使っていませんでした．...
View ArticleBootstrapでの文字、背景色の変更方法
Bootstrap公式サイトの Documentation→Utilities→Colorsで使用できる文字色と背景色を確認することができる。 Color 「text-primary」や「text-secondary」などのクラスを指定してすることで対応した文字色に設定することができる。 <p class="text-primary">.text-primary</p>...
View Article【React】The above error occurred in the componentの対処法【styled-components】
症状 Reactでstyled-componentsを使用して、画面レイアウトの修正をしていたところ、下記のエラーが発生し画面が白飛びしてしましました。 翻訳すると、「上記のエラーはコンポーネントで発生しました」となりました。 imgコンポーネントで不具合が起きているようです。 error index.js:1 The above error occurred in the <img>...
View ArticleCSSだけで画像をトリミングする方法
画像を一覧で表示する際、画像によってサイズが異なる場合に統一して見やすくする方法。 画像を中央の位置でトリミング .image { object-fit: cover; } を追加することで中央できれいにトリミング可能。 画像を任意の位置でトリミングする 中央以外の位置でトリミングしたい時は object-position プロパティーを設定。 左上を基準にして、object-position:...
View ArticleCSS変数でbackground-imageを指定するとChromeとSafariで挙動が異なるのを解決する
Chrome と Safari で挙動が違う CSS変数で background-image を指定したら Chrome と Safari で挙動が違ったので備忘録として残しておきます。 失敗した実装 下記のようにCSS変数を使って指定します。 https://xxx.xxx/test/ という URL で想定しています。 動作サンプル...
View ArticleThree.jsを使って動きのあるページを作成しよう！
環境 MAMP導入済み Visual Studio Code 設定済み 今回使用する言語 HTML CSS JS 作業の目次 １：各フォルダの作成 ２：HTMLのコード作成 ３：JSのコード作成 ４：CSSのコード作成 1:各フォルダの作成 1.下記の画像のように、CSS / JS / img フォルダを作成しましょう！ ２：HTMLのコード作成 1.threeJS_4.htmlファイルを作成!...
View Article【今日の学びメモ】flex と inline-block
flex 親要素に指定。 子要素の上が揃う。 inline-block 子要素に指定。 子要素内の inline 要素の下が揃う。 ちゃんと調べたことがなかったのでメモ。
View Article[Rails]デプロイ後の修正を反映させる方法
はじめに 「AWSでデプロイしたはいいけど、デザインを修正したくなったよー」という人に向けた記事です。 デプロイ後の修正を反映させるには masterにpushする まずはローカル環境で修正したファイルをGitHubのmasterブランチにpushします。 $ git push origin master git cloneしたディレクトリにpullする...
View Article日本語でline-height:1.5って、ちょっときつくないですか？
行送り（line-height）の世界基準 アクセシビリティのスタンダードであるWCAGでは、行送りの最低値を1.5と定めている。しかし世の中のホームページには、リセットCSSを変更していなかったり（あくまでブラウザ間の差異を無くすためのものであり、スタイルを後付けすることが推奨されているわけだが、そもそもどうしてアクセシビリティ基準を守らないんだろうか？1...
View ArticleRailsで架空のCafeのHPを作ってみよう!【14日目】『文字数が多い時のテストコード』編
概要 基本Railsの記法に則り書いていきます！ １から全ての説明ではなく その中であれ？どうやるの？と 疑問に思った点や実装に困った箇所を ピックアップして紹介していきます♩ 設定と準備 ・Rails ・HTML ・CSS ・Javascript(jQuery) ↑上記の言語とフレームワークを使い 架空(自分で考えたテキトーなもの)のCafeの HPを作っていこうと思います！ 14日目の作業内容...
View ArticleAngularでSCSSをCSSに変換する方法
SCSSの方がもっと効率いいとは思いますが、プロジェクトによってはSCSSよりCSSを希望する場合もあるので、すでにSCSSで作ったプロジェクトを途中でCSSに変換した時やったことをまとめて置きます。 目標 進行中のAngularプロジェクトをSCSSからCSSに変換 ng g c compoment で新規コンポーネント追加時も、scssではなくcssにする 実施した環境： Angular...
View ArticlejQueryで簡単なモーダルウィンドウを実装
css style.css .modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; } .modal-content { position: fixed; top: 50%; left: 50%; width: 300px; height: 300px; margin:...
View ArticlejQueryでタブをクリックすると内容が変化するタブメニューを実装
css style.css .nav { width: 100%; max-width: 600px; height : 50px; margin: 0 auto; } .nav > li { list-style: none; float: left; width: 33.333%; background-color: #CCC; text-align: center;...
View Articlehtml/css/jqueryでフラッシュメッセージを実装する（コピペOK）
完成像 フラッシュメッセージ（下記gif画像）をhtml, css, jqueryで実装したのでコードと利用方法の備忘録を残しておきたいと思います。コードも解説しているのでご参考になれば幸いです。 Codeと解説 html html <button class="js-show-flash-success">成功メッセージ</button> <button...
View ArticlejQueryでマウスに追従するツールチップを作成してみた
css style.css .tooltip { position: absolute; padding: 20px; background-color: #fff; border-radius: 10px; border: 2px #CCC solid; } .tooltip-body { position: relative; line-height: 1.5; margin: 20px;...
View ArticlejQueryで文字数チェッカーを作成してみた
css style.css .input { position: relative; display: block; padding: 20px; width: 100%; background-color: #eee; -webkit-box-sizing: border-box; box-sizing: border-box; } .lest-count { position:...
View ArticlejQueryでボタンをクリックすると画像がスライドするスライドショーを作成
画像は各々で同じサイズのものを用意してください。 css style.css .slider-wrap { width: 600px; padding: 10px; margin: 0 auto; border-radius: 10px; background-color: #DDD; box-shadow: 0 2px 5px rgba(50, 50, 50, 0.4); }...
View ArticlejQueryで画像にフリック機能を持たせてみた
css style.css .swipe-photo { position: relative; width: 320px; height: 240px; margin: 0 auto; overflow: hidden; } .swipe-photo-container { position: absolute; top: 0; left: 0; } .swipe-photo-item {...
View ArticleRailsで架空のCafeのHPを作ってみよう!【15日目】『1以上の半角数字の正規表現』編
概要 基本Railsの記法に則り書いていきます！ １から全ての説明ではなく その中であれ？どうやるの？と 疑問に思った点や実装に困った箇所を ピックアップして紹介していきます♩ 設定と準備 ・Rails ・HTML ・CSS ・Javascript(jQuery) ↑上記の言語とフレームワークを使い 架空(自分で考えたテキトーなもの)のCafeの HPを作っていこうと思います！ 15日目の作業内容...
View ArticleHTML/CSS から始めるフロントエンド開発
序論 本稿は 元市役所職員がWEBプログラマに転職するまでのロードマップ の連載記事の一部です。 Webエンジニアの職種を大別すると フロントエンドエンジニア と バックエンドエンジニア に分けられます。 通常はいずれかの職種を専門にすることが多いですが、いずれにしてもWebサイトやWebアプリケーションサービスの開発を行うことになります。 そのため、Webを構成する基礎技術として HTML/CSS...
View Article