【備忘録】コーディング・プログラミングで参考にした記事の記録

コーディングやプログラミングをしていると必ずって言ってもいいほどわからないところにぶち当たるので、どのようにわからなかったのか、どのサイトで解決をしたのか、記録をしていきます。

同じようなものを作っていないと参考にならないと思うので、
いつもながら自分用の備忘録です。
日々更新をするのでもしかすると参考になるかも。

HTML

HTML関連でわからなかったことを書く
普段使わないタグなどについて書くと思う。

HTML5廃止？

HTML5が終わって新しくHTML Living standardになったと聞いて調べたやつ。
全然HTML5は使えるが知識として。

HTML Living standard｜HTML5｜HTML－havin' a coffee break｜珈琲とウェブデ…

https://web.havincoffee.com/html/html5/html5_a_ls.html

“HTML Living standard”とは何か？WHATWGによって策定されている現在のHTML技術仕様の標準規格であるHTML Living standardやこれまでのHTML5との違いなどについて解説しています。

havin’ a coffee break｜珈琲とウェブデザイン

CSS

CSS関連でわからなかったことを書く。
たぶん、一番多くなると思う。

borderの長さの調整

borderの長さを調整したい。

【CSS】borderの長さは変えられる？文字よりも短い下線を表示させたい【疑似要素で…

https://namagomi-days.com/border-length/

こんにちは、けんです。ランディングページなどで、見出しを表示する時、「なんか物足りないな…」と思った時に下線を入れると、下のテキストとメリハリがついて美しくなります。これをh2などのヘッドライン要素に直接borderで入れようとすると、bl

namagomi days

olタグで①を使う

olタグで①、②…を使う
環境依存文字を使ってやるのでもいいが
2行目の頭を揃えたい。

[CSS]ol のリストで①や②などの丸数字を表示させる方法｜CSSプロパティ｜WEBデザイ…

https://www.webantena.net/css/ol-list-circled-decimal/

稀に ol によるリストで丸数字を使う場合があるので備忘録としてまとめました。 ol li の list-style は none で消しておいて、替わりに ① や ② などの「丸数字」を表示させる方法です。 ol の リストで「丸…

www.webantena.net

flex-wrapの最後の行左寄せ

いつも調べている気がするが、flex-wrapの2カラム、3カラム…を作成すると
最後が中央によっていたりとするあれを解決。

Flexboxのjustify-contentで最後の行を左寄せにする方法

https://blog.webcreativepark.net/2016/08/15-125202.html

Flexboxのjustify-contentではflexアイテムの配置方法が指定できます。

to-R

GoogleMapレスポンシブ

グーグルマップを埋め込んで、レスポンシブのやり方。

Googleマップをレンスポンシブに対応する方法

https://webdesignday.jp/inspiration/technique/css/4213/

Googleマップを埋め込んだサイトはよく見かけますが、そのまま埋め込んだだけだとレスポンシブに対応できません…

WEBDESIGNDAY

CSSでアコーディオン

CSSでアコーディオンメニューを作る方法。
JavaScriptは一切使わないやり方。

【コピペOK】CSSだけでアコーディオンメニューを作る方法 – GOKAN DESIGN STUDIO

https://gokansoichiro.com/blog/css-accordion/

項目の多いメニューやよくある質問等で利用することの多いアコーディオンメニューを、CSSだけで作る方法の紹介です。コピペするだけで実装できます！

GOKAN DESIGN STUDIO

見出しで横線

-見出し-をコーディングする方法

【HTML・CSS】見出しの左右両端に線を入れる方法

https://design-levelup.com/webdesign/html_css_making_2/

今回は「CSSを使ってテキストの左右に線を入れる方法」をご紹介します。 装飾として見た目はとてもシンプルですが、線の太さや長さを変えたりすると印象も大きく変わるので、覚えておくと良いでしょう。 もくじ横幅いっぱいに線を入 …

デザインレベルアップ

JavaScript

JavaScript関連でわからなかったことを書く。
奥が深いからJSも多くなると思う。

WordPress

WordPress関連でわからなかったことを書く。
わからないことだらけだからめっちゃ多くなると思う。

役に立つ

かゆいところに手が届く、役に立つ記事。

検証ツールのスクロールができなくなる

検証ツールでスマホやタブレットの状態を確認している時、
リンクを踏んだりすると、急にスクロールができなくなる現象を解決する。

Chrome：デベロッパーツールのカーソルを「マウス」用に戻す

https://at.sachi-web.com/blog-entry-1405.html

知らなきゃ絶対損するPCマル秘ワザ

XDからコーディング

XDからデザインカンプのコーディングをする時に必要なやり方が
すべて書いてある。
letter-spacingやline-heightの調べ方などがあるから、XDを使ってコーディングするときは一通り読むべし。

Adobe XDからコーディングする方法を丁寧に解説！ピクセルパーフェクトする方法も…

https://moshashugyo.com/media/coding-from-xd

Adobe XDで作ったデザインから、コーディングする方法を丁寧に紹介します。画像の書き出しや、オブジェクト同士の距離の測り方など、1から解説しています。

模写修行

まとめ

ブックマークしてあるけど、なんでわからなかったんだっけを
自分なりにわかりやすくしました。

多分、他の人が見ても、違うそうじゃない。となると思うけども
似たような場所で躓いていたら参考にしてほしい。

役に立つが割と一番参考になるかもしれない。

というわけで、それでは