ググりまくって試行錯誤したがやはりvertical-alignが効かない
前提読者タイトルの通りひとつの可能性vertical-alignを設定しているセレクタのline-heightとfont-sizeをheightより小さくする。複数行文字を表示している人には関係ない話終わり
View ArticleClik here to view.
【初心者でもわかる】ハンバーガーメニューをハンバーガーにする。
どうも7noteです。本日作る料理はハンバーガーです。まずは一般的なハンバーガーメニューの作り方から。一般的なハンバーガーメニューの作り方index.html<divclass="menu"><inputtype="checkbox"id="check"class="hidden"><labelfor="check"class="open"><span>...
View ArticleClik here to view.
【検証】checkboxとlabelを使えば切り換え機能を伴うUIは全てjavascriptを使わずに実装できる説
検証する説今回お持ちした説は、こちらです。※ devroomさんを使わせていただきました。どのような仕組みか<input type="checkbox">のid属性と、<label>のfor属性で関連づけさせることができる。...
View ArticleClik here to view.
rgba 指定した背景を inherit するのはやめとけ (または Figma/XD では透過度で色を決めない)
タイトルのままです。どういうケースか一番わかりやすいスニペットをおいておくとこんな感じです。意図してこういうスタイル指定になることは稀だと思いますが、フロントエンドフレームワークを利用していると意図せずこのようなスタイルがあたっている可能性があります。<html><body><divid="main"style="background-color:...
View ArticleClik here to view.
【前編】MENTA使ってメンターと開発なう
こんにちは！備忘録として題名の経過を書き綴ります！まず初めに、7月終わりから無料のPHPスクールに約1ヶ月通い、生のPHPを勉強しました。勉強内容は以下です。＊)学校では渡されたソースコードに基づいて、1行づつ処理内容をアウトプットする。＊)自習では渡されたソースコードを3〜4回模写する。書いてみると余裕に見えますが、内容が濃ゆく、あっという間の1ヶ月でした。卒業後は成果物作成のために、書籍を購入し...
View Article[CSS設計]わたしはクラス名でもう悩まない[BEMベース]
クラス名で悩み、時間を無駄にしないための記事命名規則はBEMベースなので、Block / Element /...
View Article意外と知られていない便利な擬似クラス10選
2020年９月現在、60個もの擬似クラスがあります。その中でも、そこまで知名度は高くないけど実は便利な擬似クラスを「汎用的に使える擬似クラス」と「フォームで使える擬似クラス」に分けてご紹介します！そもそも擬似クラスとはCSSの擬似クラス(Pseudo-classes)は、セレクターに付加するキーワードであり、選択された要素に対して特定の状態を指定します。例えば :hover...
View ArticleClik here to view.
【初心者でもわかる】簡単！ラベルデザインの作り方
どうも7noteです。画像に「SALE」とか「カテゴリー」などのラベルを付ける方法を解説。まずは見本をどうぞ。このように画像やブロック要素に目立たせる用のラベルデザインをCSSで付けていきます。運用・使い方のイメージは、特定のクラス名が付いたものだけラベルが付くようにします！作り方index.html<divclass="box...
View ArticleClik here to view.
Tyハロトレ29日目
卒業制作今後の流れ1/4 スタート2/9 発表2/12 最後の授業比較的自由ですが、リアルなサイト（知り合いのサイト）10/12 「良い所あるかな」と、ここから調べておかないと、11月、年末に間に合いません。11/12...
View ArticleCSS セレクターでの大文字小文字区別について
はじめにちょっと気になったので実際に調べてみました。用意した HTML とその結果<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width,...
View Article[Rails]カスタムフォントの設定
はじめにアプリ開発でフリーフォントを使用してデザインを変えたのでその使用方法をまとめました。目次1 フリーフォントの準備 2 フォントの読み込み1...
View ArticleClik here to view.
Rails6でHTMLとCSSのみを使ってシンプルにフォームをつくるメモ
はじめにRailsで bootstrapなどのCSSフレームワークを使わない、素のコードが意外とみつかないので、そのメモ前提Receptionモデルがあり、カラムは名前と目的。目標このようなシンプルなフォームをHTMLとCSSのみをつかってシンプルに書くHTMLフィールドはtext_field,select_field,submitの3つhtml<%= form_with model:...
View ArticleReact.js で SVGファイルのサイズや色をCSSで変える方法
前提React.js, webpackReactでSVGファイルをimgとして読むとスタイルをCSSで変更できない（サイズはできるが色はできない）のでinlineで読む必要がある複数のサイズや色のために複数のSVGファイルを用意したくないSVGファイルを変換したReact Componentのファイルも作りたくない概要inline...
View Article【初心者でもわかる】classにできなくて、idならできること3つ
どうも7noteです。idにしかできない事があるんです。コーディング始めたての頃はなんとなくclassを使っててidと何が違うのかよくわからないままという人は意外と多いんじゃないかなと思います。何に使えるのかこの記事でハッキリさせます。idのおさらい。まず、書き方はこう。index.html<divid="hogehoge">ほげほげ</div>id=""をタグの中に書きます...
View ArticleClik here to view.
CSSでプロフィール画像設定のような円系に切り取るUIを作る
よくある画像をアイコンのように丸くトリミングするUIを作る際、画像のトリミング自体はその辺のJSライブラリを利用して容易に実現できます。しかし、その多くが四角くトリミングするもののため、実際に丸く表示されている範囲はわかりません。それを解決するためにCSSで丸く表示される範囲を明るく表示してそれ以外をグレーアウトさせるコードを以下にメモします。↓こんな感じのやつtriming.scss.trimin...
View ArticleClik here to view.
Django シフト表をスクロール固定したりしたいけど…
現在の月間のシフト表がこのような状態です。下の方にいくとどれが何日なのかわからなくなっていしまっています。 HtmlとCSSはほぼ勉強したことがないので、おしゃれ表 HTML...
View ArticleClik here to view.
Tyハロトレ30日目
CSSiPhone frameJavaScriptとは、インタプリタ型のプログラミング言語である。インタプリタ型・・・プログラム実行時にオブジェクトコード（コンピュータが実行できる形式）に変換していくため、実行速度が遅いです。例）同時通訳；喋ってる本人と翻訳してる人で時差があるようなイメージ。①直接Webページに埋め込む <head>xxx</head>または...
View Article知っておかないと恥ずかしい？！idとclassの違いと記述ルール
idとclassはコーダーやフロントエンドエンジニアからすれば初歩中の初歩というイメージがあるかと思います。ですが、浅い知識のままだと意外とハマる可能性が高いのです。そんな方に向けて復習も兼ねてidとclassについて解説していきたいと思います。idとclassの違いidとclassについては、有名なのは下記かと思います。idclass出現回数文書中に一意でなければいけない（要するに1回しか使えない...
View ArticleFLOCSS 設計における Layout レイヤーの再定義
はじめに先日、FLOCSS 設計について社内での共有があった際「FLOCSS 設計において l-container...
View Article