Clik here to view.
【初心者でもわかる】CSSだけでステップフローを作る
どうも7noteです。シンプルなステップフローの作り方申し込みフォームなどではEFO（フォームの最適化）の観点からステップフローをつけるのが一般的です。ステップフローは「入力 > 確認 >...
View ArticleClik here to view.
CSSの設計ルールFLOCSSとは？各ファイルの意味や適用順序（強度）を理解する。
CSSの設計ルールの一つであるFLOCSSの構造と使い方について。目次FLOCSSとは？レイヤー（ディレクトリ構造）foundationレイヤーlayoutレイヤーobjectレイヤーcomponentレイヤーprojectレイヤーutilityレイヤー統合用ファイルレイヤーの適用優先度（強度）CSSのカスケーディング（適用優先度の規則）カスケーディングとは？ファイル内の記述順序セレクタの種類命名規...
View ArticleClik here to view.
PurgeCSS のシンプルな使い方
PurgeCSS はプロジェクトで使っていない CSS を削除してくれる便利ツールです。本来は PostCSS や Gulp などのプラグインとして使うのでしょうが、コマンドラインで都度動かすこともできます。とりあえず使っていないCSSを削除したいときや、簡単に試してみたい時にはこんな方法でいいかもしれません。環境node v10.14.1purgecss...
View ArticleClik here to view.
雑に学ぶCSS設計
はじめに上司「味噌くん。しばらくコロナでお仕事無いから。」新人1年目僕( 経験積めない ↓ 最悪、転職(真っ白な経歴書) ↓ こりゃまずい)仕方ないから、Qiitaでポートフォリオを増産するか。 ←今ここ本題のちょっと前の話ReactでWeb開発する僕「うっ...個人開発初心者特有の汚いコードを書いてしまった。」個人開発によって生まれた汚いコード ←...
View ArticleClik here to view.
SCSSでの画像の挿入とサイズの指定
1.SCSSとは SCSSとはウェブページのスタイルを指定するCSSより効率よく記述するためのものです。 cssはよく聞くと思いますが、scssはあまり聞かないのじゃないかと思い今回記事を書かさせていただきました。2.SCSSでの画像挿入...
View ArticleClik here to view.
【CSS】marginかpaddingどちらを使うか？（marginとpaddingの仕様の違い）
余白を追加したい場合にmarginかpaddingどちらを使うかがわからなかったので調べてみた。説明できますか？ある要素（モジュール）の上に24pxの余白を追加する場合、margin-topで24px指定するのと、padding-topで24px指定するのは何が違うか？そして、どちらを使うべきか？回答推奨はmargin。理由はmarginの持つ相殺機能のため。marginを使えば意図した間隔を保つこ...
View Article【新春企画】Web Developer Roadmap を真面目に勉強するまとめ【フロントエンド編】
前提現在、組み込み系エンジニアの私が、今後はウェブ業界に挑戦するにあたって「強みは技術力です！」とかっこいいことがちゃんと言えるようになりたいと思いこの企画をはじめました。いつでもアクセス可能のように備忘も兼ねて書きます。これまで事前にこちらの記事を勉強済みです。↓↓↓Webエンジニアになりたい人に捧げる学習ロードマップ駆け出しフロントエンドエンジニアに求められるもの 1....
View Article【Sass】forループと変数でmarginやpadding、フォントサイズなどのCSSを簡単作る方法。
Sassのforループと変数を使うと、marginやpadding、フォントサイズなど一定の倍数で数値が変化するCSSを簡単に大量生産できる。目次forループの使い方変数の呼び出し方法変数の値をCSSのプロパティの値として使用する変数の値をセレクタや処理の途中で使うmarginを持ったプロパティの一括生成paddingを持ったプロパティの一括生成font-sizeを持ったプロパティの一括生成関連リン...
View ArticleデイトラWeb制作コース初級編DAY8・9の学び
【この記事に書いてあること】プログラミング学習9日目⏩Web制作コース 初級編DAY8・9💻学習時間:3時間45分⏳学習内容:HTML/CSSコーディング復習✏学び📚・コーディング手順 HTMLでキリがいいブロックまで書き上げる CSSを付けつつデザイン通りに調整していく#デイトラ#プログラミング初心者#プログラミング学習pic.twitter.com/eVdpWNyw2s—...
View Article【初心者でもわかる】最初と最後以外にCSSを指定する方法（1行でも書ける）
どうも7noteです。最初と最後を除くCSSの書き方最初と最後を判定してCSSを当てる範囲を決める方法。...
View Articleフレームワークとは
今回はフレームワークについて学習をしました。フレームワークとは何か、Ruby,PHP,JavaScript,CSSの代表的なフレームワークを公式サイトとURLと共に紹介します。説明不足があると思いますので、気になったフレームワークを公式サイトで確認してみて下さい。フレームワークとは「フレームワーク」という言葉には、「枠組み」という意味があり、アプリケーション開発においては、テンプレートの役割を持って...
View Article怖いよ, coqdoc さん！
Coq には、コメントをドキュメントとして扱う機能があります。ソースコードからドキュメントを生成するには coqdocというコマンドを使います。coqdocは LaTeX や HTML などを生成させることが出来ます。私も HTML のドキュメントを生成させたりしています。coqdoc は CSS と HTML...
View ArticleClik here to view.
Twitch のウェブサイトを YouTube のシアターモード風に改造する
Twitch.tv の配信画面を YouTube のシアターモード（動画をウインドウ幅いっぱいに表示→その下に２カラムで概要とチャット欄）にしたくて無理やり弄った記録。久々の JavaScript + CSS。↓ 結果はこんな感じ ↓もくじはじめにTwitch の画面構成代替手段モバイル版をPCで表示Multistre.am...
View Article(自分用)フロントエンドメモ
項目コンテナにトリミングせず良い感じに画像をはめ込むアンカー使ったリンクでPOSTしてvalueを渡すPDFを表示する縦中央寄せ(毎回検索してる気がする)コンテナ内改行リンクの下線消す区切り線を引く1.コンテナにトリミングせず良い感じに画像をはめ込むobject-fit:...
View ArticleClik here to view.
世界一わかりやすいグリッドデザイン入門
前提知識HTMLの基礎CSSの基礎概要複雑そうなグリッドデザインもコツを掴めれば簡単に実装できます！今回はそんなグリッドデザイン超入門初心者向け講座です！！早速やってみようとりあえずindex.htmlとstyle.cssを作成最初は超入門index.html<divclass="oya"><divclass="red-box"></div><divclas...
View ArticleCSS/JSでおしゃれなタブを実装！
こちらを参考に、おしゃれなタブ切り替えをポートフォリオサイトに実装しました。タブをクリックすると、タブの下線が移動して切り替わる、非常にシンプルなタブです。各タブの内容がディレイ表示されます。HTMLを記述HTML<h1>Lava lamp multiple...
View ArticleClik here to view.
でつまみを複数表示する
はじめに初投稿です。お手柔らかにお願いします。概要業務で複数のつまみを持つレンジバーが欲しい、という事態が発生したので、この記事(https://css-tricks.com/multi-thumb-sliders-particular-two-thumb-case/) を参考に実装しました。その備忘録です。以下のようなものが出来上がります。 See the Pen...
View ArticleWebサービスにおけるダークモード対応方法
先日、携わらせていただいているSpotlightというサービスのデザインリニューアルをしました。その際にダークモードに対応したので、それの知見共有です。ダークモードの対応方法CSSでの対応です。こんな感じで対応したい部分をメディアクエリの中に書き込みます。@media(prefers-color-scheme:dark){body{background-color:#000;}}それだけ！ダークモー...
View ArticleClik here to view.
【初心者でもわかる】bordreを2重に引くいろいろな方法
どうも7noteです。2重線を引くいろいろな方法を紹介基本的にborderの指定は1要素につき上下左右それぞれ1線しか指定できません。そうなった場合2重にborderを付けることができません。なので、2重にborderを付けたい場合に使える様々な方法を紹介していければと思います。方法その①...
View Article