アプリ作成②「じゃんけんゲーム」
次に取り組んだのは、昔ゲームセンターで遊んだ「じゃんけんポンっ」のゲーム作成。 目指すイメージは決まっているが、そこまでどういうプロセスをたどるかは、完全にオリジナル。 とりあえず、基本的なアプリ設計過程と同じように、要件定義→設計→実装→テストというウォーターフォール型の行程をたどってみた。 要件定義は、ただじゃんけんで勝敗を決めるゲームを作るというごくごく単純なものなので難しくない。...
View Article悪徳ひきこもり支援業者一覧アプリケーション
悪徳ひきこもり支援業者一覧アプリケーションを開発しました 一覧表示部分 <!-- 悪徳ひきこもり業者一覧作成システム --> <!-- 新規作成 2021/07/22--> <!-- 作成者 乃木坂好きのITエンジニア--> <!DOCTYPE html> <html lang="ja"> <!-- ヘッダー部分-->...
View ArticleTailwind CSS 入門してみた for Vue.js
この記事は？ はじめまして！恵比寿でエンジニアをやってる Zak です。 最近よく Tailwind CSS を耳にするようになりました！ どうやら CSS を書く量が減ってかなり楽になるのだとか 🤔 個人的に CSS を書くのはやりたくないことランキング第3位に入るくらい嫌いなので興味本位で使ってみました！ 簡単にセットアップできたので今回は Vue3系で Tailwind CSS...
View Article【CSS】画像の位置を調整する
img画像の縦横比を維持したままトリミングする exampl.html <div> <img src="*******" class="img"> </div> example.module.scss div { width: 100px; height: 100px; img { width: 100%; height: 100%; object-fit:...
View ArticleWebとは。
webとは 英語ではクモの巣という意味です。 正式名称はWorld Wide Webです。 これは世界規模のクモの巣という意味で その名の通り世界規模でクモの巣のように張りめぐらせれてる状態（仕組み）のことです。 概念的には、 インターネットを使ってwebページをつなぎ合わせた仕組みのことをいいます。 ここで大切なのはwebというのは仕組みのことだとまず理解しておくことだと思います。...
View Articlebox-sizingはborder-boxにセットするのはおすすめ
box-sizingはborder-boxにセットするとデザインの設計はしやすいだと思います。 例えば下記の<div>要素で border-box <style> .border-box { background-color: yellow; width: 200px; height: 200px; border: solid 20px blue; box-sizing:...
View ArticleCSSを書くときは、プロパティや値の意味が自然になるものを選ぼう
これは何 CSSでは同じUIを表現するにしてもたくさんの書き方があります 最終的な見た目は同じになるとしても、プロパティや値の意味が不自然なものを選ぶと後から困りがち…… 自然な書き方の例をいくつかまとめた記事です 中央揃え 何かの要素を左右中央に揃えたいとき、text-align: center;でもdisplay: flex; justify-content:...
View ArticleLWCでの共通スタイルシート(CSS)
1.目的 今回LWCでの共通スタイルシート(CSS)の方法を共有します。 2.ソース構成図 lwc ├─commonStyle └─commonStyleChild commonStyle commonStyle.css .commonCss { font-size: 30px; color: #fff; background-color: rgba(128, 129, 56, 0.5);...
View ArticleAnime.jsをプロダクトで使用する4つの理由
この記事では「Anime.jsをプロダクトで使用する3つの理由」と題して、Anime.jsを実際にプロダクトで使用した中で見えてきたポイントについて、以下の順番でまとめたいきたいと思います。 軽量で扱いやすい（実装したいアニメーションがシンプルなものだったため） 公式ドキュメントが読みやすい チームでの開発/運用がしやすい 変更が容易（突発的な仕様変更にも耐えうる） 一つずつ、詳細に見ていきます。...
View ArticleRailsで架空のCafeのHPを作ってみよう!【12日目】『特定のデータの取得(active:hashの属性値)』編
概要 基本Railsの記法に則り書いていきます！ １から全ての説明ではなく その中であれ？どうやるの？と 疑問に思った点や実装に困った箇所を ピックアップして紹介していきます♩ 設定と準備 ・Rails ・HTML ・CSS ・Javascript(jQuery) ↑上記の言語とフレームワークを使い 架空(自分で考えたテキトーなもの)のCafeの HPを作っていこうと思います！ 12日目の作業内容...
View Articleポートフォリオ作成の配色に困ったときに使えるアプリ
はじめに ポートフォリオ作成で配色のセンスがありません。。。 そんな時、youtubeで見つけた良いアプリがあったので紹介させていただきます。 Coolors ランダムでベストな配色を決めてもらえるアプリです。 まずはStart the generator!をクリックして始めましょう！ このような色がランダムで表示されます。 気に入った配色が出るまでスペースキーで押しましょう！...
View Article【HTML】”各セルそれぞれ任意スクロール設定可能”な3×3行列の段組み【CSS】
↑ 昔の HP でよくみたフレーム構造ですが、これはインラインフレームではなく CSS で実現しています。 ２行２列、３行３列を示します。これにより任意行列も可能かと思われます。 https://bit.ly/3i6UCKW (元記事) 2行2列 2行2列CSS /* ####################### 変数 ######################## */ :root {...
View Article【CSS】 background-size: cover; 画像周りに余白
発生した問題 メイン画像を貼った時に、画面いっぱいに表示させようと思ったのだが、どうしても周りにスペースができてしまった。 解決法 body { margin: 0; padding: 0; } 原因 原因は「user agent stylesheet」と呼ばれるもの。 「user agent stylesheet」とは、ブラウザ毎に設定されているデフォルトのCSS設定のこと。...
View ArticleちょっとHTML, CSS, JavaScriptを試したいときに使えるChromeの拡張機能をご紹介！
はじめに こんにちは。東京のコロナ感染者すごい増えてますね... 重傷者が少ないことを祈るばかり さて、今回は知人に紹介した拡張機能なのですが、これいいぞ！ってあまり宣伝している人がいなかったので、宣伝しようと思います！ 結論 これです↓ なにができるのか ちょっとHTML, CSS, JavaScriptを試せるエディタが出現します！ コンソールも出るので、JavaScriptのデバッグもできます...
View Articleコピペでpaddingとborderを幅(width)と高さ(height)に含める(CSS)
コード paddingとborderを幅(width)と高さ(height)に含める.css /* 「* （アスタリスク）」はすべての要素にかかるセレクター */ *{ /*paddingとborderを幅と高さに含める*/ box-sizing: border-box; } これで完成！！！
View ArticleコピペでHTML要素を消す方法(CSS)
コード HTML要素を消す方法.css /*「*(アスタリスク)」は全部の要素にかかるセレクター*/ *{ display: none; } これで完成!!! 英単語 none ⇨なし
View Articleinput または button type="search"のクリアボタン （バツボタン）を全端末で削除する
こうすればいいらしい input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; } 参考記事 https://terkel.jp/archives/2010/08/reset-input-type-search-style/...
View Articleコーダーがhtml/css/js(jquery)で学ぶオブジェクト指向
まえがき とっつきにくいオブジェクト指向ですが、 応用次第ではUIデザインにもcss設計にも使えるシンプルかつ優れた概念です。 今回は、そのオブジェクト指向をなるべく視覚的な視点から ざっくり解説しようと思います。 →という趣旨で社内のhtmlコーダー向けにQiitaに書いたものを転載してみます。 なお、途中でクラスだのインスタンスだのと単語が出てきますが、...
View Article【Rails】Bootstrapを導入する方法
My Profile プログラミング学習歴②ヶ月目のアカウントです！ プログラミングスクールで学んだ内容や自分が躓いた箇所等のアウトプットの為に発信しています。 また、プログラミング初学者の方にわかりやすく、簡潔にまとめて情報共有できればと考えています。 もし、投稿した記事の中に誤り等ございましたら、コメント欄でご教授いただけると幸いです。 対象者...
View ArticleRailsで架空のCafeのHPを作ってみよう!【13日目】『f.text_areaの値を改行、空白含めそのまま反映』編
概要 基本Railsの記法に則り書いていきます！ １から全ての説明ではなく その中であれ？どうやるの？と 疑問に思った点や実装に困った箇所を ピックアップして紹介していきます♩ 設定と準備 ・Rails ・HTML ・CSS ・Javascript(jQuery) ↑上記の言語とフレームワークを使い 架空(自分で考えたテキトーなもの)のCafeの HPを作っていこうと思います！ 13日目の作業内容...
View Article