HTML DOM ベースのゲームエンジン作り
デモ:シューティングゲーム Github 良かったらプレイしてね HTML の DOM ベースのゲームエンジン「Domini(仮)」を開発中。 ゲーム上の自機や弾はブラウザのデベロッパツールで見ていただけると DOM だとわかります。 なぜ DOM ? Web ベースのゲームエンジンのほとんどは、自由な描画のために Canvas を利用しています。 DOM...
View ArticleTailwind CSS に入門してみた
フロントド素人ですがLaravel8から採用されている TailwindCSSに入門してみたのでメモ✏️ TailwindCSSとは Tailwind CSSはユーティリティファーストのCSSフレームワークです。 Tailwind CSSの特徴は、「1つのクラス名は1つのstyleに対応する」です。 〜中略〜 Bootstrapとの違いは「button」のようなコンポーネントが存在しないことです。...
View ArticleCSSで画像にぼかし(ブラー)をかける方法
CSSで画像にブラーをかける方法 クラス付与でぼかしを入れる方法は、 HTML.css .blur{ -ms-filter: blur(6px); filter: blur(6px); } と定義すればOK。 背景だけにブラーをかけたい場合は、beforeを用いて、 HTML.css .blur{ background: url(imageURL) no-repeat center;...
View ArticleCSSだけで画像をフェードインさせる方法
概要 トップページの画像をフェードインさせる。フェードインしてくると見栄えが全然違ってきます。 「アニメーションだからJavaScriptかな・・・」と思いましたが調べてみるとCSSだけで可能でしたのでここに記述します。 ※Railsのヘルパーメソッドで作成しました 手順 1.HTMLで画像があるクラスを定義する 2.親クラスにposition: relative;、子クラスに...
View Articleheight以外の方法も!?高さを指定できる7つの方法
どうも7noteです。要素に高さを持たせる方法を紹介。 HTMLの要素に高さを持たせるならCSSでheightを指定するのが一般的。 ですが、heightを使わなくても高さを指定する方法もあります。 いろいろな高さの設定方法を紹介。 マニアックな高さをもたせる指定方法もあります。 ① height style.css div { height: 100px; /* 高さ指定 */ }...
View ArticleCSSが嫌いなエンジニアが多い理由を、勝手に考えてみた
どうも7noteです。CSSが嫌いな方が多いですが、私はフロントマンなのでCSSは好きです。 Twitterを見ていると、 「CSS嫌い」 「CSSむずい」 「CSSわからん」 などなどの言葉をちょくちょく見かけるなと思っていました。 実際エンジニアの方から「CSS、よくわかるなぁ」なんて感じの言葉をかけられることもあります。...
View Article【入門】Sassの基礎
Sass(Syntactically Awesome Style Sheets) CSSを拡張した言語で、効率よくCSSを作成できる。 「.scss」、または「.sass」という拡張子のファイルに記述する。(.scssが主流らしい) 「.scss」、または「.sass」をコンパイルすることで、cssファイルが作成される。 以下に基本的な使用例を記載する。(作成されたcssファイルは記載しない)...
View ArticleWebで使われるデータ形式(HTML,CSS,画像,動画,音声)
マークアップ言語 HTML(HyperText Markup Language) HTMLは、Webに特化したマークアップ言語(文字データになんらかの情報や構造を持たせるもの)である。 HTML文書は、タグによって囲まれた文章によって構成される。タグは「開始タグ」と「終了タグ」からなる。開始タグ、文章、終了タグの塊を要素と呼ぶ。 HTMLの先頭におくDOCTYPE宣言は、バージョン形式を伝える。...
View ArticleFlexboxを自由に操ってジョージア国旗を作ってみました。
Flexboxを使って国旗を作る ジョージア国旗 目標:Flexboxの基礎を理解するため テキストエディターはVSCode. ↓下記のFlexboxチートシートを参考 Css Flexboxのチートシート ~codeを書き始める前の準備~ ・構成を考える! 何をどんな風に、どうやって作るのか? 最初にある程度決めておくと後が楽になります。 例 ジョージア国旗を調べる...
View Articlecssでファミコン風表現
google fontsに日本語書体のバリエーションが8種類も増えており、その中にドット風のテキストも含まれてました。 今までドット文字を使う場合はフォントをダウンロードし、読み込んで使うことがほとんどだったのですがgoogle fontsに追加されたおかげで気軽にドット文字を使うことができるようになり、いくつかcodepenで使用してみました。 メニュー See the Pen dot menu...
View Article【Javascript】Javascript/Cssでモーダルを作ってみた
初めに ボタンを押したら周りの背景が薄暗くなり、画面の真ん中に出てくるウィンドウが気になり、javascriptとcssを使って実装してみました。また、自分なりに学習し学んだ内容を記事にしてみました。 ※内容に間違いなどがある場合はご指摘をよろしくお願いします。 モーダルとは...
View Articlebackground-attachiment:fixed;を使わずにパララックスにする方法(iOS端末、Safari対応)
パララックス背景を実装してiPhoneで見てみたら上手く動かなかったので、調べてみたところ、background-attachiment position:fixed;で背景を固定するやり方は、iOS端末では対応していないことがわかった。 そこで上記のCSSを使わずにパララックス背景にする方法を調べて、上手く実装できた。 パララックス背景とは...
View ArticleFlexboxの基礎を徹底的な理解のために中央アフリカ共和国の国旗を作ってみる
Flexboxを使って国旗を作る 今回は中央アフリカ共和国の国旗 黄色の星は省きます 目標:Flexboxの基礎を理解するため テキストエディターはVSCode. ↓下記のFlexboxチートシートを参考 Css Flexboxのチートシート ~codeを書き始める前の準備~ ・構成を考える! 何をどんな風に、どうやって作るのか? 最初にある程度決めておくと後が楽になります。 例...
View ArticleHTML,CSS による静的サイトをHerokuにデプロイ
0. はじめに 案件などで稼ぎたいときにエンジニアはポートフォリオを作成するだろう。そして誰もが躓くのが公開(以下デプロイ)だ。今回は無料でサーバを利用できるHerokuでポートフォリオをデプロイする方法について紹介する。デプロイにはgitを用いる。 1. 準備 今回はPHPを用いてデプロイしていく。「PHP使ったことない」という人でも簡単に実装できるから身構えないでほしい。...
View ArticleCSSのflexboxで最後の1つだけ右寄せ、または最初の1つだけ左寄せにする方法
グローバルナビのコーディングに参考にしました CSSのflexboxで最後の1つだけ右寄せ、または最初の1つだけ左寄せにする方法 https://wemo.tech/2320#index_id1
View Articlevertical - align プロパティ
■ はじめに この記事は私の知識量を増やすため行うものです! こちらの記事はCSSの情報となっています。 ■ vertical - align とは テキストや画像などの内容の上下方向の揃え位置を指定するもの。 この表現だけではピンと来ないかもしれません。 なので、今回はイメージ図を用意しましたので御覧ください。 < イメージ図 > vertical - align を使用する前 ↓...
View Article【初心者向け】CSSを圧縮して軽量化できるオンラインツールを紹介
どうも7noteです。CSSを簡単にmin化させて軽量化できるツールを紹介。 WEB制作において、ページの読み込み速度は命に関わります。(そこまでではないです。) 画像を圧縮しておくのと同様に、理論上はソースファイルも1文字でも短いほうが読み込み速度は上がります。 そんなときに目でいちいちチェックしていられないので、CSSを1クリックで圧縮してくれるWEBツールを紹介。...
View ArticlejQueryでふわっとさせる(コピペ可)
1.ふわっとさせたいHTMLの要素にクラスをつける index.html <div class="他クラスとも共存可 effect-fade"> //処理 <div> 2.CSSにふわっとさせる処理を書く style.css .effect-fade { opacity: 0; transform: translate(0, 100px); /* ふわっとさせる高さ */...
View ArticleGridレイアウトを理解するため Gridしてみた!!
Gridを元にレイアウトしてみる 完成版はこちらです ↓↓ 目標:Gridレイアウトの基礎を理解するため テキストエディターはVSCode. ↓下記のGridレイアウトチートシートを参考 Gridレイアウトのチートシート ~codeを書き始める前の準備~ ・構成を考える! 何をどんな風に、どうやって作るのか? 最初にある程度決めておくと後が楽になります。 例 どの位Gridを書くのかを調べる...
View ArticleCSSの重複したプロパティや無効なプロパティを見つける
概要 開発でCSSを書いていて、重複したプロパティがあっても自分では気づけないことが多くあります。 意識するだけでは見つけられない余分なコードも、ツールを使って簡単に見つけらればいいなと思って探したところ便利なツールやサービスがあったので紹介します。 Yellow Lab Tools 上記のサイト上でサービスのURLを入力するとWebパフォーマンスを調べてくれます。 その中に「Bad...
View Article