【ブログ一覧】 - ますみのブログ

ますみのブログ

パソコンとかプログラミングに関するあれこれ発信してます

文字が一文字ずつ現れるアニメーションの作り方【HTML、CSS】

こんにちは!エンジニアのますみです!本日はCSSで作れる文字が一文字ずつ表れるアニメーションの作り方とサンプルを紹介します!目次 一文字ずつペラペラ現れるアニメーション 文字が下からスライドして現れる 文字が上からふわっと降ってくる 一文字ずつ横からスライドして現れるそれではさっそく見ていきましょう一文字ずつペラペラ現れるアニメーションS a m p l e T e x t再生HTMLdiv span class='text' style="animation-delay: 0s"S/span span class='text' style="animation-delay: 0.2s"a/span span class='text' style="animation-delay: 0.4s"m/span span class='text' style="animation-delay: 0.6s"p/span span class='text' style="animation-delay: 0.8s"l/span span class='text' style="animation-delay: 1s"e/span span class='text' style="animation-delay: 1.2s" /span span class='text' style="animation-delay: 1.4s"T/span span class='text' style="animation-delay: 1.6s"e/span span class='text' style="animation-delay: 1.8s"x/span span class='text' style="animation-delay: 2s"t/span/divCSS.text { display: inline-block; font-size: 2rem; font-family: "Ryumin ExtraBold KL"; letter-spacing: -0.15rem; animation: text-animation 0.8s forwards; transform: rotateY(90deg);}@keyframes text-animation { 0% { transform: rotateY(90deg); } 100% { transform: rotateY(0deg); }}@keyframesはCSSでアニメーションを定義できるプロパティです。transformと:hoverや:focus等の疑似クラスの組み合わせでもアニメーションは作成可能ですが、@keyframesは より複雑なアニメーションが作れる マウスホバーやフォーカス等の操作に関係なくアニメーションをスタートできるといったメリットがあります。Sample Textという文字を一文字ずつspanで区切り、文字ごとにアニメーションをスタートするタイミングを変えることで順番に文字が現れるアニメーションを作ることができます。文字が下からスライドして現れる再生HTMLdiv class="container" span class='text' style="animation-delay: 0s"S/span span class='text' style="animation-delay: 0.2s"a/span span class='text' style="animation-delay: 0.4s"m/span span class='text' style="animation-delay: 0.6s"p/span span class='text' style="animation-delay: 0.8s"l/span span class='text' style="animation-delay: 1s"e/span span class='text' style="animation-delay: 1.2s" /span span class='text' style="animation-delay: 1.4s"T/span span class='text' style="animation-delay: 1.6s"e/span span class='text' style="animation-delay: 1.8s"x/span span class='text' style="animation-delay: 2s"t/span/divCSS.container { overflow: hidden;}.text { display: inline-block; font-size: 2rem; font-family: "Ryumin ExtraBold KL"; letter-spacing: -0.15rem; animation: llfsdi-text-animation 0.8s forwards; transform: translateY(3rem);}@keyframes text-animation { 0% { transform: translateY(3rem); } 100% { transform: translateY(0rem); }}基本的な部分は先ほどと同様、@keyframesとanimation-delayによるアニメーション開始時間の調整で作ることができます。親要素にoverflow : hiddenを指定して、文字が下の方にいる時に表示されないようにします。文字が上からふわっと降ってくる再生HTMLdiv span class='text' style="animation-delay: 0s"S/span span class='text' style="animation-delay: 0.2s"a/span span class='text' style="animation-delay: 0.4s"m/span span class='text' style="animation-delay: 0.6s"p/span span class='text' style="animation-delay: 0.8s"l/span span class='text' style="animation-delay: 1s"e/span span class='text' style="animation-delay: 1.2s" /span span class='text' style="animation-delay: 1.4s"T/span span class='text' style="animation-delay: 1.6s"e/span span class='text' style="animation-delay: 1.8s"x/span span class='text' style="animation-delay: 2s"t/span/divCSS.text { display: inline-block; font-size: 2rem; font-family: "Ryumin ExtraBold KL"; letter-spacing: -0.15rem; animation: llfsdi-text-animation 0.8s forwards; transform: translateY(-1rem); opacity: 0;}@keyframes text-animation { 0% { opacity: 0; transform: translateY(-1rem); } 100% { opacity: 1; transform: translateY(0rem); }}こちらのサンプルでは透明度を調整するopacityも追加しました。他のアニメーションにもopacityを追加するとふわっと現れるアニメーションになります。お好みでカスタマイズしてみてください。一文字ずつ横からスライドして現れる再生HTMLdiv span class='text'span style="animation-delay: 0s"S/span/span span class='text'span style="animation-delay: 0.2s"a/span/span span class='text'span style="animation-delay: 0.4s"m/span/span span class='text'span style="animation-delay: 0.6s"p/span/span span class='text'span style="animation-delay: 0.8s"l/span/span span class='text'span style="animation-delay: 1s"e/span/span span class='text'span style="animation-delay: 1.2s" /span/span span class='text'span style="animation-delay: 1.4s"T/span/span span class='text'span style="animation-delay: 1.6s"e/span/span span class='text'span style="animation-delay: 1.8s"x/span/span span class='text'span style="animation-delay: 2s"t/span/span/divCSS.text-container { overflow: hidden;}.text { display: inline-block; font-size: 2rem; font-family: "Ryumin ExtraBold KL"; overflow: hidden;}.text span{ display: block; animation: llfsdij1-text-animation 0.8s forwards; transform: translateX(-2rem);}@keyframes text-animation { 0% { opacity: 0; transform: translateX(-1rem); } 100% { opacity: 1; transform: translateX(0rem); }}一文字ずつ横スライドして現れるように見せるには、HTMLも修正する必要があります。テキストをさらに一階層深い要素にし、テキストの親要素にoverflow : hiddenを指定してテキストが横から現れて見えるようにする必要があります。最後まで読んでいただきありがとうございます!質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

2023年05月01日

Read More

【サンプルあり】コピペOK!丸を使ったボタンのホバーアニメーション

