html+css
-
2025/04/11 / html+css
【css】テキストを左に揃えて全体を中央よせ
pタグの場合 <div class="fr"> <p> 猫はその愛らしい仕草とふわふわの毛並みで、多くの人の心を癒してくれます。<br> 無邪気に遊んだり、飼い主のそばで眠ったりする姿は見ているだけで幸せな気持...
続きを読む
-
2025/04/11 / html+css
【CSS】テキスト2行目以降を字下げ（インデント）
text-indent: -1em; padding-left: 1em; ...
続きを読む
-
2025/04/05 / html+css
レスポンシブで画像を正方形に維持する
HTML <div class="cont"> <div class="box"> <img src="/img.jpg"> </div> <div class=...
続きを読む
-
2024/12/09 / html+css
before・afterをcssで画像にする
HTML <p class="fvframe">テキスト</p> ::beforeと::afterのアイコン .fvframe::before { content: ' '; display: inlin...
続きを読む
-
2024/05/23 / html+css
ハンバーガーメニュー・左から出て右へ消える
HTML <div class="panelmenu"></div> CSS .panelmenu { position: fixed; z-index: 2; top: 0; left: 0...
続きを読む
-
2024/04/22 / html+css
WEBサイトが開いたときにムービーが動いている
<video id="video" webkit-playsinline playsinline autoplay loop muted src="../images/movie.mp4"> iPhone12でも動く ...
続きを読む
-
2024/03/14 / html+css
headerを固定した時のページ内リンク。Chrome、Firefox、Safari対応
headerを固定した時のページ内リンク HTML <a href="#release">ここをクリックでID releaseにページ内リンク</a> <div id="release" class="...
続きを読む
-
2024/02/09 / html+css
都道府県一覧
HTMLで使える都道府県一覧 <select> <option value="" selected>選択してください</option> <option value="北海道">北海道</option> ...
続きを読む
-
2023/12/07 / html+css
画像の縦横比を固定してレスポンシブHTML+CSS
HTML <span> <img src="" alt=""> </span> CSS span { padding-bottom: 66.67%; // 横3 縦2 の比...
続きを読む
-
2023/10/12 / html+css
css flexで内側要素を文字数に応じて比例した幅にする
HTML <ul> <li>ねこ</li> <li>センザンコウ</li> <li>きりん</li> <li>うみわし</...
続きを読む
-
2023/06/08 / html+css
table内の文字の折り返しが効かない時white-space: normal
HTML <table><tbody> <tr><th>テキスト</th><td>テキストテキストテキストテキストテキストテキストテキスト</td></tr> </tbody>&...
続きを読む
-
2022/07/29 / html+css
flex基本
HTML <div class="fr"> <div class="fr1"></div> <div class="fr2"></div> <div class="fr3"></...
続きを読む
-
2022/01/31 / html+css
cssでdiv等の要素を正方形に固定（レスポンシブ）
HTML <div id="fr"> <div id="content">中にテキスト</div> </div> css #fr { position: r...
続きを読む
-
2021/10/25 / html+css
head内のレスポンシブ分岐（metaタグなど）
800pxまでのviewportを指定 <script type="text/javascript"> if (matchMedia('only screen and (max-width: 800px)').match...
続きを読む
-
2021/08/21 / html+css
iframe縦横比固定・div正方形維持（レスポンシブ）/画像正方形固定
HTML：iframe <div class="wrapper"> <iframe src="xxxxx"></iframe> </div> CSS .wrapper { ...
続きを読む
-
2021/07/28 / html+css
スクロールすると上から降りてくる
HTML <body>直下 <div class="gmenu"> コンテンツ </div> css .gmenu { position: fixed; width: 100%; z-in...
続きを読む
-
2021/07/15 / html+css
フッターを下に固定｜コンテンツが少ない時
HTML <body> <header>ヘッダー</header> <main>コンテンツ</main> <footer>フッター</footer> </body> ...
続きを読む
-
2021/04/26 / html+css
favicon
pngでfavicon <link rel="icon" type="image/png" href="../images/favicon_48.png" sizes="48x48" /> <link rel="icon...
続きを読む
-
2021/04/08 / html+css
css gridの中のdivの中のdivの高さを合わせる
html gridを設定したdiv > divの中にさらにdivを入れて背景色や枠を付けた時に、高さを揃える方法 <div class="grid_fr"> <div class="grid_fr_in"&g...
続きを読む
-
2021/02/16 / html+css
文字列の下半分にマーカーを引く
.mark { background: linear-gradient(transparent 50%, rgba(255, 252, 107, 0.69) 50%); } ...
続きを読む
HOME > html+css
html+css
- 【CSS】テキスト2行目以降を字下げ（インデント）
- レスポンシブで画像を正方形に維持する
- before・afterをcssで画像にする
- ハンバーガーメニュー・左から出て右へ消える
- WEBサイトが開いたときにムービーが動いている
- headerを固定した時のページ内リンク。Chrome、Firefox、Safari対応
- 都道府県一覧
- 画像の縦横比を固定してレスポンシブHTML+CSS
- AtelierRoi 休日のお知らせ
- css flexで内側要素を文字数に応じて比例した幅にする
- table内の文字の折り返しが効かない時white-space: normal
- flex基本
- cssでdiv等の要素を正方形に固定（レスポンシブ）
- head内のレスポンシブ分岐（metaタグなど）
- iframe縦横比固定・div正方形維持（レスポンシブ）/画像正方形固定
- スクロールすると上から降りてくる
- フッターを下に固定｜コンテンツが少ない時
- favicon
- css gridの中のdivの中のdivの高さを合わせる
- 文字列の下半分にマーカーを引く
- youtube画像埋め込みのレスポンシブ
- webフォントを使う
- 1枚にcssもjsも書くhtmlの基本
- Pリンクボタン中央寄せ
- HTMLの複数行を左揃え中央寄せする
- ::before ::after【css】
- dl,dt,dd・シンプルにコピペ
- テーブルhtml・シンプルにコピペ
- HTML付き都道府県リスト・ヘボン式ローマ字リスト
- マウスオーバーで画像を大きくする
- divやpタグを文字幅に合わせて縮める
