Bootstrap(勉強メモ)
※学習時のメモです。 Bootstrapとは HTML、CSS、JavaScriptからなる巨大なライブラリ（コード集） twitterのような見た目のサイトを作る為の部品が多い Bootstrap4の利用には、jQueryとpopper.jsを利用する * Bootstrapの読込み...
View ArticlerailsでCSSをpreloadさせる
stylesheet_link_tag に preload を付与する。 PageSpeedInsight のスコアアップのために rails で CSS をプリロードさせてファーストビューのレンダリング速度をあげたい。 stylesheet_link_tag に media onload rel preload 属性を付与してあげる。 変更前.erb <%=...
View ArticleちょっとしたReactでのアニメーション
ちょっとしたReactでのアニメーション ※この記事は、ガッツリすごいアニメーションをやるものでは、ありません！ TypeScriptでReactなどWebフロントを実装している際、ちょっとした変化を持たせたいなと思って書きました。 ちょっとした変化 文字の色を変えたい 変位をゆっくりしたい 見た目の変化 HTML、CSSは、インターネットが始まって成長してきた言語です。...
View Article自己紹介HP作ったらあまりにも簡素だったのでhoverでこなれ感を出してみた
はじめに CSSのhoverを上手く用いることでHPに部分的にこなれ感をプラスできる方法を書きます。 コーディングを学習している際、「どうにかしてこのチープ感を脱したい！」という思いでhoverを使って動きを出すというところにたどり着きました。もし同様の悩みをお持ちの方の一助になれば幸いです。 想定読者...
View ArticleDjangoでテンプレートビューをCSSで修飾する方法
HTMLでテキストボックスを修飾する時とかってありますよね default.css .collor{ backgroundcolor:red } welcome.html <input type="text" class="color"> こんな感じでクラスで就職したりするんですが、 DjangoでCSSの修飾ってどう書くの？というメモ Formを使ってCSSを修飾...
View ArticleFlexboxを理解するためにコロンビア国旗を作ってみた №２
Flexboxを使って国旗を作る 目標：Flexboxの基礎を理解するため テキストエディターはVSCode. ↓下記のFlexboxチートシートを参考 Css Flexboxのチートシート ～codeを書き始める前の準備～ ・構成を考える！ 何をどんな風に、どうやって作るのか？ 最初にある程度決めておくと後が楽になります。 例 コロンビアの国旗を調べる...
View Article復習日誌_0415
HTML class divに付ける名前、グループ名のこと 最低限のルールを守れば、命名規則に関して正解はない 意味の分かる名前をつけること div 単体では特に意味を持たないタグだが、divで囲った部分をブロックレベル要素としてグループ化することができるタグ span 囲んだ要素を強調するなどのデザイン微調整によく利用されるタグ 個別にテキストのフォント調整、文字色・背景色の変更を施す...
View Article【CSS】「CSSチョットデキル」に、CSSだけで虹色に光るアニメーションをつけてみた
概要 ネタです CSSのanimation, keyframesのみで文字を虹色に光らせる とりあえずコード See the Pen CSS チョットデキル by Shiba (@shiba_gsgs) on CodePen. 重要なのはanimationと@keyframesです。 animation animation: rainbow 3s infinite;...
View Article相席居酒屋風時計を作ってみた
はじめに 大阪を歩いていると、相席居酒屋の看板が目に入る時ありますよね。 お店によっては、現時点での男性客と女性客の人数が表示されてるのですが、 ほとんど女性客のほうが多いイメージがあって、これ実は時計なんじゃね...?って思ったんで 最近javascriptの勉強を始めだしたこともあり、勉強がてら作成してみました。 作成物 javascript...
View ArticlePタグとwidthの相性の悪さの落とし穴にハマったので報告します
Pタグの横幅設定にwidthすれば余裕で横幅調整できると思っていたら落とし穴にハマったので ご報告します。 ↓普通のPタグで日本語文字と意図しない文字、そして数字を囲ってみました。 <p>おはようございます。こんにちは。こんばんは。おはようございます。こんにちは。こんばんは。おはようございます。こんにちは。こんばんは。おはようございます。こんにちは。こんばんは。</p>...
View ArticleVue.jsでSlackみたいなメンションと入力中の名前色付けを作った完成形コードとハマった話
Repsona LLCの@GussieTechです。「理想のプロジェクト管理ツール」Repsonaを開発しています。...
View ArticleCSSについて
CSSでタグを指定することがあると思います。 例えば、li{ } みたいな感じです。しかし、これではファイル内のすべてのにcssが適応されてしまいますので、 .class名 li { } とすると該当するclass名のにのみ適応されます。
View ArticleCSSだけ使って、どんな画面サイズでも縦横比と余白を維持したいんじゃ
やりたいこと 画面サイズによってメインコンテンツの大きさを変えたいけど縦横比は維持したい。 メインコンテンツは画面から少しマージンを取る。画面からはみ出さないようにする。 JavaScript で画面のサイズを計算してやってもいいけど動きがモッサリだから CSS だけでやりたい。 やってみた 縦と横の比は 4:3 画面サイズの 95% を超えないようにする この条件で実装してみました。 実装方法...
View Article回転する見た目も実装、jQueryで作るコイントスシステム
どうも7noteです。コインが回転するコイントスシステムを作った コイントスで調べると、表と裏がランダムで表示されるレベルのコイントスシステムはあったのですが、実際にコインが空中で回転するような見た目のコイントスはなかったので作ってみました。 コイントスシステムのソース index.html <div class="coin"></div> style.css .coin {...
View Articleolの数字を右揃えにする
ol.{ counter-reset: item; list-style-type: none; padding-left: 0; margin-bottom: 100px; } ol. li{ text-indent: -1.6em; padding-left: 2.2em; margin-bottom:20px; } ol. li:before { counter-increment:...
View Article【初心者でもわかる】CSSで「✕」の作り方
どうも7noteです。CSSオンリーで「✕」を作ります CSSを使って✕を作ります。 コピペで使えますよ。 線の端を丸くすることも可能 cssで✕の作り方 .batten { width: 20px; /* 線の長さ */ position: relative; /* 基準位置に指定 */ } .batten::before, .batten::after { content: ""; /*...
View Article余計なフレームワーク、ライブラリ抜きの Vanilla Web Project 20本でHTML5、CSS、JSを楽しくお得に学ぶ
Vanilla Web Project。 HTML5、CSS、JavaScriptのみで構築された20 (+増量予定と書いてある) のミニプロジェクトらしい。GitHubから引用。 # Project Live Demo 01 Form Validator Live Demo 02 Movie Seat Booking Live Demo 03 Custom Video Player Live...
View ArticleコーディングしやすいFigmaデータの作り方
これは何 UIモックアップデータを作る際、少しでもコーディングが楽になるように作る方法を書いた記事です 大抵のWebサイトやアプリ制作においては、UIのモックアップデータを作り、その後コーディングをすると思います そのため、見た目が同じでもデータの作り次第で作業効率が大きく違います この記事で取り扱うツールはFigmaですが、本筋はSketchでもXDでも変わりません...
View Article見た目重視でoutlineを消したいにしても、せめてこうしませんか？
これは何 （おそらく）見た目を重視してoutline: 0を指定するのはやめて、こうしませんか？という提案の記事 UAで付与されるoutlineがイケてなく感じる気持ちは分かります しかし安直にoutlineを消すとアクセシビリティが下がってしまうので、代替案を提示してみます そもそもなぜoutlineを消すのが良くないのか...
View Article