Clik here to view.
【初心者でもわかる】hover時のCSSをhtmlのタグに直接書く方法
どうも7noteです。hover時にだけCSSを当てる方法。CSSは.cssファイルに書くか、<style></style>の中に書くのが一般的ですが、HTMLのタグの中に書くことも可能です。index.html<!-- HTMLのタグに直接CSSを書く方法...
View ArticleClik here to view.
【HTML設計思想 / クラス命名】最高に管理が楽なわたし的BEM
はじめに爆速コーディングの記事で HTML の設計を楽にするため・HTML をブロック管理する感覚を掴むためにに BEM を取り入れることをおすすめしました。 Block, Element, Modifier という設計概念を持つ BEM の中でも、さらに様々な BEM 命名規則が存在するようですが（これらを今回は「BEM 系」とします。）、私が上記記事で BEM と指したのは BEM...
View ArticleClik here to view.
jqueryプラグインの導入からオプションの設定方法まで。
自分への備忘録としてbxsliderとlightboxの導入からオプション設定までをまとめてみました。おまけでドロワーメニューも書いてます。是非参考に。準備当たり前ですが、以下の一次ソースは必須です。・lightbox公式HP・bxslider公式HP今回はCDN方式で使うので以下も使用します。・cdnjs画像を使うので以下に貼っておきます。ご自由にお使いください。ベースコードとフォルダ階層【フォル...
View ArticleHTML/CSSに関するメモ
はじめにHTML/CSSについて、調べる度毎回内容を忘れてしまうので内容を備忘録としてまとめておく。HTMLタグについて色々なタグがあって覚えきれないが、分からなくなったら以下のページを参照する。HTMLクリックリファレンスclass/idについて参考記事：classって何？CSSと組み合わせて使う方法を徹底解説CSSとidの関係とは？要素に名前をつけて細かくデザイン指定しようclassはHTMLタ...
View ArticleProgate＜HTML＆CSS道場コース初級編＞コードと一言メモ
初めて記事を投稿します。といっても現段階ではプロゲートでHTML&CSSの学習・道場コース初級編を1周終えただけですが。道場コースやってみたら、なかなか正解にたどり着かなかったので、復習もかねて自分が書いたコードをここに載せていこうと思います。一応正解が出たコードなので、道場コースで躓いている方の手助けになればと思います。①ヘッダー作成~HTML①~qiita.html①<body&g...
View ArticleClik here to view.
Railsチュートリアルで作ったサンプルアプリの「ファイルを選択」ボタンをかっこよくしてみた
環境Windows10 Home ver.2004ruby 2.7.2p137 (2020-10-01 revision 5445e04352) [x64-mingw32]Rails 6.1.0はじめに...
View ArticleClik here to view.
【初心者でもわかる】CSS1行で2段や3段の多段リスト（マルチカラム）を作る
どうも7noteです。逆N字順のように以下のような縦向きに順番で並んでいるが、横に複数列に分けられるような多段リストの作り方――――――１ ４ ７２ ５ ８３ ６ ９――――――...
View Article【Ruby on Rails】RailsでのBootstrapの導入方法
Bootstrapとは・Teitter社が開発したCSSのフレームワークの事です。・サイトのデザインを簡単に作成することができます。・よく使われるスタイルがあらかじめ定義されているので、定義されたルールに従って利用すれば整ったデザインのページを作成できます。Bootstrapの導入方法1.gemを追加するBootstrapを使用する為に、以下gemを追加します。・bootstrap-sassGemf...
View ArticleClik here to view.
AmazonとTwitterの吹き出しコンポーネントの実装方法を調査してみた
吹き出しコンポーネントとは吹き出しコンポーネントは会話などを表示するために方向を表示する三角のアローとボーダーのある四角いボックスを組み合わせたUIコンポーネントを意味します。英語ではSpeech...
View ArticleTailwind CSSでpx指定できないのを何とかする
Tailwind CSSとはCSSフレームワークの一種。CSSを書かなくてもクラス名を付けるだけでスタイリングができるようになる、便利なフレームワークです。例えば：<divclass="hoge">fuga</div>というHTMLにheight:...
View ArticleClik here to view.
jQueryとCSSでマウスカーソルを良い感じに作る！
最近マウスカーソルがカスタマイズされたイケイケのwebサイトをよく見かけるので、作りました。ただUIの事を考えると、変にカスタマイズされたカーソルはストレスでしかないのでやりすぎはNGです。作り方以下のように2つの円形を作って、1つは通常のカーソルの動き、2つは少し遅らせ追従するような動きになるように作りました。jQueryで座標の取得とクラス追加、cssでカーソルの装飾をしていきます。HTMLdi...
View Articletableタグの中でflex-boxを使うとborderが重なるのを回避する
現象flexクラスがついたtdの中身を上下中央の横並べにしようとすると、flexクラスがついたtdのみborderが太くなる See the Pen QWKVMMK by kena-nk (@kena-nk) on CodePen. 回避策①...
View ArticleiOS Safariでも下までスクロールするモーダルの作り方
iOS Safariでモーダルを表示した際、作り方によっては画面下部のツールバーが表示されているとモーダルを下までスクロールすることができないことがあります。おそらくheightのとり方に問題がありそうで、width: 100vw; height:...
View ArticleClik here to view.
Reactのスタイリング(classNameやclassNamesの使い方)
classNameとはhtmlではclassを使ってスタイリングをしますが、Reactが使っているjsxではclassNameを使ったスタイリングを行います。classNameの使い方classNameの使い方は簡単で、classと全く同じです。今回はAppを入れましたが、変数などを入れることも可能です。classNames動的なクラスの使い分けをする場合や複数のクラス名をつける場合はclassNa...
View Articlereceiptline で作った SVG の電子レシートを CodePen してみた
今回は「Webグラフィックス Advent Calendar 2020」に投稿した記事「SVG + CSS + Node.js + receiptline で電子レシートを発行してみよう」の補足です。上記の記事では、作成した SVG の電子レシートを貼り付けることができず、仕方なくスクリーンショットを撮って PNG 形式で貼り付けていました。ところが、翌日に投稿された、カレンダー作成者...
View ArticleClik here to view.
【初心者でもわかる】CSSの点線や破線（dashed）の間隔を調整する方法
どうも7noteです。破線の間隔を調節する方法もっとも簡単な点線や破線をCSSで再現する時はこのようにかきますが、この方法では間隔を調整することができません。style.css/* 点線 */.dotted{border-bottom:2pxdotted#000;}/* 破線...
View ArticleNext.jsでのtailwindcssの導入の仕方
流行りのスタイルのtailwindcssの導入の仕方(Next.js)npx create-next-app next-jsで導入したファイルに1.npm installnpx create-next-app . --use-npm npm i tailwindcss npx tailwindcss init -p 2.🗂stylesのglobal.cssの中身を書き換える@tailwind...
View ArticleClik here to view.
プログラムを少しかじった私がバックエンドエンジニアとして働くためにECサイトを作り始めてみた その⑤
対象者・バックエンドエンジニアを志す人・web開発初学者・ECサイトを作成しようと思っている人・初学者の勉強仮定を見たい方はじめにこんにちは！この投稿はその④の続きです。前回は年末年始を挟んであんまり実装が進まない状態でした。実装する機能の洗い出し、スケジュール、実装を進めていきました。並行で行っている開発との兼ね合いもあり今回の更新内容は少なめです。目次1.今回の作業報告2.反省点3.次回までの目...
View ArticleClik here to view.
HTMLの、ブロック要素サイズの留意点
はじめにHTMLのブロック要素と width とかとの関係について、注意すべき点をまとめた説明が少ないようなので、浅くとも広くここに書いてみます。このドキュメントでは記述を簡単にするため、横方向のみについて書きます。また、この記事中でのサイズの指定は、全て px を使います。実際には auto...
View ArticleClik here to view.
ProgateでHTML,CSSを学んでみた（1日目）
概要Web開発に興味が出てきたのでとりあえず一通り必要そうなものを触ってみることにしました。ただ触るだけだと忘れてしまいそうなのでメモとして学んだことを書いてみます。ここにあるコードはほぼ全てProgateで出てきたものです。HTMLの仕組みHTMLはタグと呼ばれる印をつけることでテキストに意味付けをする言語。見出し以下のように囲むと見出しという意味になる。<h1>Hello...
View Article