こんにちは!エンジニアのますみです!先日は四角いデザインの背景色が濃いときに使いたいボタンデザインを紹介しましたので、今回は丸をテーマにやってみたいと思います!丸いボタンはアニメーションの選択肢が増えるメリットがあるので、思わず目を引くアニメーションでクリック率を上げることができるのがいいですね!ただ、配置をしっかり考えないとおさまりが悪くなってしまうので、サイト全体のレイアウトに合うように四角いボタンと使い分けてみてください!紹介するソースコードはコピペで自由に使っていただいて大丈夫です!なのですがTwitterのリプライとかで一言いただけると今後の励みになります!『使いました!』って言ってもらえたらすごく嬉しいので、よろしくお願いします!1. くるっと回転丸いボタンのメリットは回転させても違和感が少ないところですね!transform: rotate(360deg)として、時計回りに一回転するアニメーションです!BUTTON.button { width: 6rem; height: 6rem; display: flex; justify-content: center; align-items: center; border: 1px solid gray; border-radius: 3rem; background-color: white; color: #ff7473; font-weight: bold; cursor: pointer; transition: 0.6s;}.button:hover { transform: rotate(360deg);}2. ころころ転がる矢印矢印がころころと、下線を引きながら転がっていくアニメーションです!矢印を画像等に置き換えたりして、好みの矢印のデザインにしてもいいですね!BUTTON.button { position: relative; display: flex; align-items: center; color: white; cursor: pointer;}.button span { margin-left: 1.6rem;}.button::before { content: "→"; position: absolute; left: -10%; display: flex; justify-content: center; align-items: center; width: 1.6rem; height: 1.6rem; border-radius: 0.8rem; color: #ffc952; background-color: white; transition-duration: 1.5s;}.button:hover::before { transition-duration: 1s; transform: rotate(720deg); left: 110%;}.button::after { content: ""; position: absolute; left: 1.6rem; bottom: 0; width: 0; height: 2px; background-color: white; transition-duration: 1s; transition-delay: 0s;}.button:hover::after { width: calc(100% - 1.6rem); transition-delay: 0.1s;}3. 強調したい箇所に使いたい目を引くアニメーションぶわっと広がるように見えるアニメーションです!要素の大きさ自体は変わっていないので、周りの要素に影響を与えないのが◎主張が激しいので使いすぎると目がチカチカしますからほどほどに~BUTTON BUTTON BUTTON.button { width: 6rem; height: 6rem; background-color: white; border-radius: 50%; color: #47b8e0; position: relative; display: flex; justify-content: center; align-items: center; overflow: hidden; cursor: pointer; font-weight: bold;}.button .inner-1,.button .inner-2 { position: absolute; overflow: hidden; display: flex; justify-content: center; align-items: center; font-weight: bold;}.button .inner-1 { width: 0%; height: 0%; background-color: #47b8e0; border-radius: 50%; color: white; z-index: 10; transition: 0.3s;}.button .inner-2 { width: 0%; height: 0%; background-color: white; border-radius: 50%; color: #47b8e0; z-index: 20; transition-delay: 0.15s; transition-duration: 0.3s;}.button:hover .inner-1,.button:hover .inner-2 { width: 100%; height: 100%;}4. 角から色が変わるエフェクト四角いパターンはこちらの記事で紹介しましたが、今回は丸のバージョンです!円の中心を角に合わせないとおかしなことになってしまうので、アニメーションで円を拡大しながら中央を角に合わせる工夫が必要です!角に丸がちょこっとあるのがかわいくてお気に入りのデザインです!BUTTON.button{ padding: 0.4rem 2rem; color: white; font-weight: bold; border: 1px solid white; position: relative; cursor: pointer; z-index: 1; transition: 0.4s; overflow: hidden;}.button:hover{ color: #34314c;}.button::before{ content: ""; width: 2rem; height: 2rem; left: -1rem; top: -1rem; background-color: white; position: absolute; z-index: -1; transition: 0.4s; border-radius: 50%;}.button:hover::before{ width: 12rem; height: 12rem; left: -6rem; top: -6rem;}.button::after{ content: ""; width: 2rem; height: 2rem; right: -1rem; bottom: -1rem; background-color: white; position: absolute; z-index: -1; transition: 0.4s; border-radius: 50%;}.button:hover::after{ width: 12rem; height: 12rem; right: -6rem; bottom: -6rem;}最後まで見ていただきありがとうございます!丸い形のメリットを生かしたアニメーションを考えてみました!CSSについてこんなことを記事にしてほしい!等ありましたら、Twitterのコメントなどで教えてください!それでは次の記事もお楽しみに!

2023年04月19日

Read More

【CSS入門】書いて覚える『:hover』の使い方

こんにちは!エンジニアのますみです!本日はマウスホバー時に要素の見た目を変化させることができる:hoverの使い方を解説していきます!魅力的なWebサイトを作るには欠かせないテクニックです!この記事では実際にCSSをこのページ上で書くことができるので、プレビューを見ながら使い方をマスターすることができます。是非、ブックマークして学習に役立てていただけたら幸いです。目次 :hoverの基本 枠線の色を変えたいときの注意点 transitionを指定してアニメーションにする ホバー時によく使われるアニメーション box-shadowで影をつける transformでボタンそのものを動かすそれではさっそく見ていきましょう!:hoverの基本BUTTON.button { background-color : } .button:hover { background-color : } セレクタ:hoverと書くことで、マウスホバー時のスタイルを指定できます。上の例では、.buttonクラスを持つ要素の背景色が通常時にはwhite、マウスホバー時には#D2ECFFになるように指定されています。#D2ECFFの部分を好きなカラーコードに書き換えてみると、マウスホバー時の背景色が変わることがわかります。例えば#D2ECFFをredに書き換えてみてください。ボタンにマウスカーソルを当てると背景色が赤に変わります。枠線の色を変えたいときの注意点BUTTON.button { background-color : } .button:hover { border : } 上の例のように、マウスホバー時のみ枠線を表示したいときには注意が必要です。ボタンにマウスカーソルを当てると、枠線は表示されますが画面がガタつくことがわかると思います。これは通常時の枠線の太さが0pxになっているため、ホバー時にボタンのサイズが変わってしまうことが原因です。BUTTON.button { background-color : border : } .button:hover { border : } このように通常時には透明な枠線を指定しておくことで、マウスホバー時のガタつきを防ぐことができます。線の太さは通常時、ホバー時どちらも同じ値を指定してください。transitionを指定してアニメーションにするBUTTON.button { background-color : transition : } .button:hover { background-color : } 通常時のクラスにtransition: 秒数とすることで、ホバー時のスタイルに変化するまでにかかる時間を指定できます。エディターのtransition: 0.3sを変更してtransition: 1sとすると、ボタンの色が変化するまでにかかる時間が長くなることがわかります。ホバー時によく使われるアニメーションbox-shadowで影をつけるBUTTON.button { transition : } .button:hover { box-shadow : } マウスホバー時に影をつけるにはbox-shadowを使います。box-shadowはbox-shadow: 影の位置(横) 影の位置(縦) 影のぼかし度 影の色のように書けます。上のエディターで、box-shadowを6px 6px 8px lightblue とすると、ボタンの右下に水色の影をつけることができます。影の位置が0以外、transitionで秒数を指定していると、上のままでは影がボタンの位置から徐々にホバーで指定した位置に影が伸びていきます。あらかじめ通常時に、ホバー後の位置と同じ透明の影を指定しておくことで、影がその場からふわっと現れるアニメーションにできます。BUTTON.button { transition : box-shadow : } .button:hover { box-shadow : } あえて影の位置を動かすエフェクトも面白いと思います。数値を色々変えてみて試してみてください!transformでボタンそのものを動かすBUTTON.button { transition : box-shadow : } .button:hover { box-shadow : transform: } atransformを使用すると、指定した要素を移動したり、形を変えたりすることができます。上の例ではtranslateYという縦方向の位置をずらすプロパティを指定して、ホバー時にボタンが5px上方向に動くようにしています。transformには他にも、要素を拡大するscale、要素を回転させるrotateなどのホバーアニメーションに使いやすいプロパティがたくさんあります。上のエディターのtransformにscale(1.1)を指定すると、ホバー時にボタンが1.1倍になることがわかります。また、エディターのtransformにrotate(360deg)を指定すると、ホバー時にボタンが1回転します。最後まで読んでいただきありがとうございました!プログラミング学習は反復して覚えていくことが大切です!是非ブックマークして学習に役立ててみてください!質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

2023年04月23日

Read More

CSSで角丸の作り方を実際にコードを書きながら覚えよう

こんにちは!エンジニアのますみです!本日は枠線の角を丸くすることのできる、border-radius属性の書き方を解説します!よく使うCSSの書き方ですので覚えておきましょう!この記事ではborder-radiusの基本的な使い方、応用した使い方をマスターすることができます。さらに実際にCSSをこのページ上で書くことができるので、プレビューを見ながら使い方を覚えることができます。是非、ブックマークして学習に役立てていただけたら幸いです。テーマ Webサイトデザインに必須のborder-radius属性の使い方をマスターできる内容 実際にスタイル属性を書くことが可能な記事なので、深く理解して使いこなすことができる内容目次 基本の角丸 値を2つ指定した場合 値を3つ指定した場合 値を4つ指定した場合 角ごとに分けてCSSを書く方法 正円を作る方法 複雑な角丸を指定する方法 border-radiusの基本的な仕組み border-radius属性のみで書く場合 角ごとに分けて書く場合それではさっそく見ていきましょう。基本の角丸サンプル.box { border : border-radius : } 上のようにborder-raduisに角丸のサイズを書くことで、丸みの帯びた四角形を作ることができます。borderとborder-radiusの値は編集可能なので、実際に値を変えてみながら使い方を覚えてみてください。指定した値が大きくなればなるほど滑らかな角になります。値を2つ指定した場合200px 200px.box { border : border-radius : } 2つの値を指定するとborder-radius : 左上と右下 右上と左下のように、対角線上の角に対して角丸の大きさを指定することができます。値を3つ指定した場合200px 200px.box { border : border-radius : } 3つの値を指定するとborder-radius : 左上右上と左下右下のように角丸の大きさを指定することができます。値を4つ指定した場合200px 200px.box { border : border-radius : } 3つの値を指定するとborder-radius : 左上右上右下 左下のように、左上から時計回りに角丸の大きさを指定することができます。角ごとに分けてCSSを書く方法200px 200px.box { border-top-left-radius : border-top-right-radius : border-bottom-right-radius : border-bottom-left-radius : } このように各角ごとに分けて角丸の大きさを指定することもできます。シンプルな角丸であればborder-radiusのみでよいかもしれませんが、複雑に値を指定する場合はこっちのほうがわかりやすいかもしれません。正円をつくる方法200px 200px.box { border : border-radius : } ボックスのサイズの半分の値をborder-radiusに指定すると正円を作ることができます。例のボックスのサイズは200pxの正方形なので、100pxと指定しても正円になります。複雑な角丸を指定する方法ぐにゃっとした複雑な図形を書くことにもborder-radiusを使います。少し仕組みがややこしいので基本的な仕組みから解説していきます。border-radiusの基本的な仕組み角丸をどのように指定しているかを細かく見てみましょう。これまでborder-radiusで指定していた長さは、各角丸の半径です。border-radiusで複雑な角丸を作る際には、この半径を横と縦に分けて指定することで実現できます。それでは早速具体的なやり方を見てみましょう。border-radius属性のみで書く場合200px 200px.box { border-radius : } 例のように / で区切って横の半径と縦の半径を指定します。/ の前は横の半径、 / の後は縦の半径となっています。border-radius: 横の半径/ 縦の半径また、 / の前も後ろも、先ほど基本の角丸で解説した通り 値が1つの場合はすべての角 値が2つの場合は左上と右下 右上と左下 値が3つの場合は左上右上と左下右下 値が4つの場合は左上右上右下 左下という順番で角丸が適用されます。角ごとに分けて書く場合200px 200px.box { border-top-left-radius : border-top-right-radius : border-bottom-right-radius : border-bottom-left-radius : } それぞれの属性に2つの値を指定することでborder-top-left-radius : 横の半径 縦の半径というように指定することができます。最後まで読んでいただきありがとうございました!border-radius属性をマスターするには反復して学習することが大切です!是非ブックマークして学習に役立ててみてください!質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

2023年04月21日

Read More

【WordPressが使えるレンタルサーバー】最安値はどこ?初期費用も加味した価格ランキング!

レンタルサーバー選びって大変ですよねさまざまな会社がレンタルサーバーを運営していてプランもたくさんあります。私が調べた範囲だけでも72種類のプランがあったので、実際は100は余裕で超える種類があるでしょう。この記事はコスパ良くWordPressのサイトを運用したい方に向けて書いています。レンタルサーバーは長期契約をすることで大幅にコストを抑えることができます。しかし、契約してみたもののWordPressが使えなかった!となっては大きな無駄遣いです。あなたはWordPressでサイトを立ち上げてブログを書く、収益を得る等が本来の目的のはずです。レンタルサーバー選びに時間がかかってしまってはもったいないです!当記事は18社72種類のプランの中から初期費用込みで安く使えるWordPress可のレンタルサーバーを紹介します。月額での価格比較ランキングサイトはたくさんありますが、初期費用も計算したランキングはあまり見かけませんねもういろんなレンタルサーバーのホームページを見比べて価格を計算する必要はないですさっさとレンタルサーバーを決定してWordPressサイトを立ち上げ、本来の目的を達成しましょう!*レンタルサーバー公式サイトに『WordPress可』と記載のあるプランを紹介します。*価格等のデータはブログ執筆時のものです。契約前に公式サイトで価格等をしっかり確認してください。目次 今回比較するレンタルサーバー WordPressが使えるレンタルサーバー価格ランキング WordPress可のレンタルサーバーコスパ1位 : リトルサーバー ミニプラン リトルサーバーミニプランのメリット リトルサーバーミニプランのデメリット WordPress可のレンタルサーバーコスパ2位 : ロリポップ!ライトプラン ロリポップ!ライトプランのメリット ロリポップ!ライトプランのデメリット WordPress可のレンタルサーバーコスパ3位 : リトルサーバー ワードプラン リトルサーバー ワードプランのメリット リトルサーバー ワードプランのデメリット おすすめはロリポップ!ミニプラン まとめ 最も安く使えるWordPress可のレンタルサーバーはリトルサーバーミニプラン おすすめはロリポップ!ライトプラン 番外編 当サイトで利用しているレンタルサーバーそれではさっそく見ていきましょう今回比較するレンタルサーバー以下のレンタルサーバーのプランを比較していきます。レンタルサーバー名プラン数ミライサーバー8種類Winserver3種類GIGAレンタルサーバー4種類99YENレンタルサーバー5種類ConoHa WING3種類リトルサーバー4種類ロリポップ!4種類XREA 2種類ColorfulBox 8種類mixhost 3種類エックスサーバー 3種類ABLENET 3種類ヘテムル 1種類JETBOY 6種類バリューサーバー 3種類グランパワー 3種類Just-Size.Networks 2種類CORESERVER 7種類18社全72種類のプランで検証していきます。この中から公式サイトにWordPress可と記載のあるものからランキングを作成しました。また、セットアップが簡単にできるかどうかも加味しています。それでは最も低コストで運用できるプランを見ていきましょうWordPressが使えるレンタルサーバー価格ランキングレンタルサーバー名プラン料金(月)リトルサーバーミニプラン176円~(12カ月契約)ロリポップ!ライト220円~(36カ月契約)リトルサーバーワードプラン221円~(12カ月契約)Just-Size.Networks サブドメインプラン239円~(12カ月契約)リトルサーバーリトルプラン276円~(12カ月契約)Just-Size.Networks エコノミープラン343円~(12カ月契約)リトルサーバービッグプラン456円~(12カ月契約)ColorfulBox BOX2484円~(36カ月契約)グランパワー ソロ500円~(12カ月契約)JETBOY ミニ514円~(12カ月契約)ColorfulBox BOX1528円~(36カ月契約)ロリポップ!ベーシック550円~(36カ月契約)WordPress可のレンタルサーバーコスパ1位 : リトルサーバー ミニプランWordPressが使えるレンタルサーバープラン最安値はリトルサーバーのミニプランです。リトルサーバーは低コストで使えるプランが充実しており、さらに数クリックでWordPressのインストールを完了できる機能もついてきます。無料お試し期間が10日間もあるので、その間にテストすれば失敗する可能性を防げますリトルサーバーミニプランのメリット低コストで運用できる72種類のプランの中で最も低コストで運用することができます。特にWordPressのサイトで収益を得ることが目的の場合、レンタルサーバーの費用はできるだけ抑えて収入を増やしたいところですよねリトルサーバーのミニプランなら初期費用加味でひと月あたり176円で運用することが可能ですので、マイナスを極限まで抑えることができます無料お試し期間がある登録から10日間は無料で利用することができます。試しにWordPressのセットアップをしてこの期間中にテストをしておけば、無駄にコストを払う危険が減らせます数クリックでWordPressのセットアップが可能リトルサーバーのミニプランではコントロールパネルから数クリックでWordPressのインストールが可能です。セットアップに数日かかってしまえばその期間中のコストがもったいないですよね...簡単にセットアップを完了できるということは、余計な出費が減るということでもあります。リトルサーバーミニプランのデメリット表示速度が若干遅めミニプランではPHP高速化設定が行えません。PHP高速化設定をするとWordPress等のサイトを素早く表示することができます。サイトの表示が遅いことはSEO評価を下げる原因になるので、アクセス数が減少する可能性があります。アクセス数を伸ばしていきたいのであれば、上位グレードのプランで契約したほうが良いです容量が少ないミニプランの容量は20GBとなっています。使い方にもよりますが、ブログに使った画像ファイルやWordPress本体、バックアップ等のデータのことを考えると、300記事くらいでいっぱいになる可能性があります。ということは1日1投稿するのであれば1年で365投稿になります。つまり1年も使えないわけです。長期的に運用を続けたいのであれば、少なくとも100GBは容量が欲しいところです。100GBの容量がある最安プランは次に紹介するロリポップ!ライトプランですので、こちらも検討してみるといいでしょうWordPress可のレンタルサーバーコスパ2位 : ロリポップ!ライトプランロリポップ!は低コストかつ知名度も高く安心して使えるレンタルサーバーです。運用はGMOグループが行っています。大きな企業が運営しているという点はレンタルサーバー自体がサービスを終了する可能性が少ないという安心感もあります。ロリポップ!ライトプランのメリット充分な容量があるなんとロリポップ!ライトプランはファイル容量が160GBあります。よほどのことがなければ容量がいっぱいになってブログが更新できなくなった!ということにはならないでしょう。何年もサイトの運用をしていていよいよいっぱいになってしまっても、その頃にはある程度収益を得ることができいるはずですし、プランのアップグレードをすれば問題ないでしょう。ちなみにロリポップ!のプランの1つ上のグレードでもひと月550円と低価格で運用することができます。低コストで運用できるひと月あたりの価格が220円と非常に低価格で運用することができます。36カ月契約の長期契約の価格ですが、その分ハイスペックな機能を低価格で使えるというわけです。サイトは基本的には長く運用していくものなので、長期契約でサーバーを借りるのは全然ありだと思います。どれくらいハイスペックかというと、先ほど容量は最低100GBは欲しいという話をしましたが容量100GB以上で次に安いプランはひと月の価格が倍以上します。ということは価格の倍くらいの価値があるプランとも捉えられますので、コスパは最強クラスです。WordPress簡単インストール機能搭載ロリポップ!ライトプランには、簡単な設定をすればWordPressのインストールが完了するWordPress簡単インストール機能を搭載しています。WordPressを自力でセットアップするのは中々大変なので、素早くセットアップして運用をスタートさせられるのは大きなメリットになります。無料お試し期間があるロリポップ!ライトプランも10日間の無料お試し期間があります。この間に動作確認をしておけばレンタルサーバー選びに失敗して無駄にお金を払うといった危険はなくなりますので、とりあえず登録して動作確認してみるのもいいでしょう。ロリポップ!ライトプランのデメリット正直、目立つデメリットが見つかりませんでした...笑ですがいいポイントばかりお話ししても逆に不安になると思いますので、いくつか感じたことをお話しします長期契約が必要ひと月あたり220円で利用するには36カ月の契約をする必要があります。基本的にはサイトは36カ月くらいは運用していくと思いますので問題ないと思いますが、短期間で利用したい場合は少々価格があがります。WordPressサイトを複数運営するのは厳しい多くのレンタルサーバーでは、複数のサイトを一つのプランで運用することができます。ロリポップ!ライトプランでも複数サイトを運用することは可能ですが、WordPressで複数サイトのサイトを運用するのは厳しいです不可能ではありませんが、プログラミングの知識が若干必要になります。ミスをするとサイト自体が動かなくなってしまう危険もあるため、むやみに挑戦しないほうが良いでしょう。動画を大量にアップロードするには不向きロリポップ!のライトプランのファイル容量は160GBとなっています。WordPressのバックアップ等のデータも容量を消費するため、実質160GBすべて使えるというわけではありません。動画を大量にアップロードする必要があれば、もう少し容量に余裕のあるプランにすると良いでしょう。さて、それでは3位まで見ていきましょう。次はリトルサーバーのワードプランです。名前の通り『WordPressが使いやすいように』というコンセプトのプランになりますWordPress可のレンタルサーバーコスパ3位 : リトルサーバー ワードプランランキング1位のリトルサーバー ミニプランの一つ上のグレードになります。WordPressサイトを運用する上で嬉しい機能を充実させたプランになります。また、ミニプラント同じく10日間の無料お試し期間があるのもいい点ですねリトルサーバー ワードプランのメリットワンクリックで簡単WordPressインストールができるミニプランよりも簡単にWordPressをインストールすることができます。素早くサイト運用をスタートできることは周りより一歩リードできるということです。サイトを早く運用させたい方にピッタリのプランですPHP高速化設定が利用可能ミニプランでは利用できなかったPHP高速化設定が利用できます。WordPressサイトを高速で表示させることが可能になり、離脱率を減らし、SEOの面でも有利になります。サイトが高速で表示できることはアクセス数増加につながりますので、これは大きなメリットになりますリトルサーバー ワードプランのデメリット容量が少ないワードプランの容量は30GBになっています。ミニプランよりは多いですが、一年以上運用するとなると厳しいでしょう。おすすめはロリポップ!ミニプランさて、WordPressが使えるレンタルサーバー価格ランキングの上位3つのプランを詳しく見てみました。この中で私のおすすめはロリポップ!ミニプランです。サイト運用で重要な部分であるレンタルサーバーの容量が充分にあり、価格に対して使える容量のコスパがめちゃくちゃいいです。デメリットは長期契約が必要な点と、複数のWordPressサイトを運用するのが難しい点でしたが、基本的には長期的にサイトは運用していきますし複数WordPressサイトを持つケースは少ないでしょう。まとめ最も安く使えるWordPress可のレンタルサーバーはリトルサーバーミニプランメリット コストを最大限抑えられるため、収益をプラスにできる可能性が上がる 10日間の無料お試し期間があるため、その間に動作確認をすれば失敗を防げる WordPressのセットアップが簡単で、素早くサイト運用をスタートできるデメリット 表示速度が遅め、アクセス数減少につながる可能性もある 容量が少ないため、1年間の運用でもいっぱいになってしまう可能性があるおすすめはロリポップ!ライトプランメリット コストを最大限抑えられるため、収益をプラスにできる可能性が上がる 10日間の無料お試し期間があるため、その間に動作確認をすれば失敗を防げる WordPressのセットアップが簡単で、素早くサイト運用をスタートできるデメリット 長期契約が必要なため、短期間の運用が目的であれば不向き 複数のWordPressサイトを運用したい場合に不利というわけで、WordPressが使えるレンタルサーバー価格ランキングでした!あなたのレンタルサーバー選びのお役に立てたら幸いです!では次の記事もお楽しみに!番外編 当サイトで利用しているレンタルサーバー当サイトはXserverを利用しています。 ひと月あたりの価格は990円~と今回ご紹介したプランと比べると高くなっていますが、それに見合う価値を感じたのでXserverを利用しています。特筆すべきなのが表示の速さです。Xserverは高速でサイトを表示するための機能が充実しており、圧倒的な速さでユーザーの離脱を防ぎます。SEOの観点からも高速でサイトを表示できることはとても重要なポイントです。少々コストはかかりますが、本気でサイトの運用を考えているのであればXserverを使うことを強くおすすめします。 また、10日間の無料お試し期間がありますので、本記事で紹介した低価格で利用できるサーバーとの使用感を比べてみるのもいいと思います。

2023年05月10日

Read More

【CSS入門】px、%、vw、vh、em、remを実際にコードを書きながら覚えよう

こんにちは!エンジニアのますみです!本日は要素の大きさを指定する単位、px、%、vw、vh、em、remを解説していきます!CSSの基本中の基本です!是非最後まで読んでマスターしてくださいね!この記事を読んでほしい方! CSSを学習してスキルを身に着けたい方 基礎知識をまとめた記事をブックマークしておきたい方 実際にコードを書きながら覚えたい方この記事では実際にCSSを書きながら書き方をマスターすることができます。さらに実際にCSSをこのページ上で書くことができるので、プレビューを見ながら使い方を覚えることができます。是非、ブックマークして学習に役立てていただけたら幸いです。目次 基礎 つまづきやすいポイント pxの使い方 %の使い方 vwの使い方 vwは画面サイズの横幅、vhは画面サイズの縦幅で指定する emの使い方 remの使い方 どの単位を使うべきか 基本的には相対的な単位を使う 絶対的な単位を使うケースそれではさっそく見ていきましょう!基礎px、%、vw、vh、em、remというのは、数値の単位です。日常生活で言う、cmや、mmと同じと思っていただけたら大丈夫です。つまづきやすいポイント絶対的な単位と相対的な単位がある先ほどcmや、mmと同じとお話ししました。例えば、『クローゼットの横幅が2mだから、2m以内の収納ボックスを買わないといけないね』という感じで使っていくわけですが、CSSで使う単位には独特なものがあります。絶対的な単位こちらは日常生活で使う単位と一緒で、そのまま指定したサイズで表示されます。当たり前ですが、横幅1mの収納ボックスを横幅2mのクローゼットに入れても、収納ボックスの大きさは1mのままで変わりませんね。pxが絶対的な単位に当てはまります。相対的な単位CSSの世界では、横幅1mの収納ボックスを横幅2mのクローゼットに入れたら2mになった!みたいなことが起こります。どういうことかというと、CSSではこの収納ボックスは、クローゼットの100%の横幅です!というように、入れ物の大きさを基準にサイズを決める単位がほとんどです。これを踏まえて、px、%、vw、vh、em、remそれぞれの書き方を覚えていくとつまづきづらいと思います。pxの使い方ParentBox.parent { width : } .box { width : } pxは絶対的な単位です。親要素の大きさに関わらず、指定した数値で要素を表示します。上のエディターのparentのwidthを変更してみてください。boxの大きさが変化しないことがわかると思います。%の使い方ParentBox.parent { width : } .box { width : } %は相対的な単位です。親要素の何%の横幅で要素を表示します。上の例ではparentの横幅の50%の横幅で青いボックスを表示しています。エディターでboxのwidthを100%にしてみてください。parentの横幅と同じになることがわかると思います。また、boxに%で横幅を指定した状態でparentの横幅を変更すると、parentの大きさに合わせて青いボックスの大きさも変化していきます。vwの使い方ParentBox.parent { width : } .box { width : } vwは相対的な単位ですが、親要素ではなく画面サイズの横幅の何%で要素を表示します。上の例では30vwと指定しているため、画面サイズサイズの横幅の30%で青いボックスが表示されています。この単位の時はparentの横幅は影響を与えないので、parentの大きさを変更しても青いボックスの横幅が変わらないことがわかります。vwは画面サイズの横幅、vhは画面サイズの縦幅で指定するParentBox.parent { width : } .box { width : height : } 上の例では、青いボックスの縦横の大きさを、画面サイズの縦幅の10%に指定してあります。例えばwidthを100vw、heightを100vhとすると、画面サイズ目いっぱいに青いボックスを表示することになります。もちろんvhもparentの大きさの影響は受けないため、parentのサイズを変更しても青いボックスの大きさは変わりません。emの使い方ParentBox.parent { width : } .box { width : font-size : } emは相対的な単位ですが、親要素ではなくフォントサイズの何倍かで要素を表示します。上の例ではfont-sizeを16pxに指定しており、青いボックスの横幅を10emと指定しているため、16 10pxで青いボックスが表示されます。この単位の時はparentの横幅は影響を与えないので、parentの大きさを変更しても青いボックスの横幅が変わらないことがわかります。青いボックスにフォントサイズを指定しておらず、.parentにフォントサイズを指定している場合は、.parentのフォントサイズが青いボックスに適用されるため、.parentのフォントサイズ emの数値で要素が表示されます。ParentBox.parent { width : font-size : } .box { width : } remの使い方ParentBox.parent { width : font-size : } .box { width : font-size : } emは相対的な単位ですが、親要素ではなくWebサイトの基準のフォントサイズの何倍かで要素を表示します。Webサイトの基準のフォントサイズとは、htmlに設定されているフォントサイズのことを指します。htmlのデフォルトのフォントサイズは16pxとなっていますので、上の例では青いボックスの横幅は16 10pxで表示されます。各要素のフォントサイズの影響を受けないため、parent、boxのフォントサイズ、またはparentの横幅を変更しても、青いボックスの横幅が変わらないことがわかります。どの単位を使うべきかそれぞれの単位がどのような働きをするかを解説していきました。レイアウトに応じて適切な単位を使っていきましょう。単位を選ぶ基準をざっくりと解説していきます。基本的には相対的な単位を使う紹介した単位の中で、絶対的な単位はpxのみでしたが、基本的には相対的な単位で大きさを指定しましょう。相対的な単位を使う理由を解説します。柔軟なレイアウトが実現できるパソコンやスマートフォンによって画面のサイズが違うため、絶対的な単位で横幅を指定した時に画面からはみ出したり、小さすぎたりなどの問題が起こることがあります。相対的な単位を使うことで画面サイズに応じて要素のサイズが自動で変わるため、レイアウト崩れを起こしづらくなります。管理がしやすい絶対的な単位を使うと、一か所の要素のサイズを変更した際に他のレイアウトが崩れ、複数個所修正することになったりします。相対的な単位を使っていると、一か所の要素のサイズを変更すると、その子要素なども連動してサイズが修正されるため、変更箇所が少なくなることが多いです。絶対的な単位を使うケースpxを使ったほうが良い場合もあります。その例をご紹介します。高さを指定する場合パソコンは基本的には横長の画面、スマートフォンでは縦長の画面になっています。要素の高さを相対的な単位で指定した場合、パソコン、スマートフォンでそれぞれ見たときにレイアウトが大幅に変わってしまう場合があります。その為、Webサイトのヘッダーの高さなどを指定する際は、pxを使う選択も考えられます。最後まで読んでいただきありがとうございました!要素の大きさを指定する単位は種類も多く、それぞれ働きが複雑なため、反復して学習することが大切です!是非ブックマークして学習に役立ててみてください!質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

2023年04月22日

Read More

XserverでLaravelは使える?使えない

こんにちは!エンジニアのますみです!本日はLaravelで作成したアプリケーションがXserverで動かせるかどうか?LaravelをXserverにアップロードする前に確認しておかないといけないポイントを解説します! 今ならお試し10日間無料!XserverでLaravelは動く?結論から言うと、動きます。当サイトはLaravelで作成しており、特に不自由なく動作しています。ですが、アップロードする前に確認しないといけないポイントがある為、見ていきましょう。XserverにLaravelをアップロードする前に確認しておくポイントアップロードする前に、Xserverが対応しているPHPのバージョンと、Laravelのバージョンに互換性があるかを確認しておく必要があります。Laravelは現在最新バージョンが10になっており、Laravel10はPHPのバージョンが8.1以上でないと動きません。現在Xserverが対応しているPHPのバージョンは以下の通りです。 PHP 8.1.x PHP 8.0.x PHP 7.4.x PHP 7.3.x PHP 7.2.x PHP 7.1.x PHP 7.0.x PHP 5.6.x PHP 5.5.x PHP 5.4.x PHP 5.3.3 PHP 5.1.6XserverはPHP8.1にも対応しているので今のところLaravel10も問題なく動作します。ですが、これはブログ執筆時の情報のため、一応XserverのウェブサイトやLaravelのドキュメントの確認はしておきましょう。Laravelをアップロードする時のレンタルサーバー選びのポイントLaravelはデータベースの更新やキャッシュの処理などをコマンドで行います。また、CSS、Javascriptのビルドにnpm、yarnを利用する為、SSHが使えるレンタルサーバーを選びましょう。他にもいくつかポイントのがあります。レンタルサーバー選びのポイント PHPが使える SSHが使える npm、yarnが使える データベースが使える上の条件を満たしていないレンタルサーバーではせっかく作成したLaravelのアプリケーションが動かないことがありますのでしっかり確認してから契約しましょう。当サイトではXserverのスタンダードプランを利用しています。Xserverのプラン一覧プラン料金(月)データベースSSHスタンダード990円~〇〇プレミアム1,980円~〇〇ビジネス3,960円~〇〇 Xserverは先ほどのLaravelをアップロードする時のレンタルサーバー選びのポイントをすべてクリアしているため、Laravelを使うときはおすすめのレンタルサーバーです。最後まで読んでいただきありがとうございます!質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

2023年05月06日

Read More

【CSS入門】枠線の作り方を実際にコードを書きながら覚えよう

こんにちは!エンジニアのますみです!本日は枠線を指定することのできる、border属性の書き方を解説します!この記事では実際にCSSを書きながら枠線の使い方を覚えることができます!この記事はborder属性でできることを一通りまとめました。さらに実際にCSSをこのページ上で書くことができるので、プレビューを見ながら使い方を覚えることができます!是非、ブックマークして学習などに役立てていただけたら幸いです!テーマ border属性でできることを一通り覚えることができる内容 実際にスタイル属性を書くことが可能な記事なので、深く理解して使いこなすことができる内容この記事では、下のような黒い部分が編集可能になっていますので、実際にCSSを書きながらborder属性の使い方を覚えることができるようになっています!サンプル.box { border : } 10px solid #ffa500の部分が編集可能です。書き換えることで上のボックスの枠線を調節することができます。目次 基本の枠線 枠線を表示 枠線の太さを指定 枠線の色を指定 枠線を装飾する方法 点線にする 額縁のような枠にする 1 額縁のような枠にする 2 額縁のような枠にする 3 額縁のような枠にする 4 破線にする 二重線にする 角丸にする さらに複雑な枠線を指定する方法① | 辺ごとに指定する 辺ごとに細かく指定するサンプル さらに複雑な枠線を指定する方法②| 属性ごとに指定する 指定する値が一つの場合 指定する値が二つの場合 指定する値が三つの場合 指定する値が四つの場合それではさっそく見ていきましょう!基本の枠線枠線を表示サンプル.box { border : } 上のように書くことで枠線を表示することができます。solidの部分を消してみると枠線が消えることがわかります。枠線の太さを指定サンプル.box { border : } 上のように書くことで枠線の太さを指定することができます。10pxの部分を書き換えてみると、枠線の太さが変わることがわかります。枠線の色を指定サンプル.box { border : } 上のように書くことで枠線の色を指定することができます。#ffa500の部分を好きなカラーコードに書き換えてみると、枠線の色が変わることがわかります。枠線を装飾する方法点線にするサンプル.box { border : } 上のようにsolidと書いてあった部分をdottedにすると、点線の枠線を作ることができます。額縁のような枠にする 1サンプル.box { border : } 上のようにinsetと書くことで、額縁のようなデザインにすることができます。額縁のような枠にする 2サンプル.box { border : } 上のようにoutsetと書くことで、額縁のようなデザインにすることができます。insetと非常に似ていますが、色が濃いところと薄いところが逆になっています。額縁のような枠にする 3サンプル.box { border : } 上のようにgrooveと書くことで、insetよりも複雑なデザインにすることができます。額縁のような枠にする 4サンプル.box { border : } 上のようにridgeと書くことで、insetよりも複雑なデザインにすることができます。grooveと非常に似ていますが、色が濃いところと薄いところが逆になっています。破線にするサンプル.box { border : } 上のようにdashedと書くことで、破線の枠線を作ることができます。二重線にするサンプル.box { border : } 上のようにdoubleと書くことで、破線の枠線を作ることができます。角丸にするサンプル.box { border : border-radius : } 上のようにborder-radius属性を追加することで、角丸の枠線を作ることができます。指定した値が大きくなればなるほど滑らかな角になります。さらに複雑な枠線を指定する方法① | 辺ごとに指定するこれまでは.box { border: 枠線の太さ 枠線のタイプ 枠線の色;}borderという属性のみにプロパティを指定していましたが、辺ごとに指定することもできます。.box { border-top: 2px solid #ffa500; border-right: 2px solid #ffa500; border-bottom: 2px solid #ffa500; border-left: 2px solid #ffa500;}border-topが上辺、border-rightが右辺、border-bottomが下辺、border-leftが左辺です。このように書くことで、細かく値を指定することができます。辺ごとに細かく指定するサンプルサンプル.box { border-top : border-left : border-bottom : border-right : } 各プロパティの値を変えてみると、対応した辺の装飾が変化することがわかります。さらに複雑な枠線を指定する方法②| 属性ごとに指定するこれまでは.box { border: 枠線の太さ 枠線のタイプ 枠線の色;}のようにborder属性にすべてのプロパティを書き込んでいきましたが、下のようにそれぞれの値を別々に書くこともできます。.box { border-width: 2px; border-style: solid; border-color: #ffa500;}上のCSSはborder: 2px solid #ffa500;と書いた時と同じ働きをします。枠線の太さはborder-widthに、枠線のタイプはborder-styleに、枠線の色はborder-colorに書いていきます。行数は増えてしまいますが、こうすることでさらに複雑な枠線を指定することができます。指定する値が一つの場合サンプル.box { border-width : border-style : border-color : } 指定する値が一つの場合はすべての辺に値が適用されます。指定する値が二つの場合サンプル.box { border-width : border-style : border-color : } 二つの値を指定すると、一つ目の値が上下の辺、二つ目の値が左右の辺に適用されます。指定する値が三つの場合サンプル.box { border-width : border-style : border-color : } 三つの値を指定すると、一つ目の値が上辺、二つ目の値が下辺、三つ目の値が左右の辺に適用されます。指定する値が四つの場合サンプル.box { border-width : border-style : border-color : } 四つの値を指定すると、一つ目の値が上辺、二つ目の値が右辺、三つ目の値が下辺、四つ目の値が左辺のように、時計回りに順番に適用されます。本日はborder属性の書き方について解説しました!プログラミング学習は何度も繰り返して覚えていくことが大切です!是非ブックマークして学習に役立ててみてください!質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

2023年04月21日

Read More

【HTML、CSS】1-1、1-2みたいなネストしたリストの作り方

こんにちは!エンジニアのますみです!本日は1-1、1-2のようなナンバリングを指定するCSSの書き方を解説します。ブログの目次などを見やすくするには欠かせないテクニックです!目次 サンプル 1-1、1-2みたいなネストしたリストの作り方 リストを作る 子リストを少し右に寄せる デフォルトのリストスタイルを非表示にする 疑似要素とcountersを使いナンバリングする ネストしたリストにも同じようにナンバリングの設定をする 親リストのナンバリング、子リストのナンバリングを組み合わせて表示したい形式で表示それではさっそく見ていきましょうサンプル 親リストのli要素 親リストのli要素 子リストのli要素 子リストのli要素 子リストのli要素 親リストのli要素 親リストのli要素 子リストのli要素 子リストのli要素 子リストのli要素こんな感じのリストを作っていきます。ol要素のようなナンバリングに見えますが、1-1、1-2のようなナンバリングもありますねこれは通常のol要素では作れないため、疑似要素とcounter属性を使っていきます。ちなみに1.1、1.2のようなナンバリングもできます。 親リストのli要素 親リストのli要素 子リストのli要素 子リストのli要素 子リストのli要素 親リストのli要素 親リストのli要素 子リストのli要素 子リストのli要素 子リストのli要素応用するとこんな感じのデザインもできます。 親リストのli要素 親リストのli要素 子リストのli要素 子リストのli要素 子リストのli要素 親リストのli要素 親リストのli要素 子リストのli要素 子リストのli要素 子リストのli要素1-1、1-2みたいなネストしたリストの作り方手順1. リストを作る 親リストのli要素 親リストのli要素 子リストのli要素 子リストのli要素 子リストのli要素 親リストのli要素 親リストのli要素 子リストのli要素 子リストのli要素 子リストのli要素HTMLdiv class="コンテナ"    ul class="親リスト"        li class="親リストのli要素"親リストのli要素/li        li class="親リストのli要素"親リストのli要素/li    /ul    ul class="子リスト"        li class="子リストのli要素"子リストのli要素/li        li class="子リストのli要素"子リストのli要素/li        li class="子リストのli要素"子リストのli要素/li /ul    ul class="親リスト"        li class="親リストのli要素"親リストのli要素/li        li class="親リストのli要素"親リストのli要素/li    /ul    ul class="子リスト"        li class="子リストのli要素"子リストのli要素/li        li class="子リストのli要素"子リストのli要素/li        li class="子リストのli要素"子リストのli要素/li    /ul/div今回はCSSを書く際にセレクタの付け方が少々複雑になります。その為、わかりやすいように日本語でクラス名を付けましたが、本来は日本語のクラス名はおすすめしません。また、以下のようにHTML要素もネストさせたいところですがナンバリングをつける際にCSSが難解になってしまうため、上記のように書くことにします。HTMLul class="親リスト" style="margin-bottom: 0" li class="親リストのli要素"親リストのli要素/li li class="親リストのli要素"親リストのli要素/li li ul class="子リスト" style="margin-bottom: 0" li class="子リストのli要素"子リストのli要素/li li class="子リストのli要素"子リストのli要素/li li class="子リストのli要素"子リストのli要素/li /ul /li/ulちなみにul、ol要素でなくても今回紹介するナンバリングを表示させることが可能なので、場面に応じでHTML要素を決めてください!手順2. 子リストを少し右に寄せる 親リストのli要素 親リストのli要素 子リストのli要素 子リストのli要素 子リストのli要素 親リストのli要素 親リストのli要素 子リストのli要素 子リストのli要素 子リストのli要素CSS.子リスト { margin-left: 0.8rem;}やりたいレイアウトによってはこの工程は無くても可です。こうすることにより、ネストしているとわかりやすくなります。手順3. デフォルトのリストスタイルを非表示にする 親リストのli要素 親リストのli要素 子リストのli要素 子リストのli要素 子リストのli要素 親リストのli要素 親リストのli要素 子リストのli要素 子リストのli要素 子リストのli要素CSS.親リスト { list-style: none; // 追加}.子リスト { margin-left: 0.8rem; list-style: none; // 追加}デフォルトのリスト装飾は使わないため、親リスト、子リストともにlist-style:noneをセットします。手順4. 疑似要素とcountersを使いナンバリングする 親リストのli要素 親リストのli要素 子リストのli要素 子リストのli要素 子リストのli要素 親リストのli要素 親リストのli要素 子リストのli要素 子リストのli要素 子リストのli要素CSS.コンテナ { counter-reset: ul; // 追加}.親リスト { list-style: none;}.親リスト .親リストのli要素::before { counter-increment: ul 1; // 追加 content: counter(ul); // 追加}.子リスト { margin-left: 0.8rem; list-style: none;}コンテナにcounter-reset、親リストのli要素に疑似要素(::before)を追加し、counter-incrementという値を使用しています。そして::beforeのcontentにはcounter(ul)という指定をしています。疑似要素(::before)について詳しく知りたい方はこちらの記事をご覧くださいCSSにはセレクタで指定した要素が出てきた回数を数えて、順番にナンバリングする機能があります(若干語弊があるのですが後ほど詳しく解説します)その為に使う属性がcounter-reset、counter-increment、counterです。counter-resetで名前と初期値を指定、リセットするcounter-reset: 名前 初期値;この時に指定した名前に回数を記憶していきます。初期値は指定しなければ0になります。counter-resetを指定した要素が現れるたびに名前に記憶された回数は初期値にリセットされます。今回は.コンテナを持つ要素は一つだけですが、二つ以上に.コンテナを持つ要素が増えるかもしれません。変更が起こる可能性を考えてcounter-resetはしっかり指定しておきましょう。counter-incrementで回数を更新するcounter-increment: 名前 増加数;counter-incrementを指定した要素が現れるたびに、名前に記憶されている回数を更新します。この時、counter-incrementに指定した増加数分数値が増えていきます。今回は.親リスト .親リストのli要素::beforeに対してcounter-incrementを指定しました。.親リスト .親リストのli要素::before { counter-increment: ul 1;}.親リスト .親リストのli要素::beforeが現れるということはHTML上では.親リスト .親リストのli要素が現れたタイミングなのでul class=親リスト style=margin-bottom: 0 ulをリセット、初期値の0がセットされる li class=親リストのli要素親リストのli要素/li ulに1を足す ul = 1 li class=親リストのli要素親リストのli要素/li ulに1を足す ul = 2 li ul class=子リスト style=margin-bottom: 0 li class=子リストのli要素子リストのli要素/li li class=子リストのli要素子リストのli要素/li li class=子リストのli要素子リストのli要素/li /ul /li/ulこういうことですねcounter(名前)で要素を表示content: counter(名前)counter-reset、counter-incrementで使用していた名前に記憶されている数値を表示するときにcounter(名前)とします。div class=コンテナulをリセット、初期値の0がセットされるul class=親リストli class=親リストのli要素親リストのli要素/li ulに1を足す ul = 1 counter(ul)で表示、1が表示されるli class=親リストのli要素親リストのli要素/li ulに1を足す ul = 2 counter(ul)で表示、2が表示される/ulul class=子リストli class=子リストのli要素子リストのli要素/lili class=子リストのli要素子リストのli要素/lili class=子リストのli要素子リストのli要素/li /ulul class=親リストli class=親リストのli要素親リストのli要素/li ulに1を足す ul = 3 counter(ul)で表示、3が表示されるli class=親リストのli要素親リストのli要素/li ulに1を足す ul = 4 counter(ul)で表示、4が表示される/ulul class=子リストli class=子リストのli要素子リストのli要素/lili class=子リストのli要素子リストのli要素/lili class=子リストのli要素子リストのli要素/li/ul/divもちろん名前を間違えてしまうとおかしなカウントになってしまうので誤字には注意してください。手順5. ネストしたリストにも同じようにナンバリングの設定をする 親リストのli要素 親リストのli要素 子リストのli要素 子リストのli要素 子リストのli要素 親リストのli要素 親リストのli要素 子リストのli要素 子リストのli要素 子リストのli要素CSS.コンテナ { counter-reset: ul;}.親リスト { list-style: none; margin-bottom: 0;}.親リスト .親リストのli要素::before { counter-increment: ul 1; content: counter(ul);}.子リスト { margin-left: 0.8rem; list-style: none; counter-reset: uul; // 追加}.子リスト .子リストのli要素::before { counter-increment: uul 1; // 追加 content: counter(uul); // 追加}子リストにもナンバリングをする設定を追加します。親リストの出現回数を記憶しているulとは別でカウントをしていく必要があるため、別途uulという名前に子リストの出現回数を記憶するようにします。div class=コンテナulをリセット、初期値の0がセットされるul class=親リストli class=親リストのli要素親リストのli要素/li ulに1を足す ul = 1 counter(ul)で表示、1が表示されるli class=親リストのli要素親リストのli要素/li ulに1を足す ul = 2 counter(ul)で表示、2が表示される/ulul class=子リストuulをリセット、初期値の0がセットされるli class=子リストのli要素子リストのli要素/li uulに1を足す uul = 1 counter(uul)で表示、1が表示されるli class=子リストのli要素子リストのli要素/li uulに1を足す uul = 2 counter(uul)で表示、2が表示されるli class=子リストのli要素子リストのli要素/li uulに1を足す uul = 3 counter(uul)で表示、3が表示される /ulul class=親リストli class=親リストのli要素親リストのli要素/li ulに1を足す ul = 3 counter(ul)で表示、3が表示されるli class=親リストのli要素親リストのli要素/li ulに1を足す ul = 4 counter(ul)で表示、4が表示される/ulul class=子リストuulをリセット、初期値の0がセットされるli class=子リストのli要素子リストのli要素/li uulに1を足す uul = 1 counter(uul)で表示、1が表示されるli class=子リストのli要素子リストのli要素/li uulに1を足す uul = 2 counter(uul)で表示、2が表示されるli class=子リストのli要素子リストのli要素/li uulに1を足す uul = 3 counter(uul)で表示、3が表示される/ul/div今回はcounter-resetを指定した子リストが二回出現します。そのためuulが記憶している数値はリセットされて、二個目の子リストはまた1,2,3とナンバリングされます。手順6. 親リストのナンバリング、子リストのナンバリングを組み合わせて表示したい形式で表示 親リストのli要素 親リストのli要素 子リストのli要素 子リストのli要素 子リストのli要素 親リストのli要素 親リストのli要素 子リストのli要素 子リストのli要素 子リストのli要素CSS.コンテナ { counter-reset: ul;}.親リスト { list-style: none; margin-bottom: 0;}.親リスト .親リストのli要素::before { counter-increment: ul 1; content: counter(ul);}.子リスト { margin-left: 0.8rem; list-style: none; counter-reset: uul;}.子リスト .子リストのli要素::before { counter-increment: uul 1; content: counter(ul) "-" counter(uul); // 修正}子リストのli要素の::beforeを修正し、親リストの出現回数を記憶しているulを呼び出すことで1-1、1-2というナンバリングが表示できます。子リストのli要素の一つ目が出現したタイミングで、親リストの出現回数を記憶しているulは2になっているため2-1と表示できるわけですねdiv class=コンテナulをリセット、初期値の0がセットされるul class=親リストli class=親リストのli要素親リストのli要素/li ulに1を足す ul = 1 counter(ul)で表示、1が表示されるli class=親リストのli要素親リストのli要素/li ulに1を足す ul = 2 counter(ul)で表示、2が表示される/ulul class=子リストuulをリセット、初期値の0がセットされるli class=子リストのli要素子リストのli要素/li uulに1を足す uul = 1 counter(ul) - counter(uul)で表示、2-1が表示される...content: counter(ul) - counter(uul);の-が親リストの出現回数と子リストの出現回数の間に表示される文字なので、お好みの文字を入れることで1.1、1.2、1.3と表示したり1:1、1:2と表示したりできます。あとは余白や色を微調整したら完成! 親リストのli要素 親リストのli要素 子リストのli要素 子リストのli要素 子リストのli要素 親リストのli要素 親リストのli要素 子リストのli要素 子リストのli要素 子リストのli要素CSS.コンテナ { counter-reset: ul;}.親リスト { list-style: none; margin-bottom: 0;}.親リスト .親リストのli要素::before { counter-increment: ul 1; content: counter(ul); margin-right: 0.4rem; // 追加 font-weight: bold; // 追加}.子リスト { margin-left: 0.8rem; list-style: none; counter-reset: uul;}.子リスト .子リストのli要素::before { counter-increment: uul 1; content: counter(ul) "-" counter(uul); margin-right: 0.4rem; // 追加 font-weight: bold; // 追加}この辺はお好みで!::before要素に背景色や文字色等のスタイルを指定することで自由なデザインが可能です!最後まで読んでいただきありがとうございます!質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

2023年04月30日

Read More

【CSS入門】displayの使い方を実際にコードを書きながら覚えよう

こんにちは!エンジニアのますみです!本日はCSSの基本、displayの使い方を解説していきます!自由なレイアウトを作るには欠かせない知識です!是非覚えてみてください!この記事を読んでほしい方! CSSを学習してスキルを身に着けたい方 基礎知識をまとめた記事をブックマークしておきたい方 実際にコードを書きながら覚えたい方この記事では実際にCSSをこのページ上で書くことができるので、プレビューを見ながら使い方をマスターすることができます。是非、ブックマークして学習に役立てていただけたら幸いです。目次 display:blockの使い方 〇幅、高さを指定できる 余白を指定できる display:inlineの使い方 親要素の横幅に到達すると自動で改行される 余白を指定する際は注意が必要 横の余白は綺麗に表示される 縦のmarginは指定できない 縦のpaddingを指定するとレイアウトが崩れやすいため注意 display:inline-blockの使い方 親要素の横幅に到達すると自動で改行される 縦、横の余白が指定可能 改行しても余白が綺麗に表示できる display:flexの使い方 子要素を左寄せ、中央寄せ、右寄せにする 子要素を横幅いっぱいに均等に配置するそれではさっそく見ていきましょう!display:blockの使い方ParentBoxBox.parent { display : } .box { display : } blockを指定すると、要素は縦に並べられます。〇幅、高さを指定できるParentBoxBox.parent { display : } .box { display : width : height : } blockを指定した要素は幅、高さを指定することができます。エディターの.boxの大きさを編集してみると、幅、高さが指定できることがわかります。余白を指定できるParentBoxBox.parent { display : } .box { display : margin : padding : } blockを指定した要素は余白(margin)、要素の内側の余白(padding)を指定することができます。エディターの.boxのmargin、paddingを編集してみると、余白が指定できることがわかります。display:inlineの使い方ParentBoxBoxBox.parent { display : .box { display : } inlineを指定すると、要素は横に並べられます。親要素の横幅に到達すると自動で改行されるParentBoxBoxBox.parent { display : width : } .box { display : } 上の要素がもしも改行していなければ、parentのwidthを小さくしてみてください。inlineを指定した要素は、親要素の横幅に到達すると自動で改行されます。marginを適切に指定することで、見やすいレイアウトにすることができます。余白を指定する際は注意が必要横の余白は綺麗に表示できるParentBoxBox.parent { display : } .box { display : margin : padding : } inlineを指定した要素に、横の余白を指定した例です。このように各要素に適切な余白を指定して、見やすいレイアウトを作ることができます。縦のmarginは指定できないParentBoxBox.parent { display : } .box { display : margin : padding : } inlineを指定した要素は、縦向きのmarginを指定しても無効となるため、変化が起こりません。縦のpaddingを指定するとレイアウトが崩れやすいため注意ParentBoxBox.parent { display : } .box { display : margin : padding : } inlineを指定した要素は、縦のpaddingを指定することが可能ですが、レイアウトが崩れやすいため注意が必要です。上の例では、青いボックスの縦のpaddingに50pxを指定しました。青いボックス自体は指定したpadding分大きく表示されましたが、親ボックスの大きさに影響を与えられないため、おかしなレイアウトになってしまっています。ParentBoxBoxBox.parent { display : width : } .box { display : margin : padding : } また、要素が改行した際にはpaddingで指定した縦幅分、他の要素とかぶってしまいます。上のeditorのpaddingを編集して、padding: 0px 10px;とすると表示崩れが直ることがわかると思います。その為、inlineを指定した要素には基本的には縦のpaddingは指定するべきではありません。display:inline-blockの使い方ParentBoxBoxBox.parent { display : .box { display : } inline-blockを指定すると、要素は横に並べられます。親要素の横幅に到達すると自動で改行されるParentBoxBoxBox.parent { display : width : } .box { display : } 上の要素がもしも改行していなければ、parentのwidthを小さくしてみてください。inline-blockを指定した要素は、親要素の横幅に到達すると自動で改行されます。ここまではinlineと変わりない働きをしますが、余白の指定で大きな差があります。縦、横の余白が指定可能ParentBoxBoxBox.parent { display : } .box { display : padding : margin : } inline-blockはmargin、paddingが縦も横も設定可能です。改行しても余白が綺麗に表示できるParentBoxBoxBox.parent { display : width : } .box { display : padding : margin : } inline-blockを指定した要素は自身の高さを明確に持つことができるので、 改行しても要素同士がかぶることはありません。display:flexの使い方ParentBoxBoxBox.parent { display : } .box { display : padding : margin : } これまでの属性は、指定した要素自身の働きが変わる属性でしたが、flexは特殊で、子要素の並べ方に影響を与えます。flexは子要素を横並びに表示するため、青いボックスが横並びに配置されます。子要素を左寄せ、中央寄せ、右寄せにするParentBoxBoxBox.parent { display : width : justify-content : } .box { display : padding : margin : } flexを指定した要素に、justify-content: centerとすると、子要素を中央に寄せて配置することができます。また、flex-startで左寄せ、flex-endで右寄せになります。是非上のエディターでjustify-contentを編集して、動きを確認してみてください。子要素を横幅いっぱいに均等に配置するParentBoxBoxBox.parent { display : width : justify-content : } .box { display : padding : margin : } さらに、justify-conentにspace-betweenを指定すると、子要素を横幅いっぱいに広げて配置することができます。均等に配置する設定は他にもあり、space-aroundと指定すると最初と最後の要素も余白を持たせた状態で配置され、space-evenryと指定すると、一つ目の要素の前の余白、要素間の余白、最後の要素の後の余白がすべて均等になるように配置されます。flexは他にも柔軟なレイアウトに対応するための設定がたくさんあるため、この記事ではよく使うものを厳選して紹介しました。Webデザインにおいて欠かせない属性なので、是非覚えてみてください!最後まで読んでいただきありがとうございました!プログラミング学習は反復して覚えていくことが大切です!是非ブックマークして学習に役立ててみてください!質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

2023年04月22日

Read More

HTML、CSSで太めのアンダーラインを作る方法

こんにちは!エンジニアのますみです!本日はHTML、CSSで太めの下線を作る方法を解説します!いわゆるアンダーラインですね!是非覚えておきましょう!テーマ HTML、CSSで太めの下線を作る方法がわかる text-decorationの使い方がわかる backgroundの応用した使い方がわかる うまくいかないパターンが覚えられる目次 太めの下線を作る方法 text-decorationを使う backgroundを使う うまくいかない例 border-bottomを使う 疑似要素を使うそれではさっそく見ていきましょう太めの下線を作る方法今回はこのようなHTMLで作っていきます。HTMLCSS は、HTMLで記述されたウェブページのspan class=avds9-decorationスタイルやレイアウト/spanを指定するための言語です。HTMLがウェブページの構造を表現するのに対し、CSSはspan class=avds9-decoration見た目や装飾/spanを指定することができます。1. text-decorationを使うCSS は、HTMLで記述されたウェブページのスタイルやレイアウトを指定するための言語です。HTMLがウェブページの構造を表現するのに対し、CSSは見た目や装飾を指定することができます。このようなアンダーラインはこんなCSSで作れます。.decoration { text-decoration: underline solid #fedc9c 0.4rem; text-underline-offset: -0.2rem;}text-decorationで下線をある程度太くして、色を指定します。text-underline-offsetで下線の位置をちょうどいい位置まで上に移動します。text-decorationについてはこちらの記事で解説しています。詳しく知りたい方は是非読んでみてください2. backgroundを使うCSS は、HTMLで記述されたウェブページのスタイルやレイアウトを指定するための言語です。HTMLがウェブページの構造を表現するのに対し、CSSは見た目や装飾を指定することができます。.decoration { background: linear-gradient(transparent 60%, #fedc9c 30%);}背景の上側が透明、下側が指定した色というグラデーションを作ることで太めの下線が作成できます。transparent 60%の部分が透明な部分、#fedc9c 30%の部分が指定した色の部分になります。うまくいかない例border-bottomを使うCSS は、HTMLで記述されたウェブページのスタイルやレイアウトを指定するための言語です。HTMLがウェブページの構造を表現するのに対し、CSSは見た目や装飾を指定することができます。.decoration { border-bottom: 0.4rem solid #fedc9c;}borderは自由度の高いデザインができるCSSプロパティですが、下線を少し上にするということができません。その為、上のようなレイアウトになってしまいます。疑似要素を使うCSS は、HTMLで記述されたウェブページのスタイルやレイアウトを指定するための言語です。HTMLがウェブページの構造を表現するのに対し、CSSは見た目や装飾を指定することができます。.decoration{ position: relative; z-index: 1;}.decoration::after { content: ""; position: absolute; display: inline-block; width: 100%; height: 0.4rem; background-color: #fedc9c; left: 0; bottom: -0.2rem; z-index: -1;}疑似要素::before、::afterを使うと非常に自由度が高いデザインができますが、改行時のコントロールが難しく、あまりお勧めしません。最後まで読んでいただきありがとうございます!プログラミング学習は何度も繰り返して覚えていくことが大切です!是非ブックマークして学習に役立ててみてください!質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

2023年04月30日

Read More

checkboxをデザインできる:checkedの解説【HTML、CSS】

こんにちは!エンジニアのますみです!本日はcheckboxのチェック時のデザインができる:checkedの使い方を解説します!目次 サンプル チェック時のスタイルを作成する手順 デフォルトのスタイルをリセットする チェックされていない状態のスタイルを決める :checkedを使い、チェック時のスタイルを決めるそれではさっそく見ていきましょうサンプル利用規約に同意する 上の利用規約に同意するにチェックをすると、ハンコが押されたようなアニメーションをします。:checkedはcheckboxがチェックされている時のスタイルを指定できるCSS疑似クラスになります。サンプルのHTML、CSSはこの記事の後半に載せておきます。チェック時のスタイルを作成する手順1. デフォルトのスタイルをリセットするチェックしてください 上はデフォルトの状態のチェックボックスです。ブラウザによりますが、チェックすると背景色が変わったり、チェックマークが現れたりしますね自由なデザインにするために、このデフォルトの変化を無しにしていきます。.checkbox { -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: none; background-color: transparent; border-color: inherit;}2. チェックされていない状態のスタイルを決めるチェックしてください .checkbox { -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: none; background-color: transparent; border: 1px solid lightgray; border-radius: 0.2rem; width: 1rem; height: 1rem;}お好みで通常時のスタイルを決めます。私は大きさ、枠線、角丸を指定してみました。3. :checkedを使い、チェックされている時のスタイルを決めるチェックしてください .checkbox { -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: none; background-color: transparent; border: 1px solid lightgray; border-radius: 0.2rem; width: 1rem; height: 1rem;}.checkbox:checked { background-color: lightcoral;}チェックボックスのセレクタの後に:checkedを付け加えたものをCSSに追加します。ここでチェック時のスタイルを定義します。とりあえず背景色を指定してみました。チェックを入れてみると背景色がオレンジ系の色になると思います。ハンコを押すCSSのサンプルどこに需要があるかわかりませんが、この記事冒頭のハンコを押すチェックボックスのHTMLとCSSです。HTMLlabel class="checkbox-label" span チェックしてください /span input class="checkbox" type="checkbox"/labelCSS.checkbox-label { display: flex; align-items: center; cursor: pointer;}.checkbox { width: 3rem; height: 3rem; margin-left: 0.8rem; display: flex; justify-content: center; align-items: center; position: relative; outline: none; border: 1px solid lightgray; -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer;}.checkbox:checked { background-color: transparent; border: 1px solid lightgray;}.checkbox:before { position: absolute; content: "可"; font-size: 1.8rem; font-weight: bolder; display: flex; justify-content: center; align-items: center; width: 95%; height: 95%; left: 0; color: #C42121; border: 3px solid #C42121; border-radius: 50%; transition: 0s; opacity: 0;}.checkbox:checked:before { opacity: 1; animation: stamp 1s linear;}@keyframes stamp { 0% { opacity: 0; transform: scale(1.2) rotate(720deg); } 10% { opacity: 1; } 50% { transform: scale(1.2) rotate(0deg); } 85% { transform: scale(1.2) rotate(0deg); } 95% { transform: scale(0.8) rotate(0deg); } 100% { transform: scale(1) rotate(0deg); }}最後まで読んでいただきありがとうございます!質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

2023年04月30日

Read More

CSSで丸を作る方法【書いてわかるCSS】

こんにちは!エンジニアのますみです!本日はCSSで丸を作る方法を解説します!メリハリのあるレイアウトを作るために必須のテクニックです!この記事では実際にCSSをこのページ上で書くことができるので、プレビューを見ながら使い方を覚えることができます!是非、ブックマークして学習などに役立てていただけたら幸いです!テーマ CSSで丸を作る方法をマスターできる この記事上でプレビューを見ながらCSSを書くことで、CSSの仕組みを深く理解できる目次 丸を作る手順 正方形を作る 角を丸くするborder-radius属性を追加する border-radiusを調整して丸を作る 枠線だけ表示するそれではさっそく見ていきましょう丸を作る手順HTMLはこのようにしてください。div class="circle"/divクラスにcircleを設定した要素を丸くしていきます。1. 正方形を作る.circle { width : height : background-color : } widthとheightに同じ値を設定しておけば大丈夫です。背景色(background-color)はお好みで設定してください。2. 角を丸くするborder-radius属性を追加する.circle { width : height : background-color : border-radius : } CSSにborder-radiusを追加します。border-radiusにはpxなどのサイズを指定することができます。これを大きくすると青いボックスの角が丸くなっていきます。試しにborder-radius : 10pxと設定してみてください。青いボックスの角が丸くなったのがわかると思います。3. border-radiusを調整して丸を作る.circle { width : height : background-color : border-radius : } border-radiusを50%に設定してみてください。綺麗な丸が作れたと思います。border-radiusは、要素の半分の大きさを指定すると綺麗な丸を作ることができます。ということは50pxと指定しても丸が作れるはずです。上のエディターでborder-radius : 50pxと設定してみてください。これでもきれいな丸になることがわかると思います。基本的にはborder-radius : 50%でOK50%で指定しておけば、丸の大きさを後から変更した時にborder-radiusを再調整しなくても綺麗な丸が表示されるため、らくちんです!border-radiusについてはこちらの記事で詳しく解説しています!楕円やぐにゃっとした丸を作れるようになりたい方は読んでみてください。枠線だけ表示する.circle { width : height : border : border-radius : } background-colorを削除して、border: 2px solid #0072c6を追加すると、青い枠線の綺麗な丸を作れます。線の色を変更したいときはborder: 2px solid #0072c6;この部分を好きなカラーコードに変更してください。線の太さを変更したいときはborder: 2px solid #0072c6;この部分を好きな太さに変更してください。borderについてはこちらの記事で詳しく解説しています!いろんなデザインの線を作りたい方は是非読んでみてください。最後まで読んでいただきありがとうございます!プログラミング学習は何度も繰り返して覚えていくことが大切です!是非ブックマークして学習に役立ててみてください!質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

2023年04月25日

Read More

【書けるからわかるCSS】text-decorationで文字を装飾する方法

こんにちは!エンジニアのますみです!本日はtext-decorationの使い方を解説します。意外と自由なデザインが可能なCSSです。是非覚えておきましょう!この記事ではtext-decorationの使い方をサンプル付で解説します。さらに実際にCSSをこのページ上で書くことができるので、プレビューを見ながら使い方を覚えることができます!是非、ブックマークして学習などに役立てていただけたら幸いです!テーマ text-decorationの使い方を覚えて自由なデザインを作れるようになる この記事上でプレビューを見ながらCSSを書くことで、CSSの仕組みを深く理解できる目次 サンプル 基本的な使い方 text-decorationを使用するための最小限のCSS 装飾線の太さを指定する 装飾線のデザインを指定する 装飾線の色を指定する もっと自由にデザインする underlineの位置を指定するそれではさっそく見ていきましょうサンプルHTMLはこのようにしています!HTMLCSS は、HTMLで記述されたウェブページのspan class=decorationスタイルやレイアウト/spanを指定するための言語です。HTMLがウェブページの構造を表現するのに対し、CSSはspan class=decoration見た目や装飾/spanを指定することができます。CSS は、HTMLで記述されたウェブページのスタイルやレイアウトを指定するための言語です。HTMLがウェブページの構造を表現するのに対し、CSSは見た目や装飾を指定することができます。.decoration { text-decoration : text-underline-offset : } text-decorationは文字に装飾をつけることができるCSSです。border等と違い、文章の途中で改行してもレイアウトが崩れにくいため、上の例のような要点だけ目立たせたいときに便利です。基本的な使い方text-decorationを使用するための最小限のCSSCSS は、HTMLで記述されたウェブページのスタイルやレイアウトを指定するための言語です。HTMLがウェブページの構造を表現するのに対し、CSSは見た目や装飾を指定することができます。.decoration { text-decoration : } このようにtext-decoration : 装飾線の種類とすることで、文字の装飾を表示することができます。装飾線の種類は下記になります。上のエディターを編集してみると装飾線の種類が変わることがわかります。 none :装飾無し (サンプル) underline:下線 (サンプル) overline:上線 (サンプル) line-through:打ち消し線 (サンプル)装飾線の太さを指定するCSS は、HTMLで記述されたウェブページのスタイルやレイアウトを指定するための言語です。HTMLがウェブページの構造を表現するのに対し、CSSは見た目や装飾を指定することができます。.decoration { text-decoration : } text-decorationにサイズを追加すると装飾線の太さを変えることができます。デフォルトでは非常に細い線が表示されるため、サイズを指定する機会は多いです。是非太さを変える方法を覚えておきましょう。装飾線のデザインを指定するCSS は、HTMLで記述されたウェブページのスタイルやレイアウトを指定するための言語です。HTMLがウェブページの構造を表現するのに対し、CSSは見た目や装飾を指定することができます。.decoration { text-decoration : } 下記の値をtext-decorationに追加すると、装飾線のデザインを変更できます。 solid :1本線 (サンプル) double :2本線 (サンプル) dotted :点線 (サンプル) dashed :破線 (サンプル) wavy : 波線 (サンプル)装飾線の色を指定するCSS は、HTMLで記述されたウェブページのスタイルやレイアウトを指定するための言語です。HTMLがウェブページの構造を表現するのに対し、CSSは見た目や装飾を指定することができます。.decoration { text-decoration : } text-decorationにカラーコードサイズを追加すると装飾線の色を変えることができます。上のエディターの#ffa500の部分を好きなカラーコードに変更してみると装飾線の色が変わることがわかります。もっと自由にデザインするunderlineの位置を指定するCSS は、HTMLで記述されたウェブページのスタイルやレイアウトを指定するための言語です。HTMLがウェブページの構造を表現するのに対し、CSSは見た目や装飾を指定することができます。.decoration { text-decoration : text-underline-offset : } text-underline-offsetを追加すると、underlineの上下の位置を指定することができます。太めのunderlineを使用する時はほんの少し文字とかぶるように位置を調整してバランスをとることが多いです。最後まで読んでいただきありがとうございます!プログラミング学習は何度も繰り返して覚えていくことが大切です!是非ブックマークして学習に役立ててみてください!質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

2023年04月29日

Read More

ますみ

愛知県在住の20代プログラマーです!

プログラミングと無縁の専門学校を卒業して働き出しましたが、コロナ禍でほぼ無職に...

無職時代に独学でプログラミングを勉強して、未経験からめでたくプログラマーとして採用していただけました。

このブログを見た方が、わたしが独学で勉強していた時期に悩んでいたことで悩まないように...そう願いながら情報を発信しています!

おすすめレンタルサーバー


当サイトはXserverを利用しています。 HTML、CSSで作成したホームページはもちろん、wordpress、Laravel等で作成した高度なアプリケーションも利用可能です!

ますみ

愛知県在住の20代プログラマーです!

プログラミングと無縁の専門学校を卒業して働き出しましたが、コロナ禍でほぼ無職に...

無職時代に独学でプログラミングを勉強して、未経験からめでたくプログラマーとして採用していただけました。

このブログを見た方が、わたしが独学で勉強していた時期に悩んでいたことで悩まないように...そう願いながら情報を発信しています!