[Rails]ローディング(ロード画面)の実装
おしゃれなサイトはローディングをよく実装していますので、今回はポートフォリオにて実装してみました。 思ったよりかんたんに実装できて、サイト全体の雰囲気がアップするのでおすすめです！ 参考にしたサイトは以下で、「1.【サンプル】ローディング（テキストだけでふわっと）」をRailsのアプリケーションに落とし込んで解説していきます。 【jQuery】 ローディング、実装サンプル集 開発環境 ruby...
View Articlerailsでcssが反映されないエラーActionController::RoutingError (No route matches [GET]...
app/assets/stylesheets/home.scss 上記のようにhome.scssファイルを作ってcssを書き app/assets/views/home/index.html.erb 上記のようにhomeフォルダにindex.html.erbファイルを作ってhtmlを書いた。 「rails s」でサーバーを起動すると ActionController::RoutingError...
View ArticleiPhoneで確認するとCSSが崩れている際の対処法
WEBアプリケーションの開発において、スマートフォンやタブレットでの使用を想定したレスポンシブデザイン化はマストです。 しかし、実際にコーディングしてみるとPCでは問題ないのに、スマートフォンで確認してみるとスタイルが崩れているケースがあります。 この記事では、実際に私が遭遇したケースをもとに、CSSで指定したスタイルがiPhone上で反映されていない際の対処法について紹介します。...
View Articlejavascriptで作る〇✕ゲーム
はじめに 最近、javascriptを学ぶ機会があり簡単なアプリを開発したいと思いました。 そこで、〇✕ゲームを開発しようと考え今回に至ります。 これを作ることができれば、友達との対戦が可能になるので是非見てください！！ 〇✕ゲームとは？ 3×3 の格子を用意し、二人が交互に「○」と「×」を書き込んでいき3つ並べるゲームのこと。 コード javascriptのコード <script>...
View Article凄いよShadow DOM！ Web標準によるスコープ付きCSSのあるコンポーネント制作術
世はReact, Vueなどのフロントエンドフレームワーク大航海時代 どんなライブラリーを使って、どんな方法でCSSを書けばよいのか 日夜、熱い議論が交わされている今日この頃‥ ブラウザ標準だけでコンポーネントもスコープドCSSも書けるんだよ！ 実は一方でWebの標準仕様であるWeb...
View Article遊び: コピペ禁止解除とQiitaのShadow DOMのCSSの上書き
前書き 痒い所に手を届けたい派なので、不満があったらちょくちょくScriptを書いています。今回はその一部を記載。 TypeScript依存症なのでTypeScriptで書いていますが、トランスパイル後のJavaScriptソースも記載。 (拡張機能上でちょっとした修正を行いたいときがあるので、Minifyはしておりません) 筆者は以下のChrome拡張機能を常用。...
View Article[Rails]JavaScript(jQuery)を使ったアコーディオンメニュー
今回はクリックしたら開閉できるアコーディオンメニューの実装をしていきます。 メニューの中身は最初隠していて、クリックで出てきて、しまうとまた隠れるので、色々なところで使える便利な機能です。 完成イメージはこちらです。 画像なので動きがないので、確認したい方は、ぼくのポートフォリオを確認してみてください。 下部のQ＆Aが同じ手順で実装しています。 それではいってみましょう！ 開発環境 ruby...
View Article疑似要素のbeforeとafterの使用方法について簡単にまとめてみた[CSS]
擬似要素とは 要素の一部に対してスタイルを適用できる指定方法です。 HTMLの要素を擬似的にCSSで設定するので、HTMLのコードを汚すことなく装飾を適用することができます。 なお、検索エンジンはCSSである疑似要素をコンテンツの中身として見ていないため、SEOを気にせず表現できます。 擬似要素には、::beforeと::afterがあります。...
View ArticleJavaScriptでアプリを作成しました【1】【FizzBuzz問題】
はじめに 学習するに至った経緯 2020年より、未経験からエンジニアへの転職を目指し、某プログラミングスクールへ通う。 入学後、『Ruby』を未経験から学ぶ人が多いのと『Ruby』の求人が思っていた以上に少ないので、 卒業後、フロントエンドのエンジニアを目指す事に。 Javascriptの学習した事を言語化し、認識の深化による備忘録として記載。 【要件】...
View ArticleWordPressで子テーマのCSSを編集したがそれが反映されない
WordPressでホームページのフォントを変えようと思って、子テーマを作成してそこにstyle.cssを作成し、その中身を編集して、FileZilla経由でそれをアップロードしたのですが、なぜか思ったようにフォントが変わりませんでした。 どうやっても変わらなかったのですが、いろいろ調べた結果、キャッシュがクリアされていなかったことが原因でした。 く、くっそー。。。こんなことでもつまずくのか。。。...
View Articleこれから学習する言語についてまとめた
はじめに これからプログラミングを学習するにあたって、学ぶ言語について以下にまとめました。 （間違いがありましたら、ご指摘を頂けますと幸いです） HTML 言語の正式名称 ハイパーテキスト・マークアップ・ランゲージ（Hyper Text Markup Language）の略 ハイパーテキスト 文書・画像・図表・音声・動画などのリンクを貼ったり、埋め込むことができる仕組み マークアップ...
View Articlefloatプロパティとclearfixの使い方
floatプロパティとは？ 要素を横並びに配置することができるCSSコード。 書き方 float: 値； 「値」には、 ・left…左寄せ ・right…右寄せ 以下2つを使うことはあまりない。 ・ none…フロートやめる ・ inherit…継承させる 例） 以下のように横並びしたい時は…。 対象のクラスにfloat: left；。要素の２つともに記述すること。 floatの解除...
View ArticleFontAwesomeのアイコンの大きさを変更する
はじめに FontAwesomeのアイコンをオリジナルアプリに取り入れています。 そこでサイズを変更がなかなかうまくいかなくて時間がかかったので投稿します。 間違えたこと <div class="review-gear"> <i class="fas fa-cog"></i> <i class="fas fa-trash-alt"></i>...
View ArticleCSS で要素をちょうど中心に持ってくる
はじめに いつも目測でなんとなくやってしまっていた。 インターン先でコードを読んでいる途中、綺麗に配置する方法を知ったのでまとめた。 今回は codepen を使って説明する。 中心に配置したい要素を用意する 横が 300px, 縦が 150px の長方形を作った。 要素の左上端を中心に移動させる position: absoluteとし、left: 50%かつtop: 50%の位置に移動させた。...
View Articlekintone cssを適用する方法
動機 kintoneアプリを作成していて、画面の項目にcssを適用したいときがある。 個人的にjavascriptとcssを合わせて比較的シンプルに適用する方法ではないかと思うので備忘のため記録に残す。 注意 kintoneの仕様が変わったら使えなくなる可能性がある。 画面イメージ ２つのテキストボックスにスタイルを適用する例で示す。 その１ テキストボックスにスタイルを適用...
View ArticleFlexboxで特定の要素を下揃えしようとしたらひっかかった話
はじめに 初めまして r-higaと言います。システムの部署にいますが、普段はwebデザインをメインにフロントコーディングも少し行ってます。 今回はタイトルの通りflex-directionでリストカセット内のボタン位置を揃えようとしたら、ちょっとしたところでひっかかりもったいないオバケに時間を食べられてしまったので、備忘録として残しておきます。 結論...
View ArticleConfluenceでコードブロックを使わずにコードを貼り付けたい
Confluenceでコードを貼ろうとすると、 まぁ、これがとにかくめんどくさい。 マクロにあるコードブロックを使うことになりますが、 ショートカット（{code）でコードブロックを呼び出せたとしても 強調表示はいちいち作ったコードブロックをクリックして編集を選び、その上で選択しなければならず、 複数行選んで一気にインデントをしようと思っても一行目しかできずストレスが溜まりまくり。...
View ArticleRailsで架空のCafeのHPを作ってみよう!【6日目】『複数形がないコントローラ』編
概要 基本Railsの記法に則り書いていきます！ １から全ての説明ではなく その中であれ？どうやるの？と 疑問に思った点や実装に困った箇所を ピックアップして紹介していきます♩ 設定と準備 ・Rails ・HTML ・CSS ・Javascript(jQuery) ↑上記の言語とフレームワークを使い 架空(自分で考えたテキトーなもの)のCafeの HPを作っていこうと思います！ 6日目の作業内容...
View Article[CSS] なぜタグに対してスタイルを当ててはいけないか
CSS で「タグに対してスタイルを当てず、クラスに対してスタイルを当てる」という規約をよく聞くと思いますが、その理由は理解しているでしょうか？ この記事では、なぜタグに対してスタイルを当てるのが駄目か解説したいと思います。 この記事を理解するために必要な前提知識 CSSの詳細度に関する理解 詳細度がわからないという方は解説記事が色々あるため、理解できそうな記事を探して一度読んでみましょう。 結論...
View Article【SkyWay】Peerをブラウザのみでマッチングさせる方法(JavaScriptSDK)
作成されたPeer同士を、クライアントサイドのみでマッチングさせる方法を紹介します。 紹介する内容は、偶数番目のPeerが奇数番目のPeerに発信する方法で、Peerが2つ作成されたタイミングでマッチングします。 接続中のPeerIDを取得する JavaScriptSDKには接続中のPeerIDを取得するメソッドが用意されています。...
View Article