TSで簡単なアニメーション
サーバーサイド言語ばかりをやっていると、たまにはhtml, css, typescriptで遊びたくなる今日この頃。 Vue.jsしか使わない私がTSだとアニメーションがわからなくなったのでメモ。 vue.jsのcreatedでAjax通信の関数を呼び出し、返ってきたときに画面が描画されるような仕様にしたかった。 index.html <!DOCTYPE html> <html...
View Article@import
CSSでよく見る@importの仕様をあまり考えず使っていたが、調べる機会が訪れたのでメモ。 @importは複数の外部CSSファイルを読み込む時に使うため、その分HTTPリクエスト数が発生するらしい。 common.css @import...
View Article【初心者でも簡単】CSSで再生ボタンを作る
どうも7noteです。動画が流行っているので再生ボタンを作ってみました。 動画の再生ボタンを独自で作成したい時用に、「再生ボタン」を作ってみました。 クリックで再生停止も操作できるようにクリックしたら一時停止の見た目に変わるようにします。 ソース index.html <div class="btn"></div> style.css .btn { width: 100px;...
View ArticleRails6でカスタムフォントを使用する方法
はじめに Rails5では簡単にカスタムフォントを追加できたのですが、Rails6で追加するのに手こずりましたので、私が実際に試した方法を簡単にご紹介します。 環境 Ruby 3.0.1 Rails 6.1.3.1 ① カスタムフォントの配置 まずカスタムフォントを GoogleFonts などから使用する素材をダウンロードし /app/assets/fonts...
View Articleレンダリングブロックに配慮したリソースの読み込み（CSS編）
はじめに こちらの記事はレンダリングブロックに配慮したリソースの読み込み（レンダリングの基本編）の続きです。 前述の記事を読んでおくと、当記事の内容も理解しやすいかもしれません。 やるべきこと CSSファイルが読み込まれるとパース後にCSSOM（CSS版のDOMのようなもの）の構築が行われます。...
View Articleline-height
■ line - height とは 行の高さを指定するプロパティを指します。 簡単に説明をすると文字の大きさは変わりません。 ですが、ノートで言うA行のノートからB行のノートに変わったと思ってもらえればいいと思います。 こちらがイメージ図です⬇️ ■ 記述の仕方 line-height: 20px, ■ おまけ 上下中央揃えにしたいときは line-height を使う事もできます！ 投稿は以上です！
View ArticleTwitterのログイン画面がバグってる風に見えるけど、バグじゃなくそういうデザインであることを調査してみた
どうも7noteです。Twitterのログイン画面(PCブラウザ)がホラーで話題なので、バグでなくデザインであることを調査してみた。 結論から話しますと、 「バグではありません。そういうデザインみたいです。」 バグなのか？と話題になっている情報のまとめサイト↓ なんの事？という方もおられると思うので、ツイッターのログイン画面（PC ブラウザ）をおみせしますね。...
View Article開発環境の準備とか
急な事態、、、 急な状況なので、HTML、CSS等を学んでいきます。Qitaの練習も兼ねています。 開発環境の準備1 開発環境を準備します。 ダウンロード 今回は簡単な内容ですのでテキストエディタでも充分なのですが、今回はVisual Studio CODEを利用します。普段使用しているVisual Studioとはちょっと違いますのでご注意ください。...
View Article要素を中央に持っていくまとめ(HTML,CSS)
要素を中央に持ってくるやり方を毎回忘れるのでまとめてみました。 他にもやり方があるかもしれませんので、気づいた方おりましたら コメント頂けますと幸いです。 ①文字列の高さを中央にする index.html <style> .container { height: 100px; position: relative; box-sizing: border-box; border: 5px...
View ArticleAnimationと@keyframesの基礎を理解するためbuttonを作ってみました
Animationを使ってbuttonにアニメーションをつけてみる 目標：Animationと@keyframesの基礎を理解するため テキストエディターはVSCode. ↓下記の方のtransitionの説明を参考にしました @7968様 とても解りやすかったです！！ 今回はcodePenで書いてみました♪ ※head部分は省略 See the Pen oNZvJQG by...
View ArticleFont Awesomeのアイコン(SVG)に縁取りをする
デザインなどでFontAwesomeのアイコンを重ねて表示したい時に、そのまま重ねると境界がないためきれいに表示させることができませんでした。 枠線の色を背景色と同じ色にして、枠線を太くすることでアイコンを縁取りするCSSを追加すると重ねても区別して表示されるようになりました。 svg.fa-star { stroke: #82a5c8; stroke-width: 12px; }
View Article【CSS】clip-pathをいろいろ試してみた(No.1)
初めに cssのclip-pathを使うと画像を切り取ることが出来ますので、関連記事を参考に理解した内容を纏めてみました。 ※内容に間違いなどがある場合はご指摘をよろしくお願いします。 clip-pathとは cssで要素にcliping領域を作って、表示したい部分（切り取りたいところ）を指定することが出来るプロパティ。 clipプロパティのupgradeバージョン。 clipとの違い...
View Article【備忘録】HTML＆CSS 初級編
はじめに ProgateでHTML＆CSSコースを受講しました。 勉強ついでに、学習したことを備忘録としてまとめようと思います。 環境 OS：macOS エディタ：VSCode ブラウザ：Google Chrome 受講コース：HTML & CSS 初級編 1 本コース中に使用したHTMLのタグとCSSのプロパティ...
View Article文字をfloat: leftして、中身を縦中央に揃える
保存用 floatをつかって、別々の要素を左に寄せて、かつ寄せた要素の中の文字を中央寄せ 下記で最初は問題なかったが、アニメーションをｊｓで加えた瞬間効かなくなり、要素が改行された。 disply: flex; align-items: center; floatを使用し同じ段落へ持ってこようとしたが、disply: flexが打ち消され今度は中央揃えができなくなった。 float: left;...
View ArticleReact&CSSで文字を上下左右の中央揃え
./src/App.js import logo from "./logo.svg"; import "./App.css"; function App() { return ( <div className="App"> <h1>Hello React!</h1> </div> ); } export default App;...
View Article数当てゲームの改良版
数当てゲームを改良して、正解、不正解でブラウザ上に表示する文言を変えました <!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1">...
View Article【初心者でもわかる】CSSだけで作る、端の丸い矢印(>)の作り方
どうも、7noteです。CSSのみで、角のない矢印(>)の角が丸い矢印をつくります 矢印をアイコン画像などで作ってもいいのですが、cssを使って角丸にします。 このタイプの矢印(>)のよくある作り方としては正方形の2辺をborderで作り、45度回転させるのが多いのかなと思います。 ですがこの方法では角がかくばってしまいます。...
View ArticleVuetify - ディープセレクタと v-select の余分な空白
やりたいこと Vuetify でディープセレクタを使う v-select の余分な空白を削除する サンプル sample.vue <template> <v-select class="select-input-none" /> </template> <style scoped> .select-input-none >>>...
View Article【備忘録】カスタムデータ属性（data-*）について
初めに cssやjavascriptでカスタムデータ属性が使われている。カスタムデータ属性とは何か、そして使い方について備忘録として残します。 ※内容に間違いなどがある場合はご指摘をよろしくお願いします。 カスタムデータ属性とは htmlのタグに固有の値を付与してcssやjavascriptでその値を取得して利用できるようにしたもの。 書き方...
View Article検索ボックスの中にアイコンを入れる
某サイトのこれを真似してみたくなったので、備忘録として書きます。 <header> <div class="header-inner"> <h1>TESTタイトル</h1> <form> <input type="text" placeholder="アニメタイトルや声優で検索♪">...
View Article