どうも7noteです。CSSオンリーで「✕」を作ります CSSを使って✕を作ります。 コピペで使えますよ。 線の端を丸くすることも可能 cssで✕の作り方 .batten { width: 20px; /* 線の長さ */ position: relative; /* 基準位置に指定 */ } .batten::before, .batten::after { content: ""; /* 疑似要素に必須 */ width: 100%; /* 幅いっぱいを指定 */ height: 2px; /* 適度な太さを指定 */ display: inline-block; /* 高さを持たせるためにinline-blockを指定 */ background: #aaa; /* 線の色を指定 */ border-radius: 2px; /* 線の端を丸くしたいなら指定する */ position: absolute; /* 相対位置に指定 */ top: 0; /* 表示位置を上から0pxに指定 */ left: 0; /* 表示位置を左から0pxに指定 */ } .batten::before { transform: rotate(45deg); /* 時計回りに45度回転させる */ } .batten::after { transform: rotate(-45deg); /* 反時計回りに45度回転させる */ } ハンバーガーメニュー（3本線メニュー）から✕に変わるやつ こちらは過去の記事で紹介しているので以下からご覧ください。 まとめ テキストで✕にしてもいいのですが、線1本ずつに装飾したり、アニメーションをさせるならcssで✕を作ったほうが勝手がいいですね。 あとはborder-radiusで線の端を丸くできるので、デザイン的にも◎。 おそまつ！ ~ Qiitaで毎日投稿中!! ~ 【初心者向け】WEB制作のちょいテク詰め合わせ
自己紹介サイト制作で学んだこと HTML CSS vscodeの使い方 拡張機能 素材やテンプレサイト HTML - 画像挿入方法 htmlファイルと同じところにimagesフォルダがある場合 <img src="/images/ロゴ.png" alt="ロゴ画像" width="111" height="20" /> - 構成の提案（自分がやりやすいのが一番ですが） <html lang="ja"> <head> </head> <body> <header> <div class="header-container"> /*上バナー:/ </div> <div class="header-content"> /*大きなタイトル*/ </div> </header> <main> <section class="comment"> </section> <section class="profile"> </section> <section class="target"> </section> </main> <footer></footer> </body> </html> CSS - 感覚的にdivのサイズを整える方法 paddingとborderを変更してもwidth50%をちゃんと画面の半分としてくれる 下のをccsファイルに貼り付けるだけ *, *:before, *:after { -webkit-box-sizing: border-box; box-sizing: border-box } 【CSS】box-sizing:border-boxの使い方｜効かない時は？ - 便利なbodyの設定 body { margin: 0; /*ページ左や上のスペースをなくす*/ display: flex; flex-direction: column; min-height: 100vh; /*3行で直下のdivをタテにきれいに並べる*/ } HTMLとCSSだけでフッターの隙間を解消する方法 - タイトルの背景画像設定 header { margin: 0; height: 400px; background-image: url("./images/背景用画像.jpg"); /*画像の指定*/ background-size: cover; /*スペースを画像で埋める*/ background-repeat: no-repeat; /*画像の繰り返しなし*/ background-color: rgba(255, 255, 255, 0.5); /*0.5をいじって濃さ変更できます*/ background-blend-mode: lighten; /*2行で画像をうすくする*/ } - divを上手く配置する .horizontal { display: flex; /*直下のdivをflex-boxにする*/ flex-wrap: wrap; /*flex-boxの横幅に応じて新しい行を追加*/ /*width:50%;を4つなら2列2行で配置*/ } .horizontal div{ width: 50%; /*2つ綺麗に並ぶ*、border-boxと併用すると〇*/ height: 300px; /*高さご自由に*/ } - 画像の挿入 divに入れるとわかりやすい .horizontal img { width: auto; height: 100%; /*縦横比そのまま高さがdivの100%逆もしかり*/ } vscode 1ウィンドウにつき1フォルダーを開きましょう 左上のfileからnew windowで新しいwindow開けます mdファイル作ってみましょう file→new fileから作成、名前変更で拡張しを.mdに 参考動画 vscodeでのマークダウンの使い方 ___ 拡張機能 コードを綺麗に整えたい「prettier」 prettier onSave vscode 動かない時の対処法 上のタグを変えたら下も変わってほしい「Auto Rename Tag」 いいクラス名考えてほしい「codic」 変数のネーミングに悩む方にお勧め！プログラマーのためのネーミング辞書「codic」 ここを一気にdivタグでくくりたい「htmltagwrap」 Visual Studio Codeでhtmltagwrapを使って選択した文字列をタグで囲む インデントをわかりやすくしてほしい「indent-rainbow」 一度使ったクラス名を簡単に入力したい「IntelliSense for CSS class... 」 便利なフリー素材サイト アイコンサイト FLAT ICON DESIGN 写真サイト O-DAN プロフィールテンプレ WiX-プロフィールテンプレート
ol.{ counter-reset: item; list-style-type: none; padding-left: 0; margin-bottom: 100px; } ol. li{ text-indent: -1.6em; padding-left: 2.2em; margin-bottom:20px; } ol. li:before { counter-increment: item; content: counter(item)'.'; text-align: right; /ここ/ display: inline-block; /ここ/ /* 以下は自由に装飾... */ padding-right: 1.6em; font-weight: bold; color: #123262; }
