Stylishの設定が反映されない（Linkを訪問済みの場合は色を変えたいのに変わらない問題）
通常はCSSをサイト外から直接触る拡張機能 stylish（CSSを拡張機能から触るものなら何でもok。） これらを使えば問題なく動きます。 でもサイトによってはstylishの設定が反映されない場合があります。 悩み stylishを設定しても反映されない。 例 stylishでこのように設定してみます。 a:visited { color: #00FF00; }...
View ArticleRailsで架空のCafeのHPを作ってみよう!【7日目】『クォーテーションの違い』編
概要 基本Railsの記法に則り書いていきます！ １から全ての説明ではなく その中であれ？どうやるの？と 疑問に思った点や実装に困った箇所を ピックアップして紹介していきます♩ 設定と準備 ・Rails ・HTML ・CSS ・Javascript(jQuery) ↑上記の言語とフレームワークを使い 架空(自分で考えたテキトーなもの)のCafeの HPを作っていこうと思います！ 7日目の作業内容...
View ArticleJavascript 追加、編集、削除の機能を持ったToDoリスト
こんな感じ ピュアJSで追加、編集、削除の機能を持ったToDoリスト pic.twitter.com/saHDWKuFo2— 高卒プログラマーげんと (@gento34165638) July 18, 2021 HTML/CSS/JavascriptだけのToDoリスト 全てのコードを一気に載せます。 HTML index.html <!DOCTYPE html>...
View ArticleHTML CSS 基礎 Part1
HTMLとは HTMlとはコンピュータに文書の意味を伝えるための言語です。 <h1>こんにちは。</h1> このように最初のh1を開始タグと呼び、次の/h1を終了タグと呼びます。 中身をコンテンツと言い、それらをまとめて要素と言います。 この要素を作ることをmarkupすると言います。 HTMLはHyper Text Markup Languageの略で、 Hyper...
View Article[CSS]文字の色がつかない？？（初心者悩み）
初めに しょうもないことでした。 なぜだろうと、 ずっと感じていたことでしたので、 かなり短いですが、共有したいと思います。 疑問点 子クラスに色がつかない？？？ すぐにわかってしまう方はいるかもしれませんが、 当時、こんな感じで記述してますが、文字に色がつきませんでした。 HTML <div class="parent">親 <div class="child">子供...
View Articlemix-blend-modeで背景だけにブレンドモードを適用する方法
CSSのmix-blend-modeは、重なり合う要素のブレンドモードを指定するプロパティです。 このプロパティを使うと、単なる透過だけではなく、乗算などさまざまなブレンドモードで重ねることができるようになるので、デザインの幅もぐっと広がります。どんどん使っていきたいところなのですが、意外と制約が多くままならないことが多いので、実際のコーディング例をもとに気をつけるべきポイントをまとめてみました。...
View ArticleHTMLとCSSの概要
拡張子とは ・拡張子とは、ファイルの後ろにつける、〇〇という文字列のこと。 ファイルにかかれている言語の種類を示すもの。 HTMLの役割とCSSの役割 ・HTMLとはブラウザ上に情報を表示するための言語。 ・CSSはHTMLを装飾し、閲覧する人にとって見やすくするための言語。
View ArticleRailsで架空のCafeのHPを作ってみよう!【8日目】『ActiveStorageと複数のテーブル』編
概要 基本Railsの記法に則り書いていきます！ １から全ての説明ではなく その中であれ？どうやるの？と 疑問に思った点や実装に困った箇所を ピックアップして紹介していきます♩ 設定と準備 ・Rails ・HTML ・CSS ・Javascript(jQuery) ↑上記の言語とフレームワークを使い 架空(自分で考えたテキトーなもの)のCafeの HPを作っていこうと思います！ 8日目の作業内容...
View ArticleNext.js+BULMAでアニメーション付きハンバーガーメニューを作る
やりたいこと BULMAは非常に軽量で扱いやすく、拡張性が高いCSSフレームワークです。 今回は、Next.jsで作ったサイトに、BULMAを導入し、ハンバーガーメニューを作って、そこにアニメーションを付ける、というのをやってみました🍔 完成したものはこちら👇 BULMAの導入 今回は、CDNから参照して使っています。...
View Article[HTML]aタグとlinkタグの違い
はじめに 本記事では、aタグとlinkタグの違いを理解しましたので、 アウトプットも兼ねて改めてまとめました。 aタグとは リンクという言葉を聞くと、 「aタグ」を連想する方は多いでしょう。 aタグはHTMLの文章の一部をハイパーリンクにするタグ です。 ・インライン要素 ・「Anchor（アンカー）」とも呼ばれている ・bodyタグに記載 ＊個人的に重要...
View ArticleBEM で CSS の要素を命名する
はじめに インターン先が BEM という CSS の命名規則を採用していた。 良い機会なので、ドキュメントを読んで自分なりにまとめてみる。 BEM とは Block、Element、Modifier の頭文字をとった、コンポーネントベースの CSS記述手法。 UI を独立したブロックに分割することで、複雑なデザインの実装やコードの再利用を容易にしている。 また、タグに直接 CSS...
View ArticleFont-weightについて
・Progate環境の話になります ・まだまだ知識が浅いので拙い話だったり、間違っている点もあると思います 最近ProgateでHTMLの学習をしています。 <h2>と<h3>タグの太字をなくそうと思ったところ、できるときとできない時があったので不思議に思いながらまとめてみました。 htmlは下記のコードです。 top.html <div...
View Article文全体を中央寄せして、文字を左寄せ
index.html <div class="wrapper"> <ul> <li>コンテンツ１</li> <li>コンテンツ２</li> <li>コンテンツ３</li> </ul> </div> stylesheet.css .wrapper { display: flex;...
View Article[HTML/CSS]justify-contentの種類について
はじめに 本記事では、justify-contentの種類を記述していきます。 間違えまくり&覚えきれない箇所でしたので備忘録です。 justify-contentとは display: flex;と併せて使用します。 主軸方向(初期値は水平方向)の配置の詳細を決めます。 種類(学習したもの) ・justify-content: flex-start; 左寄せ...
View Article【CSS】ul要素のlist-styleをnoneにした際にスペースを消すには？
ul要素のlist-styleをnoneにした際に「・」は削除されたもののpaddingが指定されていた。 CSSの記述を確認しても自分ではpaddingは指定していなかったが、 検証で確認した際にpaddingが20px指定されていることがわかった。 paddingを解除するためにCSSに下記を記載して対応した。 padding-left: 0; 上記を実行した結果 左詰めにすることに成功した。
View ArticleRailsで架空のCafeのHPを作ってみよう!【9日目】『簡単にGoogleMapを導入』編
概要 基本Railsの記法に則り書いていきます！ １から全ての説明ではなく その中であれ？どうやるの？と 疑問に思った点や実装に困った箇所を ピックアップして紹介していきます♩ 設定と準備 ・Rails ・HTML ・CSS ・Javascript(jQuery) ↑上記の言語とフレームワークを使い 架空(自分で考えたテキトーなもの)のCafeの HPを作っていこうと思います！ 9日目の作業内容...
View Articlehtml,css,sassによるアプリのビューをコーディングする際、便利な書き方
説明 本記事はbootstrapなしでSassを使ったコーディングの際に便利書き方に関する記事です。 前提条件 html,css,sassを使っている事、自分はバックエンドをrailsで開発していますが、他の言語でも差異はないと思います。 よく使うcolorを変数として定義しておく application.scss :root { --main-bg-color: #f6fafa;...
View ArticleKintoneのトップページのポータルをタブ化しオリジナルのポータルとアプリ一覧を表示する
きっかけ 昨日こんな記事を書いたのに、やっぱり新しいアプリを作るごとにポータル管理アプリをメンテするのはしんどいなと思い、ポータルを開くごとに最新のアプリ一覧を取得してスペースごとに表示するJSを作ろうと決意しました。...
View Article[Saas]変数を使って色を指定
はじめに 詳細ページで同じ下線部を引く所がありました。 Saasの特徴である変数を使って記述していきたいと思います。 使い方 .hoge { background-color: black; h1 { color: white; } .hoge-1 { color: white; h1 { background-color: white; } } } 例えばこのような形で同じ色を使っていたとします。...
View Article