2020-09

スポンサーリンク
CSS

Font AwesomeをCSSで表示させる方法【疑似要素を使用】

今回はウェブサイトやブログでWebアイコンフォントを無料で表示できるFont AwesomeをCSSで表示させる方法を、備忘録も兼ねてブログにアウトプットしていきたいと思います。 今回の備忘録はこんな人におすすめ! Font Awe...
CSS

CSSでテキストを鉤括弧「」で囲む方法!【コピペOK!】

今回はCSSでテキストを鉤括弧「」で囲む方法を備忘録も兼ねて紹介していきたいと思います。 今回の備忘録はこんな方におすすめ! 見出しのデザインの幅を広げたい!テキストを鉤括弧で囲む方法を知りたい!疑似要素の使い方を知りたい! ...
JavaScript

簡単にスクロールアニメーションを実装できるライブラリ【AOS】を紹介【JavaScriptの知識がなくてもOK!】

今回は先日iSaraというLPの模写をしたときに、AOSという簡単にスクロールアニメーションを実装できるライブラリを使用したので、そのことについて、備忘録も兼ねてブログで共有したいと思います。 今回の備忘録はこんな方におすすめ! J...
CSS

UIコンポーネントにはmarginはつけてはいけない【使い回しがしやすいから】

今回はUIコンポーネントにはmarginなどの要素の配置を指定するCSSを指定しないほうがいいというお話をしたいと思います。 先日僕がお世話になっているもりけん先生(Twitter ブログ)から、こんなコードレビューをいただ...
CSS

position: fixed; を指定したときにwidth: 100%;を指定したらモバイル表示がおかしくなった話

今回は、position: fixed; を指定したときにwidth:100%;(画面幅いっぱい)を指定する方法を解説していきたいと思います。 こんにちは!夏の終わりが寂しいマダラ蝶です。最近涼しくなってきましたよね。今回は...
CSS

【文系大学生が分かりやすく解説!】縦軸でのテキスト中央配置の方法!

今回のブログではCSSで文字を縦軸で中央配置するときに気をつけるべきことを解説していきます。このところ模写サイトを作っている中でこのようなデザインの作成をしました。 一見よくできているように見えますが、テキストを増や...
CSS

【文系大学生がわかりやすく解説】CSSで画像をトリミングする方法を2パターン紹介

皆さんこんにちは!最近Podcastにハマっているマダラ蝶です。 さて、今回のブログは画像についてです!HTMLやCSSで画像を表示させる際にブラウザ幅やデザインの関係で画像のサイズを統一させたいといった場面に遭遇することがあるかと...
スポンサーリンク
タイトルとURLをコピーしました