初心者によるプログラミング学習ログ 202日目
100日チャレンジの202日目twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。すでに100日超えましたが、継続。100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。202日目はおはようございます202日目udemyでcss+メディアクエリ、webサイトコーディング、Gitいろいろやった。休みがあと3日でおわるので、あと3つぐらい...
View ArticleClik here to view.
Spring 案件ソルーション 3
Spring画面系をどう乗り切るか（技術面）その３CSS/Jqueryを試してみる。趣旨とんがった案件でなくてもSpring画面系で必要な技術 HTML CSS jQuery...
View ArticleClik here to view.
R qgraphでspring-embeddedレイアウトのグラフを描く
Rのqgraphを使って、下図のようなspring-embeddedレイアウトのネットワーク図を書く方法の備忘録です。題材は、自分がこれまでコーディングしたCSSファイルをanalyze-cssで解析したメトリクスデータを集めたもの。メトリクスの相関の強さをqgraphで表してみました。動作環境および必要なソフトウェアバージョンは本記事執筆時点で使用しているものmacOS Mojave...
View Article初心者によるプログラミング学習ログ 203日目
100日チャレンジの203日目twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。すでに100日超えましたが、継続。100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。203日目はおはようございます203日目udemyでgit、webサイトコーディング、css+メディアクエリ#100DaysOfCode#早起きチャレンジ#駆け出しエ...
View ArticleClik here to view.
グラデーションの上に画像と文字を表示
グラデーションの上に画像と文字を表示学習した内容のアウトプットをしてこなかったので、まずはメモ程度の内容からの投稿です。やりたいこと以下のような画像があるとして、矢印で示した要素で表現したい。...
View ArticleHTML&CSS学習
本日が初投稿です。学習したことをメモ書き程度に書く場にしようと考えております。多めに見てやってくださいm(__)mHTMLとは 静的なwebサイト作成に使用される「マークアップ言語」の一つです。タグを使いテキストを囲むことで、「見出し」や「リンク」を作成することができます。タグの例...
View Articleherokuデプロイ 背景画像表示させる
記事投稿の理由初めてherokuでデプロイした際に画像が表示されなくて苦しんだので復習兼ねて記事書かせていただきます。環境によって違う場合もある。参考程度にみてくださると幸いです。今回のテーマと環境rails...
View Article初心者によるプログラミング学習ログ 204日目
100日チャレンジの204日目twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。すでに100日超えましたが、継続。100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。204日目はおはようございます204日目udemyでwebサイトコーディング#100DaysOfCode#早起きチャレンジ#駆け出しエンジニアと繋がりたい—...
View ArticleWindowsでHTMLを書いているときにパス指定で躓いた話
WindowsでHTMLのパス指定をする際の落とし穴とかなんとか言っていますが、結果的に見るとこれは僕の凡ミスです。一応メモとして今回のミスを書き残しておきます。今回のミス今回躓いたのは、WindowsでHTMLコードを書いているときのパス指定です。...
View ArticleSassの記法(SCSS構文)
scssファイルの拡張子は.scssです。 SCSSのCSSへのコンパイルについてはWeb制作向けnpm-scriptsをご参照ください。※Compassは個人的に使用していないので扱いません。output-styleSCSSをコンパイルしてCSSにした場合の形式は4種類あります。元になるSCSSscsssection { background-color: white; h1 {...
View ArticleClik here to view.
SVGとCSSで線が回るテキストアニメーションをつくる
はじめに SVGとCSSを使い、線が回るテキストアニメーションを作ります。完成像↓（右下のRerunを押すと再開します） See the Pen SVG Text Animation by MasatomoFukuda (@chitomo12) on...
View ArticleClik here to view.
jsで簡単なオーディオプレーヤーを作る
機能JavascriptとjQueryライブラリで以下の機能を搭載するオーディオプレーヤーを作った。・ボタンを押すことで音楽の再生/一時停止、停止・スライダーを動かしてボリュームの調整・再生と同時に再生中の楽曲の名称とアーティスト名、再生時間を表示ファイルの構造としては、media1/templates下にmusic.htmlを配置し、mp3ファイルをmedia1/music下に配置。まず、HTML...
View Article疑似要素:beforeや:afterのcontentで丸数字（特殊文字）を表示する方法
以下の内容を書き換える。1.「&」→「\」(windowsは「¥」) 2.「#」→「0」（←数字のゼロ） 3. 数字は「10進数」→「16進数」参考→10進数←→16進数変換プログラム 4....
View Article初心者によるプログラミング学習ログ 205日目
100日チャレンジの205日目twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。すでに100日超えましたが、継続。100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。205日目はおはようございます205日目udemyでwebサイトコーディングprogateでRubyちょこっとやってみた#100DaysOfCode#駆け出しエンジニ...
View ArticleClik here to view.
flexboxで最終行の要素の幅を揃える小技
悩み事と結論CSSのFlexboxは便利ですが、下のようなことでお悩みになったことはありませんか？レスポンシブデザインなため1列の要素数をピッタリ揃えられず、最終行の要素だけ幅が変わってしまう悩みです。実はこの問題、HTMLだけで簡単に解決できます。1列に並べたい最大個数だけ、末尾に下のようなadjuster要素を追加してください。この例の場合1列は最大4個なので、末尾に4つ足しています。<d...
View ArticleClik here to view.
【A-Frame】VRコンテンツの作り方
はじめに社内制作でVRコンテンツを作成しました。細かいコンテンツ作成などは置いておき、VRっぽいものを作るまでの流れが簡単だったので紹介します。環境OS : Windows 10 Proエディター : VSCode実装1. A-Frameの読み込み<html><head><script...
View ArticleCSSのcontentプロパティがUNICODEっぽく文字化けして困るとき
after要素で「必須」って表示させたいのにCMSの影響なのかしらんけどUNICODEっぽく文字化けして困るとき～content要素をUNICODEで書いて解決。なお↓はよく使う‘必須’の文字。content: "\5FC5...
View Article