Clik here to view.
【翻訳】tailwindcss.com - Core Concepts
tailwindcssについて興味を持ち理解を深めたいと考えたため翻訳しました。もともと個人メモ用に軽く訳そうと考えていたためですます調ではありませんが、読んでいるうちに普及させたいと思い推敲はしました。変なところあればどんどんご指摘いただけると幸いです。ユーティリティファーストhttps://tailwindcss.com/docs/utility-first従来 Web...
View Article子要素が全てfloatでも、親要素が子要素を含む高さを持つように設定する
親要素の高さは子要素を包む高さとなりますが、子要素が全てfloatの時、親要素の高さは0となってしまいます。これは、floatが「浮いている」という意味で、親要素から見るとfloatの子要素は存在しないように見えるためです。floatの解除子要素が全てfloatでも、親要素が高さを持つように設定してみます。floatはclear: left;で「浮いている」状態を解除できます。clear:...
View ArticleFlexbox入門
Flexboxを使うとfloatで実現していたような縦並びや横並びのレイアウト、または折り返しのレイアウトを簡単に組むことができます。横並びにする display: flexdisplay: flexは指定した要素の子要素を横並びにします。使い方横並びにしたい要素の親要素にdisplay:...
View ArticleClik here to view.
【ただの自己満】初心者向けの使えそうなCSS画像アニメーション３１選
こちらの記事に記載のデザイン・コードは全てオリジナルなので自由に使っていただいて大丈夫です(筆者が作成したため)Web制作で使えるかは保証できません。自己判断で修正するなりして参考程度に使ってください。Webデザイナーに興味のある方はこちらも合わせてどうぞ↓【回転×サイズ拡大/縮小】CSS画像アニメーション３選『解説付』動きは下の画像のような感じになります１....
View Article自分的tailwindcss導入時スタイルガイド
この記事の目的個人的な開発をするときのcssのルール。考え方とかもまとめるのでcss設計を考える際の実例として読んでもらえると。条件tailwindcss導入rails6railsのviewを利用基本方針SMACSSをベースにできるだけ保守性を上げたいので抽象度を上げて使い回しできるようにしたいオリジナルのカスタマイズもできるようにしたいルールSMACSSのルールを踏襲し、下記に分ける...
View Article引数に最小値（min）最大値(max)を入れるとランダムな整数を返してくれる関数
ランダムな整数が欲しい！そんなときはこの処理を使おう！自分がよく使っている関数です。constrand=(min,max)=>Math.floor(Math.random()*(max-min+1))+min;なんのこっちゃない処理ですがブラウザゲーム作成時によく使います。rand(1,10)//1〜１０までのランダムな整数を返してくれますいろいろと応用が効くので使いやすい。...
View Articleliタグで作成したリンクの下線がtext-decorationで消せない
はじめに前提条件 railsでのアプリケーション作成エラー？下記のように確かにliタグに対してtext-decorationを設定しているのに適用されないapplication.html.erb<ul class="lists"> <li class="list"><%= link_to "エクササイズ", "#" %></li>...
View ArticleClik here to view.
シンプルな申し込みフォームを作った
HTMLやCSSを勉強として、シンプルな申し込みフォームを作りました。どんなフォームをどのように作ったかを簡潔にまとめました。成果物作ったものはこんな感じ。会員制サイトにありそうなシンプルな申し込みフォームを作りました。HTML<div class="content"> <h1>入会申し込み</h1>...
View Article【Google HTML / CSSスタイルガイド】を初めて読んだので、一言で分かるようにまとめてみた -基本・HTML編-
どうも7noteです。フロントエンジニア4年目です。何万行とHTML・CSSを書いてきたので綺麗なソースにはそこそこ自信がありました。ですが、Google HTML /...
View Articleストップウォッチ作ってみた(HTML,CSS,JavaScript)
ストップウォッチ作ってみたHTML,CSS(SCSS),JavaScript(not jQuery)でストップウォッチ作ってみました。ストップウォッチ作成は初心者が通り道らしいので私も通ってみました。どこか変なところやアドバイスがあればコメントお願いしますー！ちなみにSCSSは特に解説してません。完成形こんな感じのができました。0.5 倍で見ると見やすいです。CodePen...
View ArticleClik here to view.
swiperの雛形にはこれを使え！！
※公式のフォーマットとは異なります！※使えなくなるオプションがあるかもしれません！完全に個人用です。よくあれこれどうやったっけと忘れて、その度時間けかちゃってるのでメモ残しておきます。これを、使え！！<divclass="mycontainer"><divclass="swiper-container"><divclass="swiper-wrapper"><...
View ArticleClik here to view.
二度と忘れるな。swiperで見切れさせる方法はこれだって言ってんだろ！！
俺は、バカなのか...swiperでのカルーセル案件、今までに何度もやってきただろ...なんで見切れさせるのに毎回苦戦しているんだよ...！二度とこいつに時間をかけなくてもいいように、ここに私の奮闘記を残します。やりたいのはこういうカルーセル。端っこのコンテンツがちょっと見切れちゃってるようなのを実装したい時のお話です。slidesPerViewは小数が使えるんだ！！つまりこう。varmyswipe...
View ArticleClik here to view.
LP模写 - Write(随時更新)
1. できなかったこと1.1 profile-widgetとfooterのSNSボタン謎のmargin-rightが解除できない2. AIclassつけ方VScode拡張機能devツール使い方ポートフォリオGoogle Drive & サーバーDentalClinic - レスポンシブWrite - レスポンシブProgate - jQuery
View Article【Google HTML / CSSスタイルガイド】を初めて読んだので、一言で分かるようにまとめてみた -CSS編-
どうも7noteです。前回の続きです。HTML編はこちらから4.CSS4.1 CSSスタイルルール4.1.1 CSSの妥当性『文法通りの正しい書き方で書きましょう』文法チェックはこちらからできますとのこと。→https://jigsaw.w3.org/css-validator/4.1.2 IDとクラスの命名『id名とclass名は内容や意味を表す名前を付けましょう』/* 非推奨...
View Article個別のブラウザのみ適用のCSSの書き方
Edgeのみに適用sample.css@supports(-ms-ime-align:auto){span{color:#c00;}}IEのみに適用sample.css@mediaalland(-ms-high-contrast:none){span{color:#c00;}}Firefoxのみに適用sample.css@-moz-documenturl-prefix(){span{color:#0...
View ArticleClik here to view.
GoogleColabでdisplayにより出力されるpandasのデータフレームのデフォルトスタイル（CSS）を変更
概要GoogleColab のなかで、IPython.display モジュールで経由で出力されるデータフレーム pandas.DataFrameのデフォルトの見た目（スタイル／CSS）を変更するための方法です。なお、GoogelChrome で動作確認をしています。データフレームのスタイルを変更GoogleColab....
View Articleラジオボタンにラベルを紐づける
ラジオボタンをデフォルトのものではなく独自でデザインしたものにしたいときは、before,afterで疑似的にラジオボタンを作成します。（参考：https://shu-sait.com/input-label-id-for/#outline__1）その際もとのラジオボタンの代わりになるlabelにしっかりとradioのinputタグを紐づけなければボタンとしては機能しません。example.html...
View Article【初心者向け】検証：HTMLのブロック要素に効かないCSSはあるのか
どうも、7noteです。検証記事です。検証：ブロック要素に効かないCSSはあるのか以前インライン要素に効かないCSSという記事（こちら）を書きましたが、それでふと思いました。「ブロック要素に効かないCSSってあるのか？」いや、フレックスボックスで子要素に指定しないと反映されないとかはあるかもしれないが、実際効かないCSSってあるのかパッと思いつかなかったのでちゃんと検証してみました。よく使われるCS...
View ArticleClik here to view.
現役Vueエンジニアが参考にしているフロントエンド素材まとめサイト４選
今回の記事ではフロントエンド開発で参考にしているサイトを紹介していきます。どれも動くCSS素材やコピペだけで簡単に実装できる素材がまとまっています。気に入ったサイトを自己判断で参考にしてみてください。TwinzLaboコピペだけで作れるデザインレシピを公開しています。動きのあるデザインやオシャレなWebデザインなど様々な記事があるのでおもちゃ屋さんに来たかのように楽しめます。記事に使用しているアニメ...
View ArticleClik here to view.
【@keyframesを5分でマスター】現役Vueエンジニア実装！完全オリジナルのCSSアニメーション３０選（解説付き）
コピペだけで作れる@keyframesを使用したCSSアニメーションを３０個ご紹介します。animation-duration、animation-timing-function、animation-direction、animation-iteration-countなどの@keyframesプロパティを要所要所で使い分けています。コードには説明もわかりやすく書いてあるのでかなり参考になります完全...
View Article
