HTMLとCSSで画像の上に要素を配置する
HTMLとCSSで画像の上に要素を配置する ウェブアプリケーションの作成にあたって、背景画像に写真を使いたかったため以下の手順で実装しました。 画像と文字を配置する 相対位置と絶対位置について理解する 画像の上に文字を配置する(絶対位置と相対位置の設定をする) 画像の上に要素を配置する(絶対位置と相対位置の設定をする) 画像と文字を配置する まずは、画像を文字のあるhtmlのページを作成します...
View ArticleGoogleのCWV(Core Web Vitals)に対応するアレコレ
5月からCore Web Vitalsが検索順位の決定に使われる様になりますが、lighthouseやchromeのアップデートによってテスト結果が変わったりと、色々追われています。 基本的にはフィールドデータが利用されるらしいのでラボデータはそこまで気にしなくても良いのですが、フィールドデータ無かったりするんで、やれることはやっとかなきゃって感じです。 で、色々やったのでいくつかまとめます。...
View ArticleAMPのついてのリンク集
数年前にあるサイトをAMP対応した際に調査したページのリンク集。 参考までに。 AMPについて AMPのチェック方法 構造化データ(Article)の追加方法 構造化データ(Article)の詳細 構造化データのテスト
View ArticleCSS記述方法【3タイプまとめ】
CSSの記述方法は3種類 １．style要素として記述 ２．style属性として記述 ３．拡張子.cssの外部ファイルに記述 １．style要素として記述 ポイント head要素、body要素のどちらに記述してもいいけど、head内が推奨されてる。 メモ ＜style type="text/css"＞の「type="text/css"」は付けなくても問題なし。 例） <!doctype...
View Articleレイアウトを組む「CSSグリッド」
CSSグリッドとは ウェブページをエリアに分割したり、 エリアの大きさを決めたり、 エリアの名前を決めて役割を割り当てたり、 表示するデバイスやウィンドウの大きさによって見え方を変えたりできる。 例えば、「ここはヘッダー」、「ここはメインコンテンツ」、 「ここは広告」、「ここはフッター」、 「広告エリアの幅は100ピクセル」、「フッターの高さは50px」 などなど。...
View Article【GitHub】ブランチ作成を忘れていた時の対処方法
この記事は以下の方に参考になると思います ブランチ作成を忘れててmasterブランチでコードを書き進めてしまった方 ブランチ作ろうとしたけど２択を迫られてどうしていいか解らない方 結論 ２択は下を選びましょう！上を選んでもなんとかなります。 【選択肢の下を選んだ場合の方法】 ①GitHubデスクトップのカレントブランチのタブをクリック、[New Branch]をクリック...
View Article【初心者でもわかる】オフレフトの書き方を解説
どうも7noteです。オフレフトを使った画像の表示方法について解説 画像ではなくテキストを使っている方がSEO、つまりGoogleの検索エンジンの上位にランキングされる評価が高くなると一般的に言われています。 画像＋altよりも、テキストの方が評価が高くなるため、できるだけソースにはテキストデータを設置している方が良いとされてます。...
View Article駆け出しエンジニアがレスポンシブのLPを組むときに気をつけたい6つのポイント
こんにちは、@amiamiといいます。 前職ではUIデザイナーのようなことをやっていてコードを書いたことがなく いきなり、初めてLPの実装をすることになりました！ （できたLPはこちらです！ https://lp.re-shine.jp/orderer/) その際に割と引っかかってしまった点を書いておきます。 社会人●年目の新人プログラマーですが、皆さんと一緒に頑張っていきたいです。 1....
View ArticleFlexboxの理解を深めるためJAPAN国旗を作ってみた
Flexboxを使って国旗を作る 今回は日本国旗 目標：Flexboxの基礎を理解するため テキストエディターはVSCode. ↓下記のFlexboxチートシートを参考 Css Flexboxのチートシート ～codeを書き始める前の準備～ ・構成を考える！ 何をどんな風に、どうやって作るのか？ 最初にある程度決めておくと後が楽になります。 例 <div>は何個必要なのか？...
View ArticleFlexboxで作ったUAE国旗をもっとシンプルにしてみた
以前投稿した、『Flexboxの基礎を徹底的な理解のためにUAEの国旗を作ってみる』からもっとシンプルにcodeを書いたので投稿します 基盤は、以前のcodeに少しシンプルにしました 目標：Flexboxの基礎を理解するため テキストエディターはVSCode. ↓下記のFlexboxチートシートを参考 Css Flexboxのチートシート ～codeを書き始める前の準備～ ・構成を考える！...
View Article縦横幅がinline-block要素のように可変なものを中央配置させたい。CSS
👋こんにちは。僕は、watnowでUX/UIデザインをしています。 縦横幅がinline-block要素のように可変なものを中央配置させたいと悩んでいたらしれっとメンバーが教えてくれたのでそれを紹介します。 結果とコード モーダルで使用することが多いと思うのでそのスタイルで書いています。 hoge.css .wrapper { display: flex; position: fixed;...
View Articlemarginとpaddingの違いは何？
はじめに HTML、CSSの勉強を初めて一番最初につまづいたのが「margin」と「padding」です。 二つとも余白を作ることはわかったけど、 内側の余白？？？ 外側の余白？？？ 何を言っているのか分かりませんでした、、、 また要素間の余白をとりたい時に、marginとpaddingのどちらを使えば良いのか迷いますよね。 本記事はそんな悩みを持っている方に向けて書きました。...
View ArticleVue.jsでBootstrapを利用する方法と、Bootstrapをカスタマイズする方法
はじめに Vue.jsでBootstrapを利用する方法です。 利用する方法はいろいろあり、 Bootstrapの利用したい機能の範囲などによっても 適切な導入方法が違ったりすると思います。 利用方法の1つの例として参考にしてください。 Bootstrapを利用可能な状態にする sass-loaderインストール Vue.jsでsassをコンパイルするために必要なパッケージをインストールします。...
View Articlefooterでない要素をページ最下部に固定する
はじめに 「要素 最下部 固定」みたいに調べると、大体footerを画面最下部に固定する方法が出てくるが、それで実装すると以下のように親要素の幅にならないで飛び出す…という事に直面する。 （position: fixed;がうまくいかないのは要素は文書の通常のフローから除外され、ページレイアウト内に要素のための空間が作成されないため。） fixed-bottom.css .fixed-bottom...
View ArticleCSS設計完全ガイドを読んで、PRECSSを学びました
CSS設計完全ガイド CSS設計完全ガイド HTML/CSSで画面を作るのに、恐怖を感じていたため評判の良かったこちらを購入しました 結論・・・・・めちゃくちゃおすすめです！！ 読んだ感想 今まで我流でHTMLの構造やら、CSSを書いていた自分にとって どのようにHTMLをとらえるといいのか？ どうすれば再利用しやすいCSSとなるのか？...
View ArticleCSS単位(px, em, rem, %, vh, vw...)を理解する
概要 CSS単位でよく見かけるpx, em, rem, %, vh, vwを明確に理解し使い分けられるよう、それぞれの違いと使い分け方(筆者が目安にする基準・個人の意見)に関してまとめました。 同様な記事は既にネット上に多く存在しますが、自分の理解もかねて改めてまとめてみました。 CSS単位の分類 CSS単位は大きく下記の2つに分類する事が可能です。...
View Articleお問い合わせフォーム~HTML側~
今回はお問い合わせフォームの実装を行います。 完成版はこちらです。 見た目がダサいのは、ご容赦ください😅 HTML HTML側での実装はこのようになります。 index.html <div class="header"> <div class="header-logo">お問い合わせフォーム</div> </div> <form...
View ArticleWeb UIテストでカスタムデータ属性の用いてDOM要素を指定
最近、Web UIのテストでカスタムデータ属性でDOM要素を指定するやり方が気に入ってます。それについてまとめてみようと思います。 この手法はWebのテストのみならず、JavaScriptのスクリプトでも適用できるのですが、今はPhoenix LiveViewのテストの勉強中なのでWeb UIテストの文脈で書いてます。 autoracex #24 (2021/04/24 00:00〜)での成果です。...
View ArticleFlexbox理解をするためギリシャ国旗を作りました
Flexboxを使って国旗を作る 今回はギリシャ国旗 目標：Flexboxの基礎を理解するため テキストエディターはVSCode. ↓下記のFlexboxチートシートを参考 Css Flexboxのチートシート ～codeを書き始める前の準備～ ・構成を考える！ 何をどんな風に、どうやって作るのか？ 最初にある程度決めておくと後が楽になります。 例 ギリシャの国旗を調べる...
View Article