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

ますみのブログ

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

【python入門】オブジェクトを使ってみよう!

こんにちは!プログラマーのますみです!今回はpythonでオブジェクトを使う方法をご紹介します!pythonはこちらのサイトで簡単に動かしてみることができます!paiza.io是非実際にプログラムを書いてみながらオブジェクトの使い方を覚えてみてくださいね!オブジェクトってなに?オブジェクトとは、プログラムの中で扱うデータを、そのデータに適した形でまとめたものです!例えば、pythonの場合は、以下のようにオブジェクトを定義することができます!product = {    'name': 'トマト',    'price': 150}例ではトマトという商品の情報をproductという変数に定義しています。このようにまとまった情報を一つの変数で管理できるため、さまざまな処理が書きやすいメリットがあります!オブジェクトを使った処理を書いてみよう!それではオブジェクトを使った処理の例を書いてみますね!product = {'name': 'トマト','price': 150}print('商品名は' + product['name'] + 'です')print('価格は' + str(product['price']) + 'です')こんな感じで、オブジェクトに格納された値を使うには、オブジェクト名前[オブジェクトの中身の名前]という感じで値を取り出すことができます!オブジェクトはこのように二階層、三階層というようにも定義できるのですがproduct = {'name': 'トマト','price': 150,'shop': {'name': '八百屋'}}この場合はproduct[shop][name]というように、productの中のshopの中のnameといった感じで指定していけば大丈夫です!そして、オブジェクトは配列に格納することもできます。products = [    {'name': 'トマト', 'price': 150},    {'name': 'にんじん', 'price': 120}]pythonの配列についての記事はこちらを是非読んでみてください!それではまず、商品の情報を順番に表示してみましょう!products = [    {        'name': 'トマト',        'price': 150    },    {        'name': 'にんじん',        'price': 120    }]for product in products:    print('商品名は' + product['name'] + 'です')    print('価格は' + str(product['price']) + 'です')これを実行してみると商品名はトマトです価格は150です商品名はにんじんです価格は120ですと表示できたと思います!それではこれを、商品名のリストと合計価格を表示するようにしてみましょう!少し複雑になりますが、こんな感じです!products = [    {        "name": "トマト",        "price": 150    },    {        "name": "にんじん",        "price": 120    }]productList = ""totalPrice = 0for product in products:    productList += product["name"] + "\n"    totalPrice += product["price"]print("商品リスト\n" + productList)print("合計価格\n" + str(totalPrice) + "円")pythonでは、+=と書くと対象の変数の値に追加するという書き方ができます。これを実行してみると商品リストトマトにんじん合計価格270円と表示されたと思います。こんな感じで、オブジェクトを使うことでデータをひとまとめに管理し、わかりやすいコードを書くことができます!今回はpythonでのオブジェクトの使い方を解説しました!このブログは、わたしがプログラミングを学習し始めたころに悩んでいたポイントをわかりやすく記事にして、わたしと同じ悩みを持つ方が少しでも減るように!と思って運用しています!共有やお気に入り登録していただけたら励みになりますので是非よろしくお願いします!それでは次の記事もお楽しみに!

2023年04月14日

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

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入門】書いて覚えるbox-shadowの使い方

こんにちは!エンジニアのますみです!本日は要素に影をつけるbox-shadowの使い方を解説します。立体感のあるデザインや、ボタンのホバー時にもよく使われるテクニックですこの記事はbox-shadow属性でできることを一通りまとめました。さらに実際にCSSをこのページ上で書くことができるので、プレビューを見ながら使い方を覚えることができます!是非、ブックマークして学習などに役立てていただけたら幸いです!テーマ box-shadow属性でできることを一通り覚えることができる内容 実際にスタイル属性を書くことが可能な記事なので、深く理解して使いこなすことができる内容目次 box-shadowとは 基本的な使い方 影をつける最低限の設定 影をぼかす 影の大きさを指定する 影を要素の内側にするそれではさっそく見ていきましょうbox-shadowとはBOX.box { box-shadow : } box-shadowは要素に影をつけることができるCSSのプロパティです。基本的にはbox-shadowを適用した要素と同じ大きさの影が表示されます。デフォルトでは元の要素と全く同じ位置に配置されるため、影は見えません。元の要素から影の位置をどれだけずらすかを指定し、理想のレイアウトを作っていきます。基本的な使い方box-shadowは複数の数値と色を指定することができます。数値の数は最小2つから最大4つ指定でき、1つ目の数値は影の縦方向の位置2つ目の数値は影の横方向の位置3つ目の数値は影のぼかし具合4つ目の数値は影の大きさというように、順番に役割が割り振られていきます。まずは数値が2つの、最小限の設定から解説します。影をつける最小限の設定BOX.box { box-shadow : } 数値を2つ指定した場合、それぞれの働きはbox-shadow: 影の縦方向の位置 影の横方向の位置 影の色となります。位置を指定する値を0pxとすると、元の要素と同じ位置になります。縦方向の位置は数値を増やすと影の位置は下へ、数値をマイナスの値にすると影の位置は上に移動していきます。横方向の位置は数値を増やすと影の位置は右へ、数値をマイナスの値にすると影の位置は左に移動していきます。影をぼかすBOX.box { box-shadow : } 3つ目の数値を指定して、影のぼかし度合を指定することができます。数値を大きくすると影のぼかしが強くなります。それぞれの値の役割はbox-shadow: 影の縦方向の位置 影の横方向の位置影のぼかし度合影の色となります。影の大きさを指定するBOX.box { box-shadow : } 4つ目の数値は影の大きさを指定することができます。0pxで元の要素と同じ大きさです。数値を増やすと影は大きくなり、マイナスの値では影は小さくなっていきます。それぞれの値の役割はbox-shadow: 影の縦方向の位置 影の横方向の位置影のぼかし度合 影の大きさ影の色となります。影を要素の内側にするBOX.box { box-shadow : } insetを指定すると要素の内側に影をつけることができます。高度なbox-shadowの使い方BOX.box { box-shadow : } ,カンマで区切り、複数の影を作ることができます。上の例では青系の影をボックスから少しずらしたところに、グレーの影をさらにずらした部分に配置しています。指定する値は、,カンマを境に同じ役割になります。box-shadow: 影①の縦方向の位置 影①の横方向の位置影①のぼかし度合 影①の大きさ影①の色,影②の縦方向の位置 影②の横方向の位置影②のぼかし度合 影②の大きさ影②の色影を複数使ったデザインサンプル画面が突起して見えるBOX.box { box-shadow : } 背景色とボックスを同じ色にし、ボックスよりも薄い色の影を左上、ボックスよりも濃い色の影を右下に表示します。画面がくぼんで見えるBOX.box { box-shadow : } 先ほどの書き方にinsetを追加することで、ボックスがくぼんで見えます。3つ以上も影をつけられるBOX.box { box-shadow : } 影の位置をずらしながら色をだんだん薄くしていき、ボックスに残像がついているようなデザインになりました。本日はbox-shadow属性の書き方について解説しました!プログラミング学習は何度も繰り返して覚えていくことが大切です!是非ブックマークして学習に役立ててみてください!質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

2023年04月23日

Read More

ニュートラルネットワークとは?わかりやすく解説します!

こんにちは!エンジニアのますみです!本日はニュートラルネットワークとは何か、わかりやすく解説します!目次 ニューラルネットワークとは何ですか? ニューラルネットワークができることは? 画像認識 言語処理 予測 自己学習 ニューラルネットワークを使った身近なものは? 音声アシスタント 自動運転車 オンラインショッピングの推薦機能 ニューラルネットワークをプログラミングするためにはどのようなプログラミング言語やライブラリが必要? Python Scratch C++ Kerasニューラルネットワークとは?ニューラルネットワークは、簡単に言うと、機械が脳みそのような仕組みでデータを処理する方法の1つです。人間の脳は、たくさんの神経細胞が結合して情報を処理する仕組みを持っています。ニューラルネットワークも同じように、膨大な量の数値データを複雑な仕組みで処理することができます。ニューラルネットワークは、画像認識、音声認識、言語処理、ゲームAIなどに応用されています。ニューラルネットワークができることは?ニューラルネットワークは、いろいろなことができます。その例をいくつか紹介します。画像認識ニューラルネットワークを使って、画像の中に何が写っているかを自動的に認識することができます。例えば、ニューラルネットワークを使って、犬や猫などの動物を自動的に識別することができます。言語処理ニューラルネットワークを使って、文章の中に含まれる単語の意味を理解することができます。例えば、ニューラルネットワークを使って、自動翻訳や文章の自動要約を行うことができます。予測ニューラルネットワークを使って、将来のイベントや価格の変動を予測することができます。例えば、ニューラルネットワークを使って、株価の変動を予測することができます。自己学習ニューラルネットワークは自己学習ができるため、人間が手でプログラムを書かなくても、自分で問題を解決することができます。例えば、ニューラルネットワークを使って、自動運転車のように、自分で周りの状況を認識して、安全に運転することができます。これらは、ニューラルネットワークの例の一部であり、実際にはさまざまな分野で使われています。ニューラルネットワークを使った身近なものは?ニューラルネットワークを使用した身近なものには、以下のようなものがあります。音声アシスタント音声アシスタントは、スマートフォンやスマートスピーカーなどで使われることがあります。ニューラルネットワークを使って、人間の声を聞き取り、質問に答えたり、命令を受け付けたりすることができます。代表的なものとして、SiriやGoogleアシスタントがあります。自動運転車自動運転車は、ニューラルネットワークを使って、周りの状況を認識し、安全に運転することができます。車に搭載されたカメラやセンサーが周りの状況を捉え、ニューラルネットワークがその情報を解析し、車の運転を制御します。オンラインショッピングの推薦機能オンラインショッピングサイトでは、ニューラルネットワークを使って、過去の購入履歴や商品の閲覧履歴から、おすすめの商品を紹介することがあります。これによって、ユーザーが自分の好みに合った商品を見つけやすくなります。ニューラルネットワークは、身近なところにも使われている技術であり、私たちの生活に欠かせないものの一つです。ニューラルネットワークをプログラミングするには?ニューラルネットワークをプログラミングするためにはいくつかのプログラミング言語やライブラリを使うことができます。具体的には、以下のようなものがあります。Pythonニューラルネットワークのプログラミングには、Pythonがよく使われます。Pythonには、ニューラルネットワークのライブラリとして有名なTensorFlowやPyTorchといったものがあります。Scratchニューラルネットワークの概念を覚えるためには、Scratchというプログラミング言語を使うこともできます。Scratchでは、ビジュアルプログラミングという方法でニューラルネットワークの概念を学ぶことができます。C++ニューラルネットワークの処理を高速化するために、C++といった高速なプログラミング言語を使うこともできます。ただし、C++はPythonやScratchよりも難しいため、より高度な知識が必要になります。KerasKerasは、ニューラルネットワークのライブラリの一つで、Pythonで使うことができます。Kerasは、シンプルなインターフェイスを持っているため、初心者でも簡単にニューラルネットワークを作ることができます。これらの言語やライブラリを使ってニューラルネットワークをプログラミングすることができます。ただし、ニューラルネットワークは高度な技術であり、プログラムの理解や扱い方には、しっかりと学習する必要があります。最後まで読んでいただきありがとうございます!質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

2023年04月29日

Read More

【CSS入門】書いて覚える::before、::afterの使い方

こんにちは!エンジニアのますみです!本日は疑似要素::before、::afterについて解説していきます。少し難しいですが、使いこなせたらCSSレベルアップです!この記事では実際にCSSをこのページ上で書くことができるので、プレビューを見ながら使い方を覚えることができます!是非、ブックマークして学習などに役立てていただけたら幸いです!テーマ ::before、::afterの使い方をマスターできる 覚えるとどんなメリットがあるかがわかる この記事上でプレビューを見ながらCSSを書くことで、CSSの仕組みを深く理解できる目次 ::before、::afterの基礎 ::before ::after ::before、::afterは両方指定できる スタイルを指定する より自由なデザインを作る どんな時に便利か HTMLが見やすくなる 使いまわしやすいそれではさっそく見ていきましょう::before、::afterの基礎::before最小限の設定ポイント.point::before { content: } ::before要素を表示するにはcontentを指定する必要があります。::beforeはセレクタで指定した要素の中の最初にcontentで指定した内容が追加されます。div class="point" !--ここに::beforeが表示される-- ポイント/divそのため、上の例では表示される要素はこのようになりますdiv class="point" "●" ポイント/div::after最小限の設定ポイント.point::after { content: } ::after要素を表示するにはcontentを指定する必要があります。::afterはセレクタで指定した要素の中の最後にcontentで指定した内容が追加されます。div class="point" ポイント !--ここに::afterが表示される--/divそのため、上の例では表示される要素はこのようになりますdiv class="point" ポイント "●"/div::before、::afterは両方指定できるポイント.point::before { content: } .point::after { content: } 上のように、一つの要素に::before、::afterどちらも指定することが可能です。この場合表示される要素はこのようになります。div class="point"  !--ここに::beforeが表示される-- ポイント !--ここに::afterが表示される--/divdiv class="point"  "●" ポイント  "●"/divスタイルを指定するポイント.point::before { content: color: } .point::after { content: color: } 通常のHTML要素同様にスタイルを適用することが可能です。より自由なデザインをつくるポイント.point::before { content: display: width: height: background-color: vertical-align: } .point::after { content: display: width: height: background-color: vertical-align: } 上のようにcontent: として空の要素を作りwidth、heightなどを使って自由なデザインを作ることができます。注意するポイントは、疑似要素はデフォルトではdisplay: inlineとなっているためwidth、heightが無効化されてしまいます。display属性をblock、inline-block、flexなどのサイズが指定できるプロパティに変更することを忘れないでください。どんなときに便利か::before、::afterを使わなくても、HTML上に要素を書いてしまえば同じことができます。::before、::afterを使った場合ポイントHTMLdiv class="point"ポイント/divCSS.point::before { content: ""; display: inline-block; width: 1rem; height: 2px; background-color: #ffa500; vertical-align: middle;}.point::after { content: ""; display: inline-block; width: 1rem; height: 2px; background-color: #ffa500; vertical-align: middle;}::before、::afterを使わない場合ポイントHTMLdiv class="point" span/span ポイント span/span/divCSS.point span { display: inline-block; width: 1rem; height: 2px; background-color: #ffa500; vertical-align: middle;}それなのにあえて::before、::afterを使うメリットを解説します。HTMLが見やすくなるdiv class="point" span/span ポイント span/span/div例えばこのHTMLは::before、::afterを使わない場合のコードになります。HTMLだけを見ると、spanが何のためにあるのかわかりませんし、コードが読みづらくなってしまいます。::before、::afterを使うことで、HTMLの見通しがよくなり、管理、修正がやりやすくなります。使いまわしやすい::before、::afterを使わない場合は、その都度span文字spanというHTMLを書く必要があります。頻繁に使いたいスタイルだった場合、HTMLは複雑になり、書き間違いによるミスも引き起こしやすくなります。​div class="point" span/span ポイント1 span/span/divdiv class="point" span/span ポイント2 span/span/divh2見出し/h2div class="point" span/span ポイント3/div​div h3見出し/h3 div class="point" span/span ポイント4 span/span /div div class="point" span/span ポイント5 /div/divdiv class="point" span/span ポイント6 span/span/div上のHTMLには書き間違えている箇所がありますが、非常にわかりづらいです。​div class="point" span/span ポイント1 span/span/divdiv class="point" span/span ポイント2 span/span/divh2見出し/h2div class="point" span/span ポイント3 !--ミス1--/div​div h3見出し/h3 div class="point" span/span ポイント4 span/span /div div class="point" span/span ポイント5 !--ミス2-- /div/divdiv class="point" span/span ポイント6 span/span/div上の2か所が書き間違えている箇所です。::before、::afterを使うことで、pointというクラスさえ書けばスタイルが適用されるため、ミスを防ぎつつ使いまわしやすいコードを書くことができます。​div class="point" ポイント1/divdiv class="point" ポイント2/divh2見出し/h2div class="point" ポイント3/div​div h3見出し/h3 div class="point" ポイント4 /div div class="point" ポイント5 /div/divdiv class="point" ポイント6/div最後まで読んでいただきありがとうございます!プログラミング学習は何度も繰り返して覚えていくことが大切です!是非ブックマークして学習に役立ててみてください!質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

2023年04月24日

Read More

【python入門】配列を使ってみよう!

こんにちは!プログラマーのますみです!今回はpythonで配列を使う方法をご紹介します!Pythonはこちらのサイトで簡単に動かしてみることができます!paiza.io是非実際にプログラムを書いてみながら変数の使い方を覚えてみてくださいね!配列ってなに?変数とはデータを格納するための箱のようなものです!プログラムの中で変数に値を格納しておくと、変数を書くだけで値を呼び出して、計算したり表示したりすることができます!pythonで配列を使う方法配列とは、複数のデータを一つの変数で扱うことができる仕組みのことです!例えば、pythonの場合は、以下のように配列を定義することができます!prices = [1000, 1200, 2000, 500]これは4種類の商品の価格を一つの配列に定義した例ですね、この配列を使ってどんな処理ができるのかを紹介していきます!配列を使うメリット配列をうまく使うことで、複数のデータに一括で処理を行うことに強いプログラムを書くことができます!例えば、上記のpricesという配列に定義した価格をすべて表示してみましょう!配列内の値すべてに処理を実行するには、pythonのmapという機能を使っていきます。prices = [1000, 1200, 2000, 500]for price in prices:    # ここに処理を書く!ではすべての価格を表示してみましょう!prices = [1000, 1200, 2000, 500]for price in prices:    print(price)こうすると、配列に格納されている価格を順番に表示することができます!※paiza.ioでコピペで動かしてみる場合、黄色い部分を一度消してTabキーを押してから実行してみてください!prices = [1000, 1200, 2000, 500]for price in prices: print(price)これだけでは味気ないので、価格の後に円と表示してみましょう!prices = [1000, 1200, 2000, 500]for price in prices:    print(str(price) + "円")これで1000円という形式で価格を表示することができました!さらに消費税を含めた価格を表示するようにしてみましょう!prices = [1000, 1200, 2000, 500]for price in prices:    print(str(price * 1.1) + "円")こんな感じで、配列を使うことでプログラミング言語に備わっている便利な機能を使える上、変更に強い良いソースコードが書けるようになります!今回はpythonでの配列の使い方を解説しました!このブログは、わたしがプログラミングを学習し始めたころに悩んでいたポイントをわかりやすく記事にして、わたしと同じ悩みを持つ方が少しでも減るように!と思って運用しています!共有やお気に入り登録していただけたら励みになりますので是非よろしくお願いします!それでは次の記事もお楽しみに!

2023年04月14日

Read More

立体的に見える不思議なボタン【書いてわかるCSS】

こんにちは!エンジニアのますみです!本日はこんな感じの画面が出っ張って見えたりくぼんで見えたりする不思議なボタンの作り方を解説します。BUTTONBUTTONBUTTONBUTTON難しそうに見えますが意外と簡単ですよ!テーマ 不思議なボタンの作り方をマスターできる box-shadowを使って立体感を出す方法をマスターできる この記事上でプレビューを見ながらCSSを書くことで、CSSの仕組みを深く理解できる目次 とりあえずCSSをコピペしたい方はこちら 不思議なボタンを作る手順 背景色を指定 ボタンを作成 余白を指定 角を丸める 影を追加① 影を追加② くぼんで見えるボタンの作り方 丸いボタンの作り方 くぼんで見える丸いボタンもinset指定、影の色反転でOKそれではさっそく見ていきましょうとりあえずCSSをコピペしたい人はこちらBUTTONHTMLdiv class="container" div class="button"BUTTON/div/divCSS.container { display: flex; justify-content: center; padding: 3rem 0; background-color: #0072c6;}.button { color: white; padding: 0.4rem 0.8rem; border-radius: 5px; box-shadow: 4px 4px 8px #3996d9, -4px -4px 8px #004c83;}意外とシンプルなCSSですね。.containerのスタイルはこの記事上で綺麗に表示できるように左右中央寄せ、余白を指定していますので、使用したいWebサイトに合わせて調整してください。不思議なボタンを作る手順box-shadowで2種類の影を作ることでボタンの立体感を表現します。より不思議な見た目にするには余白や角丸もいい感じに調整すると良いでしょう。立体感を出すために、背景色は白以外が望ましいです。背景色を指定div class="container"/div.container { display : justify-content : padding : background-color : } 今回紹介するボタンは薄い色の影を使うため、背景色は白以外が望ましいです。.containerのスタイルはこの記事上で綺麗に表示できるように左右中央寄せ、余白を指定していますので、使用する場面によってレイアウトは変更して使ってください。ボタンを作成BUTTONdiv class="container" div class="button"BUTTON/div/div.container { display : justify-content : padding : background-color : } .button { color : background-color : } ボタンの背景色(background-color)は最終的には無しになりますが、作業しやすいので一旦仮の色を指定しておくのが良いでしょう。HTMLはここから変更がないため、次の手順から省略しますね!余白を指定BUTTON.container { display : justify-content : padding : background-color : } .button { color : padding : background-color : } ちょうどいい具合の余白をpaddingで指定しておきます。私は縦よりも横の余白が少し長いほうが好みです。角を丸めるBUTTON.container { display : justify-content : padding : background-color : } .button { color : padding : border-radius : background-color : } border-radiusを使い、ボタンの角を丸めます。影が丸くつくため、角を丸めておくとバランスがよく見えます。影を追加①BUTTON.container { display : justify-content : padding : background-color : } .button { color : padding : border-radius : box-shadow : } このあたりからボタンの背景色は削除しても良いでしょう。box-shadowを使い、背景色よりも少し薄い色をボタンの右下に表示します。box-shadowの値はbox-shadow:影の縦方向の位置影の横方向の位置影のぼかし度合影の色このように役割が割り振られます。上の例では影の縦方向の位置と影の横方向の位置に4pxを指定しているので、影は下に4px、右に4pxずれて表示されます。box-shadowの使い方はこの記事で解説しています。詳しく知りたい方は是非読んでみてください。影を追加②BUTTON.container { display : justify-content : padding : background-color : } .button { color : padding : border-radius : box-shadow : } box-shadowに2つ目の影を設定します。,(カンマ)で区切ることで複数の影を作ることができます。2つ目の影は背景色よりも少し濃い色をボタンの左上に配置します。くぼんで見えるボタンの作り方BUTTON.container { display : justify-content : padding : background-color : } .button { color : padding : border-radius : box-shadow : } くぼんで見えるボタンは、まず先ほどのCSSのbox-shadowにinsetを追加します。そして2つの色を入れ替え、一つ目の影(右下)は薄く、2つ目の影(左上)が濃くなるようにします。box-shadow:inset 4px 4px 8px #004c83, inset4px -4px 8px #3996d9;丸いボタンの作り方BUTTON.container { display : justify-content : padding : background-color : } .button { display : justify-content : align-items : color : width : height : border-radius : box-shadow : } CSSで丸を作る方法をご存じの方なら、先ほどのCSSからボタンを正円にするだけでOKです。buttonにwidth、heightを指定して正方形をまず作り、display: flex、justify:content、align-items:centerで文字を中央寄せにします。そしたらborder-radius: 50%を追加して、ボタンを丸くしたら完了です。CSSで丸を作る方法はこちらの記事で解説しています。詳しく知りたい方は是非読んでみてください。くぼんで見える丸いボタンもinset指定、影の色反転でOKBUTTON.container { display : justify-content : padding : background-color : } .button { display : justify-content : align-items : color : width : height : border-radius : box-shadow : } こちらも四角いボタン同様、box-shadowの設定を変更するだけでOKです。最後まで読んでいただきありがとうございます!プログラミング学習は何度も繰り返して覚えていくことが大切です!是非ブックマークして学習に役立ててみてください!質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

2023年04月26日

Read More

機械学習とは?簡単にわかりやすく解説!

こんにちは!エンジニアのますみです!本日は機械学習とは何かをわかりやすく解説していきます!テーマ どのサイトよりも機械学習についてわかりやすく解説 機械学習とは何かがわかる 身近なところで活躍する機械学習を使ったサービスがわかる目次 機械学習とは?簡単にわかりやすく解説! SNSがユーザーが興味のある投稿を選んで表示するときの機械学習のしくみ つまり機械学習は『関連付け』と『連想ゲーム』をベースにしている 正確に情報を表示するには大量のデータが必要 機械学習における『多数決』とは まとめ 機械学習はコンピューターがデータから共通点を見つけて関連付けをしていくこと 学んだ共通点を元に私たちの役に立つ機能が作られているそれではさっそく見ていきましょう機械学習とは?簡単にわかりやすく解説!機械学習とは、コンピュータがデータを学び、問題を解決する方法を覚えるための技術です。機械学習はすでに私たちの身近で活躍しており、例えばSNSでは ユーザーが興味のある投稿を選んで表示する 悪意のあるコメントや投稿を非表示にするといった機能がありますが、これらはコンピューターが機械学習で学んだことを活かして投稿の表示、非表示をしているのです。SNSがユーザーが興味のある投稿を選んで表示するときの機械学習のしくみ例えばあなたがSNSで『箱根』というキーワードで投稿の検索をしたとします。すると画面には箱根に関連する投稿が表示されると思います。表示された投稿には、本文に箱根という言葉が含まれているものが表示されます。ここまではまだ機械学習を使っていません。コンピューターは本文に箱根が入っている、入っていないかどうかで判定をしているだけですね。さて、表示された投稿の中には箱根という言葉が含まれていないものや、草津や下呂、道後などについての投稿も表示されることがあります。これが機械学習を使った結果になります。SNSは機械学習によって『箱根』が『温泉旅行』に関連することを知っているこれはあなたの前に『箱根』と検索した人や、『箱根』についての投稿のデータから、SNSが『箱根』が『温泉旅行』に関連するということを学習済みのため草津や下呂、道後などについての投稿も表示できるのです。もしあなたの前に『箱根』と検索した人が、その後『草津』『下呂』などのキーワードで検索したとします。するとコンピューターは『箱根、草津、下呂は関連性があるのでは?』と判断します。また『箱根』についての投稿の本文内には『温泉』や『旅行』というキーワードも含まれていることが多いと思います。するとコンピューターは『箱根、温泉、旅行は関連性があるのでは?』と判断します。それによりSNSは『箱根』というキーワードから『温泉、旅行、草津、下呂、道後』などのキーワードを連想して、検索結果を表示することができます。つまり機械学習は『関連付け』と『連想ゲーム』をベースにしているこのようにSNSではこれまでのユーザーの操作、投稿などから共通点を見つけてキーワードを関連付けして学びます。そして覚えたキーワードで連想ゲームをして表示する投稿を選ぶということをしています。正確に情報を表示するには大量のデータが必要『箱根』と検索した後に『旅行、草津』などの温泉旅行に関連するキーワードで検索をするとは限りません。急に温泉旅行と全く関係のないもの、例えば『ペット』について調べたくなったり『おしゃれなカフェ』について調べる人もいます。そんな感じで、人間の行動は必ずしも関連性がはっきりしているわけではないため、SNSの投稿を表示する機能では正確な情報を表示するための工夫がされています。簡単に言えば機械学習では『多数決』をとって正確な情報を表示する仕組みを作っています。機械学習における『多数決』とはSNSのユーザーのAさんが『箱根道後犬』という順番で検索をしたとします。Bさんは『箱根道後スポーツカー』という順番で検索をしたとします。Cさんは『温泉名物メイク』という順番、Dさんは...というように、SNSは大量のデータを元にユーザーが検索をするときの動きを学習します。そして大量のデータから傾向として多いものを多数決で選んでキーワードを関連付けすることで情報を正確にしていくことができます。このようにSNSのユーザーは知らず知らずのうちに多数決に参加して、情報を正確にすることに役立っています。もしもSNSのユーザーがAさんとBさんしかおらず、検索のデータが『箱根道後犬』と『箱根道後スポーツカー』しかなければ、道後と犬、道後とスポーツカーは関連性がある!というようになってしまうのです。そのため機械学習には大量のデータが必要不可欠と言えます。まとめ機械学習はコンピューターがデータから共通点を見つけて関連付けをしていくことざっくりですが、機械学習とはこういうことです。正確に関連付けをするには大量のデータが必要であり、かつどれくらい共通点があれば関連があると判断するのかを決めるという部分も重要になります。学んだ共通点を元に私たちの役に立つ機能が作られている私たちは知らず知らずのうちに機械学習による便利なサービスに協力しています。既に身近なところで機械学習は活かされていて、これからどんどん便利な世の中になっていくと思われます。最後まで読んでいただきありがとうございました!人工知能は既に私たちの身近で活躍しており、研究も目まぐるしい速さで進んでいるのでどんどん生活を便利にしてくれると思います。これからは人工知能を作る、人工知能をうまく扱う人が求められる時代になるでしょう。質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

2023年04月25日

Read More

Laravelのページネーションでパラメータを保持したままページ遷移する

こんにちは!エンジニアのますみです!本日はLaravelのページネーションでパラメータを保持した状態でページ遷移する方法を解説します!目次 デフォルトの状態 結論それではさっそく見ていきましょうデフォルトの状態Laravelのviewでこのように書けば自動でページネーションボタンが生成されて便利ですがdiv {{ $collection-paginate(24)-links() }}/div例えば検索機能付きのページで使おうとすると、ページネーションボタンをクリックして画面遷移するとパラメータが消えてしまいます。https://mashmy.net?keyword=AこのようにキーワードAで絞り込みをした状態で何らかのリストを表示していても、ページネーションボタンをクリックするとhttps://mashmy.net?page=2keyword=Aが消えてしまうため、2ページ目以降は絞り込みされていないリストが表示されてしまいます。結論div {{ $collection-paginate(24)-withQueryString()-links() }}/divこのようにwithQueryString()を追加することでクエリを保持した状態でページ送りができます。1ページ目https://mashmy.net?keyword=A2ページ目https://mashmy.net?page=2keyword=Aこれで解決!最後まで読んでいただきありがとうございました!質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

2023年04月24日

Read More

Zero-Shotプロンプティングとは?わかりやすく解説!

こんにちは!エンジニアのますみです!本日はZero-Shotプロンプティングについて解説していきます!Zero-ShotプロンプティングとはZero-Shotプロンプティングとは回答例などを含まないプロンプトで人工知能(AI)に回答を求めることです。わかりやすく回答例としましたが、サンプルと言ったほうが本来の意味合いに近いですプロンプトとは、人工知能(AI)に対してどんな質問や指示を出すか、どんな言葉を使って話しかけるかを決めることです。プロンプトにはAIから的確な回答を得るために、回答例を書いておくテクニックがあります。プロンプト以下の質問に答えてください。回答は1. 材料名、2. 材料名の形式で答えてください質問: 目玉焼きの材料を教えてください。回答: 1. 卵質問: 苺ジャムの材料を教えてください。AIの回答回答: 1. 苺、2. 砂糖上の例では以下の質問に答えてください。回答は1. 材料名、2. 材料名の形式で答えてください質問: 目玉焼きの材料を教えてください。回答: 1. 卵質問: 苺ジャムの材料を教えてください。この部分が回答の例になります。Zero-Shotプロンプティングでは質問: 目玉焼きの材料を教えてください。の部分が無い状態でAIに回答を求めます。Zero-Shotプロンプティングの例プロンプト次の様子を最高、普通、最低に分類してください大好物の焼肉を食べてお腹いっぱい回答最高上記の例では回答例(サンプル)が無くてもAIが適切な回答をしてくれました。AIは事前に学習された大量のデータから、大好物の焼き肉を食べてお腹いっぱいな状況は最高だ!と推測できるように学習されているということです。シンプルな質問であればこのように回答例(サンプル)をプロンプトに含まないZero-ShotプロンプティングでもAIは的確な文章を出力します。複雑な質問にはZero-Shotプロンプティングは不向き回答の形式を具体的に指定したい等、複雑な指示の場合はAIから欲しい回答を得られない可能性が高いです。その為、指示の内容によっては回答例(サンプル)を含むプロンプトを使う必要があります。回答例(サンプル)を含むものはFew-Shotプロンプティングと言う少数の回答例(サンプル)を含むプロンプトでAIに回答を求めることをFew-Shotプロンプティングと言います。プロンプト以下の質問に答えてください質問 : 目玉焼きの材料をリスト形式で教えて回答 : 1. 卵質問 : 苺ジャムの回答をリスト形式で教えて回答 :AIの回答1. 苺2. 砂糖3. レモン汁回答 : 1. 卵の部分が回答例(サンプル)になります。まとめ Zero-Shotプロンプティングとはサンプル無しのプロンプトでAIに回答を求めること シンプルな指示であればZero-Shotプロンプティングでも的確な回答を得られる 複雑な指示にはZero-Shotプロンプティングは不向き最後まで読んでいただきありがとうございます!質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

2023年04月24日

Read More

ハンバーガーメニューボタンの作り方【レスポンシブ】

こんにちは!エンジニアのますみです!本日はハンバーガーボタンと呼ばれる三本線のボタンの作り方を解説します。スマートフォンでWebサイトを見たときによく見るボタンですね!この記事では実際にCSSをこのページ上で書くことができるので、プレビューを見ながら使い方を覚えることができます!是非、ブックマークして学習などに役立てていただけたら幸いです!テーマ ハンバーガーボタンの作り方を覚えられる 応用してオリジナルのデザインが作れるになる この記事上でプレビューを見ながらCSSを書くことで、CSSの仕組みを深く理解できる目次 サンプル HTMLの解説 CSSの解説 ヘッダー ハンバーガーボタンのボックス ハンバーガーボタンの3本線 1本目、3本目の位置 総まとめそれではさっそく見ていきましょうサンプル今回はこのようなメニューバーとハンバーガーボタンを作成します。HTMLdiv class="header" div class="ham-box" div class="ham"/div /div div/div/divCSS.header { display: flex; justify-content: space-between; width: 100%; padding: 0.8rem; border: 1px solid #004373; border-radius: 5px;}.ham-box { position: relative; display: flex; justify-content: center; align-items: center; width: 24px; height: 20px; cursor: pointer;}.ham,.ham-box::before,.ham-box::after { display: flex; align-self: center; width: 100%; height: 3px; background-color: #004373;}.ham-box::before,.ham-box::after { content: ""; position: absolute;}.ham-box::before { top: 0;}.ham-box::after { bottom: 0;}上のソースコードはコピペOKです!特に報告義務はありませんが、Twitter等で使いました!とコメントしていただけたら今後の励みになります!HTMLの解説div class="header" div class="ham-box" div class="ham"/div /div div/div/div.headerがメニューバー、.ham-boxがハンバーガーボタンの入れ物になります。そして.hamが線そのものになります。.hamは一つしかありませんが、CSSで要素を増やすことができる疑似要素を使って残り2本の線を追加していきます。疑似要素については下の1本目、3本目の線の位置で解説します。空のdivは無くてもいいのですが、作っておくと後々メニューバーの右隅に何か表示したいとなった時にレイアウトが崩れる恐れが減ります。CSSの解説ヘッダー.header { display: justify-content: width: padding: border: border-radius: } 上のCSSが適用されるボックスがオレンジ色の部分です。padding、border、border-radiusはお好みで変更してみてください。それ以外のプロパティdisplay、justify-content、widthは基本的には変更する必要はありません。ハンバーガーボタンのボックス.ham-box { position: display: justify-content: align-items: width: height: cursor: } 上のCSSが適用されるボックスがオレンジ色の部分です。width、heightでハンバーガーボタンの大きさを決めています。.ham-box { display: flex; justify-content: center; align-items: center;}この3つでは、ボックス内の要素を上下左右中央揃えにしています。こうすることで、のちに3本線の位置を指定する時にコード量が少なく済みます。ハンバーガーボタンの3本線.ham, .ham-box::before, .ham-box::after { display: align-self: width: height: background-color: } 上のCSSが適用される部分がオレンジ色の部分です。セレクタを3つ指定して、3つの線にまとめてスタイルを適用しています。1本目の線は.ham-box::beforeです。疑似要素といい、HTMLを書かなくても要素を追加することができます。疑似要素の設定は下の1本目、3本目の線の位置で解説します。2本目の線は.hamです。3本目の線は.ham-box::afterになっており、これも疑似要素です。widthは親要素の.ham-boxに従うように100%に指定されています。heightで線の太さを指定できます。お好みで変えてみてください。1本目、3本目の線の位置.ham-box::before, .ham-box::after { content: position: } .ham-box::before { top: } .ham-box::after { bottom: } 上のCSSが適用される部分がオレンジ色の部分です。.ham-box::beforeが1本目、.ham-box::afterが3本目の線になります。これらは疑似要素といい、HTMLを書かなくても要素を追加することができます。疑似要素はセレクタで指定した要素の中に追加されます。この時content: ;と書いておかないと何も表示されません。.ham-box::before { content: "";}div class="ham-box"  !-- ここに::beforeが追加される -- div class="ham"/div/div::afterと指定すると、要素は最後に追加されます。.ham-box::after { content: "";}div class="ham-box" div class="ham"/div  !-- ここに::afterが追加される --/div今回の例では::before、::afterどちらも使って.ham-boxの中に合計3つの要素を表示させています。追加した2つの疑似要素にposition: absoluteを指定して::beforeを.ham-boxの一番上、::afterを.ham-boxの一番下に表示し、ハンバーガーボタンのレイアウトを作ります。div class="ham-box"  !-- ::before -- div class="ham"/div  !-- ::after --/div総まとめ下のエディターではすべてのプロパティを編集することができます。これまでの内容をふまえて、ハンバーガーボタンのサイズや色などを変更してみてください。.header { display: justify-content: width: padding: border: border-radius: } .ham-box { position: display: justify-content: align-items: width: height: cursor: } .ham, .ham-box::before, .ham-box::after { display: align-self: width: height: background-color: } .ham-box::before, .ham-box::after { content: position: } .ham-box::before { top: } .ham-box::after { bottom: } 最後まで読んでいただきありがとうございます!プログラミング学習は何度も繰り返して覚えていくことが大切です!是非ブックマークして学習に役立ててみてください!質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

2023年04月25日

Read More

【書けるからわかるCSS】:focusでインプットをおしゃれにする方法

こんにちは!エンジニアのますみです!本日は:focusを使ってinputをおしゃれにデザインする方法を解説します!:focusは要素を選択したときに適用されるスタイルを作れるもので、input以外にもtextareaなどにも使えます。使う機会が多いので是非覚えてみてください!この記事では:focusの使い方をサンプル付で解説します。さらに実際にCSSをこのページ上で書くことができるので、プレビューを見ながら使い方を覚えることができます!是非、ブックマークして学習などに役立てていただけたら幸いです!テーマ :focusの使い方を覚えて自由なデザインを作れるようになる この記事上でプレビューを見ながらCSSを書くことで、CSSの仕組みを深く理解できる目次 サンプル テキストエリアにも使える :focusを実際に書いてみよう 1.HTMLを作成 2.通常時のデザインを決める 3.:focusを使う 4.transitionを指定してアニメーションにするそれではさっそく見ていきましょうサンプル上のインプットをクリックすると青い影がふわっと現れます。:focusはその名の通り対象の要素にフォーカスしている時に適用されるスタイルです。CSS.input{ width: 100%; padding: 0.4rem 0.8rem; border: 1px solid lightgray; outline: none; border-radius: 5px; transition: 0.3s;}.input:focus{ box-shadow: 0px 0px 8px #0072c6;}テキストエリアにも使える:focusはテキストエリアにも同じように使うことができます。CSS.textarea{ width: 100%; padding: 0.4rem 0.8rem; border: 1px solid lightgray; outline: none; border-radius: 5px; transition: 0.3s;}.textarea:focus{ box-shadow: 0px 0px 8px #0072c6;}:focusを実際に書いてみよう1. HTMLを作成input class="input" type="text"今回はシンプルにinput要素のみでデザインしていきましょう。2. 通常時のデザインを決める.input { width: padding: border: border-radius: outline: box-shadow: } まずはフォーカスしていない時のデザインを作っていきましょう。インプットの横幅を目いっぱい大きくしてpaddingで余白を指定しました。さらにborder-radiusでインプットの角を丸くしています。border-radiusについてはこちらの記事で解説しています。詳しく知りたい方は是非読んでみてくださいborder: noneで枠線を消しています。これはお好みですが、inputにはデフォルトで枠線が表示されているため、その枠線を消している感じです。代わりにoutlineで枠線を表示しています。borderで指定したほうが自由なデザインを作りやすいのですが、今回はシンプルに作っていくのでいろいろと都合のいいoutlineを使います。borderについてはこちらの記事で解説しています。詳しく知りたい方は是非読んでみてくださいそして、outlineについて、outlineとborderの違いについてはこちらの記事で解説しています。詳しく知りたい方は是非読んでみてください3. :focusを使う.input { width: padding: border: border-radius: outline: box-shadow: } .input:focus { outline: box-shadow: } .input:focusといった感じでセレクタ:focusというスタイルを作ります。対象の要素にフォーカスするとセレクタ:focus内のスタイルが適用されます。上の例では枠線と影を:focus内に記述しているので、それらがフォーカス時に変化することになりますね。inputはフォーカス時に、デフォルトでoutlineが作成されるので注意今回は:focusでoutlineを上書きしているので問題ありませんが、背景色だけ変えたい等の場合は注意が必要です。inputはデフォルトで黒い枠線が表示されるようになっているので、outlineを消すCSSを書いておく必要があります。.input:focus { background-color: lightblue; outline: none;}4. transitionを指定してアニメーションにする.input { width: padding: border: border-radius: outline: box-shadow: transition: } .input:focus { outline: box-shadow: } 先ほどの状態でも充分いい感じですが、ゆっくりと変化するようにしたければtransitionを指定していきます。今回はtransition: 0.3sとしましたので、0.3秒かけて枠線と影が変化します。最後まで読んでいただきありがとうございます!プログラミング学習は何度も繰り返して覚えていくことが大切です!是非ブックマークして学習に役立ててみてください!質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

2023年04月28日

Read More

HTMLの特殊文字まとめ

こんにちは!エンジニアのますみです!本日はHTMLの特殊文字について書いていきます。よく忘れるのでメモ用に!目次 lt; : (小なり記号) gt;: (大なり記号) amp;: (アンドマーク) quot;: (二重引用符) apos;: (シングルクォーテーション) nbsp;: (空白) iexcl;: (逆感嘆符) cent;: (セント記号) pound;: (ポンド記号) yen;: (円記号) euro;: (ユーロ記号 times;: (掛け算記号) divide;: (割り算記号) plusmn;: (プラスマイナス記号) deg;: (度記号) percnt;: % (パーセント記号) raquo;: (右角かっこ) laquo;: (左角かっこ) hellip;: (省略記号) middot;: (中黒) ndash;: (ハイフン) mdash;: (エムダッシュ) copy;: (コピーライト記号) reg;: (登録商標記号) trade;: (商標記号)HTML特殊文字一覧lt;: (小なり記号)使用例p100lt;200/p実際に表示するとこうなる100200gt;: (大なり記号)使用例p200gt;100/p実際に表示するとこうなる200100amp;: (アンドマーク)使用例pATamp;T/p実際に表示するとこうなるATTquot;: (二重引用符)使用例pShe said, quot;Hello!quot;/p実際に表示するとこうなるShe said, Hello!apos;: (シングルクォーテーション)使用例pI'm happyapos;./p実際に表示するとこうなるIm happy.nbsp;: (空白)使用例pThisnbsp;isnbsp;anbsp;sentence./p実際に表示するとこうなるThisisasentence.iexcl;: (逆感嘆符)使用例piexcl;Hola!/p実際に表示するとこうなるHola!cent;: (セント記号)使用例pThe price is 10cent; per item./p実際に表示するとこうなるThe price is 10 per item.pound;: (ポンド記号)使用例pThe price is pound;10./p実際に表示するとこうなるThe price is 10.yen;: (円記号)使用例pThe price is yen;1000./p実際に表示するとこうなるThe price is 1000.euro;: (ユーロ記号)使用例pThe price is euro;10./p実際に表示するとこうなるThe price is 10.times;: (掛け算記号)使用例p2 times; 3 = 6/p実際に表示するとこうなる2 3 = 6divide;: (割り算記号)使用例p10 divide; 2 = 5/p実際に表示するとこうなる10 2 = 5plusmn;: (プラスマイナス記号)使用例pThe temperature is 20 plusmn; 2 degrees Celsius./p実際に表示するとこうなるThe temperature is 20 2 degrees Celsius.deg;: (度記号)使用例pThe angle is 45deg;./p実際に表示するとこうなるThe angle is 45.percnt;: % (パーセント記号)使用例p50percnt; discount/p実際に表示するとこうなる50% discountraquo;: (右角かっこ)使用例pNext page raquo;/p実際に表示するとこうなるNext page laquo;: (左角かっこ)使用例plaquo; Previous page/p実際に表示するとこうなる Previous pagehellip;: (省略記号)使用例pRead more hellip;/p実際に表示するとこうなるRead more middot;: (中黒)使用例pJohn middot; Doe/p実際に表示するとこうなるJohn Doendash;: (ハイフン)使用例pMonday ndash; Friday/p実際に表示するとこうなるMonday Fridaymdash;: (エムダッシュ)使用例pThe author is unknown mdash; or is it?/p実際に表示するとこうなるThe author is unknown or is it?copy;: (コピーライト記号)使用例pcopy; 2023 John Doe/p実際に表示するとこうなる 2023 John Doereg;: (登録商標記号)使用例pMicrosoftreg;/p実際に表示するとこうなるMicrosofttrade;: (商標記号)使用例pInteltrade;/p実際に表示するとこうなるIntel最後まで読んでいただきありがとうございます!質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

2023年04月29日

Read More

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

こんにちは!エンジニアのますみです!本日はCSSで半円を作る方法を解説します。たった4行のスタイルを書くだけでできちゃいます!この記事では実際にCSSをこのページ上で書くことができるので、プレビューを見ながら使い方を覚えることができます!是非、ブックマークして学習などに役立てていただけたら幸いです!テーマ CSSで半円を作る方法をマスターできる この記事上でプレビューを見ながらCSSを書くことで、CSSの仕組みを深く理解できる目次 サンプル 半円を作る手順 1. 辺の長さが2対1の長方形を作る 2. 角を丸くするborder-radiusを追加する 3. border-radiusを調整して半円を作る 覚えておきたい%(パーセント)を使った書き方 %(パーセント)を使うと楕円の半円が作れる 半円の方向を変える 下向きの半円 右向きの半円 左向きの半円それではさっそく見ていきましょうサンプル.circle { width : height : background-color : border-radius : } このような半円を作っていきます。この記事では上向き、下向き、右向き、左向きすべての書き方を解説します。半円を作る手順HTMLはこのようにしてください。div class="circle"/divクラスにcircleを設定した要素を半円にしていきます。1. 辺の長さが2対1の長方形を作る.circle { width : height : background-color : } まずはwidthとheightを調節して、辺の長さが2対1の長方形を作ります。背景色(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に4つの数値を設定します。長方形の長辺と同じ長さのサイズを、1つ目、2つ目に指定し、後の値は0を指定してください。border-radius: 長辺の長さ長辺の長さ 0 0border-radiusに指定した4つの数値はborder-radius: 左上の角の丸さ右上の角の丸さ右下の角の丸さ左下の角の丸さというように左上の角から時計回りで丸くする角が割り振られており、上の例では左上、右上の角を目いっぱい丸くしています。つまり上のエディターでborder-radius: 0 0長辺の長さ長辺の長さこのようにすると右下、左下の角が目いっぱい丸くなり、下向きの半円が作れます。エディターをborder-radius: 0 0 100px 100pxと編集してみると、下向きの半円が作れるはずです。覚えておきたい%(パーセント)を使った書き方.circle { width : height : background-color : border-radius : } 上のように書いても上向きの半円を作れます。border-radiusは/(スラッシュ)で値を区切るとさらに細かく角丸を調整できます。詳しく知りたい方はこちらの記事を読んでみてください。今回は細かくは割愛しますがborder-radius: 左上の角の丸さ右上の角の丸さ右下の角の丸さ左下の角の丸さ /左上の角の丸さ右上の角の丸さ右下の角の丸さ左下の角の丸さというように/(スラッシュ)の前後で左上の角から時計回りに丸くする角が割り振られていることは一緒です。/(スラッシュ)の前の丸くしたい角には50%、/(スラッシュ)の後の丸くしたい角には100%を指定すると、半円を作ることができます。%(パーセント)を使うと楕円の半円が作れるpx(ピクセル)を使った場合、2対1の長方形ではない時には、このようにかまぼこ型になります。.circle { width : height : background-color : border-radius : } 上の例では幅を100px、高さを75pxに指定しており、1対2の長方形ではないため半円にはなりません。.circle { width : height : background-color : border-radius : } %(パーセント)を使うとこのように楕円の半円が作れます。必要になったときに使えるように覚えておくか、この記事をブックマークしておきましょう。半円の方向を変える長方形の向き、丸くする角を調整することで様々な向きの半円を作ることができます。下向きの半円.circle { width : height : background-color : border-radius : } 2対1の横長の長方形を作りborder-radius: 0 0 長辺の長さ長辺の長さborder-radiusをこのように設定すると下向きの半円を作ることができます。右向きの半円.circle { width : height : background-color : border-radius : } 1対2の横長の長方形を作りborder-radius: 0 長辺の長さ長辺の長さ0 border-radiusをこのように設定すると右向きの半円を作ることができます。左向きの半円.circle { width : height : background-color : border-radius : } 1対2の横長の長方形を作りborder-radius:長辺の長さ0 0長辺の長さborder-radiusをこのように設定すると左向きの半円を作ることができます。最後まで読んでいただきありがとうございました!今更ですが、角丸の向きってどこを基準にするのが正解なんでしょうね...丸いほう?平らなほう?プログラミング学習は反復して覚えていくことが大切です!是非ブックマークして学習に役立ててみてください!質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

2023年04月26日

Read More

【CSS入門】書いて覚えるtransitionの使い方

こんにちは!エンジニアのますみです!本日はCSSでアニメーションを作る際に重要なtransitionについて解説していきます。マウスホバーアニメーションやインプットフォーカス時によく使われます!この記事では実際にCSSをこのページ上で書くことができるので、プレビューを見ながら使い方を覚えることができます!是非、ブックマークして学習などに役立てていただけたら幸いです!テーマ transitionの使い方をマスターできる CSSで思い通りのアニメーションが作れるようになる この記事上でプレビューを見ながらCSSを書くことで、CSSの仕組みを深く理解できる目次 transitionの基本 transitionを細かく設定する アニメーションが開始するまでを遅らせる アニメーションの速度に波をつける #stepsの使い方 アニメーションする属性を指定する さらに自由にアニメーションを作る方法 ,(カンマ)で区切ると複数のアニメーションを同時に指定できる :hoverと通常時で別々のtransitionを書くそれではさっそく見ていきましょうtransitionの基本HOVER.box { transition: padding: border: background-color: cursor: } .box:hover { transform: } 青いボックスにマウスカーソルを当ててみるとボックスが一回転します。ボックスが一回転するのにかかる時間を指定するのがtransitionです。上の例ではtransitionの値は0.3sとなっています。『s』という単位は『秒(second)』のことなので、0.3秒でボックスが一回転することになります。上のエディターのtransitionを1sにしてみてください。ボックスが回転する速度が遅くなることがわかります。transitionを細かく設定するアニメーションが開始するまでを遅らせるHOVER.box { transition: padding: border: background-color: cursor: } .box:hover { transform: } transitionに2つ目の数値を指定すると、アニメーションが始まるまでの時間を指定できます。上の例ではtransitionの値は0.3s 1sとなっています。1つ目の数値がボックスが一回転するのにかかる時間、2つ目の数値がアニメーションが始まるまでの時間になります。transition: アニメーションの長さ アニメーションが始まるまでの時間アニメーションの速度に波をつけるHOVER.box { transition: padding: border: background-color: cursor: } .box:hover { transform: } transitionはアニメーションが最初はゆっくりでだんだん速くなるといったような緩急を設定することができます。上の例では2sとease-in-outを指定しており、ease-in-outが緩急を指定する値になります。緩急を指定する値には次の種類があります。上のエディターを編集してみて変化を確認してみましょう。 ease(デフォルト):ゆっくりと始まり、中間で速くなり、最後にゆっくりと終わる linear:等速でアニメーションする ease-in:ゆっくりと始まり、最後に速くなる ease-out:速く始まり、ゆっくりと終わる ease-in-out:ゆっくりと始まり、中間で速くなり、最後にゆっくりと終わる step-start:アニメーションの最初の瞬間に即座に変化を加える step-end:アニメーションの最後の瞬間に即座に変化を加える steps(n, start/end):アニメーションをnステップに分割し、startまたはendで即座に変化を加えるstepsの使い方stepsが少しややこしいと思いますので、詳しく解説します。HOVER.box { transition: padding: border: background-color: cursor: } .box:hover { transform: } 簡単に言うとコマ送りのようなアニメーションになります。steps(12,start)の12の部分がコマ数になるので、数値を大きくすると滑らかなアニメーションになります。steps(12,start)のstartの部分は変化するタイミングを指定します。例えばこのようにtransitionを4s steps(4, start);とした場合HOVER.box { transition: padding: border: background-color: cursor: } .box:hover { transform: } 4秒で360度回転するアニメーションを4コマに分割するので、1秒ごとに90度回転します。startを指定した場合、マウスカーソルがボックスに当たった瞬間から90度回転します。その為、0秒で90度、1秒で180度回転するため、3秒目でアニメーションが完了します。endを指定した場合は、マウスカーソルが当たった瞬間ではなく1秒後からアニメーションがスタートします。steps(4,start)を指定した場合HOVER0秒90度HOVER1秒180度HOVER2秒270度HOVER3秒360度完了!HOVER4秒360度steps(4,end)を指定した場合HOVER0秒0度HOVER1秒90度HOVER2秒180度HOVER3秒270度HOVER4秒360度完了!アニメーションする属性を指定するHOVER.box { transition: padding: border: background-color: cursor: } .box:hover { transform: background-color: } 上のソースコードは、マウスカーソルが当たったらボックスが回転しつつ背景色が変わるアニメーションを指定したものです。例えば回転はアニメーションにしたいけど背景色は瞬時に変えたいといった場合は、transitionにアニメーションにしたい属性を指定することができます。.box { transition: transform 1s;}このようにtransitionにtransformを追加すると、この値はtransformに対する変化のみに適用されます。HOVER.box { transition: padding: border: background-color: cursor: } .box:hover { transform: background-color: } 回転だけアニメーションで、背景色の変化はアニメーションしないように指定できました。さらに自由にアニメーションを作る方法このようなアニメーションを作りたいとします。HOVERマウスカーソルを当てると 360度回転する(transformを使う) ボックスが大きくなる(paddingを使う)の順番でアニメーションが実行されます。このようなアニメーションを作る方法を見ていきましょう。,(カンマ)で区切ると複数のアニメーションを同時に指定できるこのように,(カンマ)で区切ると、別のアニメーションの調整を行うことができます。.box { transition: transform 0.5s, padding 0.5s 0.5s; }.box:hover { transform: rotate(360deg); padding: 0.4rem 5rem;}上の例では、,(カンマ)の前でtransform 0.5sを指定し,(カンマ)の後でpadding 0.5s 0.5sと指定しています。こうすることで transform: roate(360deg)はマウスカーソルが当たった瞬間からスタートし、0.5秒でアニメーション完了 padding: 0.4rem 5remはマウスカーソルが当たってから0.5秒後からスタートし、それから0.5秒でアニメーション完了といった設定ができます。:hover内と通常時で別々のtransitionを書く上の,(カンマ)で区切ってtransformとpaddingのアニメの開始タイミングをずらしただけではこのようになります。HOVER.box { transition: transform 0.5s, padding 0.5s 0.5s; padding: 0.4rem 0.8rem; border: 2px solid #0072c6; background-color: white; cursor: pointer;}.box:hover { transform: rotate(360deg); padding: 0.4rem 5rem;}マウスカーソルが当たった時のアニメーションはいい感じですが、マウスカーソルが外れたときのアニメーションはどうでしょう。変化を元に戻す順番もtransform(回転) padding(サイズ変更)となってしまうため、おかしなことになってしまっていますね。:hoverにtransitionを指定するとマウスカーソルが当たった時にはそちらが適用されるHOVER.box { transition: padding: border: background-color: cursor: } .box:hover { transition: transform: padding: } CSSをこのように修正すると、マウスカーソルが当たった時とマウスカーソルが外れたときのアニメーションのタイミングを変えることができます。マウスカーソルが当たった時は.box:hover内のCSSが適用されるためtransform 0.5s, padding 0.5s 0.5sで指定したように、回転サイズ変更の順番でアニメーションが実行されます。マウスカーソルが外れた時は.box内のCSSが適用されるためtransform 0.5s 0.5s, padding 0.5sで指定したように、サイズ変更回転の順番でアニメーションが実行されます。最後まで読んでいただきありがとうございます!プログラミング学習は何度も繰り返して覚えていくことが大切です!是非ブックマークして学習に役立ててみてください!質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

2023年04月24日

Read More

【php入門】関数を使ってみよう!

こんにちは!プログラマーのますみです!今回はphpで関数を使う方法をご紹介します!phpはこちらのサイトで簡単に動かしてみることができます!3v4l.org是非実際にプログラムを書いてみながら変数の使い方を覚えてみてください!関数ってなに?関数は複数の処理をまとめて実行するためのブロックです。同じ処理を何度も実行する必要がある場合や、大規模なプログラムを管理するために役立ちます!phpで関数を使う方法phpではこのように書くことで関数を定義できます!function example(){// ここに処理を書く}例の関数は、example() と書くことで処理を使いまわすことができます!function example() {echo 処理2\n;}echo 処理1\n;example();echo 処理3\n;上記の例を実行すると処理1処理2処理3と出力されたと思います!この例ではいまいち感じがつかみづらいと思うので、引数、戻り値という概念も覚えていきましょう!引数ってなに?関数は値を受け取って、その値に対して処理を行うことができます。function example($count) {echo 処理 . strval($count) . \n;}先ほどの関数をこのように書き換えて、関数を呼び出すときにexample(1)というようにかっこの中に値を書くことで、関数に値を処理してもらうことができます。function example($count) {echo 処理 . strval($count) . \n;}example(1);example(2);example(3);上記の例を実行すると処理1処理2処理3と出力されたと思います!この時に関数が受け取る値を引数(ひきすう)と言いますfunction example($count これを引数(ひきすう)という) {echo 処理 . strval($count) . \n;}戻り値ってなに?関数はreturn 値と書くことで、関数を呼び出した箇所に値を返すことができますfunction example($count){return $count + 1;}この例では受け取ったcountに1を足してreturnで値を返しています。function example($count){return $count + 1;}echo example(1) . \n;echo example(2) . \n;echo example(3) . \n;これを実行すると234と出力されたと思います!この時に関数が返す値を戻り値(もどりち)と言いますfunction example($count){return$count + 1 これが戻り値!;}関数を使うメリット関数を使うメリットは、変更があった時に変更箇所が少なく済み、人為的ミスを減らすことができる点です!使うメリットは変数と似ていますね!例えばこのようなソースコードがあったとします$price = 1000;$product =[ name = トマト, price = 150];echo $price . 円\n;echo 2000 . 円\n;echo $product[price] . 円\n;この例ではオブジェクトという書き方を使っています。オブジェクトについて知りたい方はこちらの記事をご覧ください!例のソースコードを実行すると1000円2000円150円と出力されたと思います。例えば『価格yenという書き方に変えよう』という変更点があったときに、上記のソースコードだと3か所を修正することになります。$price = 1000;$product =[ name = トマト, price = 150];echo $price . 円\n;echo 2000 . 円\n;echo $product[price] . 円\n;これがもしも数百行にわたる規模のソースコードだった時には変更点が何十か所と出てきてしまい、大変だし人為的ミスも起こりやすくなっていまいます...そこで関数を使った書き方をしておくとfunction formatPrice($price){return $price . 円;}$price = 1000;$product = [name = トマト,price = 150];echo formatPrice($price) . \n;echo formatPrice(2000) . \n;echo formatPrice($product[price]) . \n;変更点はこの一か所で済みますfunction formatPrice($price){return $price . 円;}このように書き換えることでfunction formatPrice($price){return $price . yen;}$price = 1000;$product = [name = トマト,price = 150];echo formatPrice($price) . \n;echo formatPrice(2000) . \n;echo formatPrice($product[price]) . \n;一か所の変更点ですべての出力を修正することができました!今回はphpでの関数の使い方を解説しました!このブログは、わたしがプログラミングを学習し始めたころに悩んでいたポイントをわかりやすく記事にして、わたしと同じ悩みを持つ方が少しでも減るように!と思って運用しています!共有やお気に入り登録していただけたら励みになりますので是非よろしくお願いします!それでは次の記事もお楽しみに!

2023年04月16日

Read More

【コピペOK!】料理系サイト向けののニッチなCSSボタンサンプル集

こんにちは!エンジニアのますみです!ニッチなボタンサンプルも作ってみたくなりまして、最初に食べ物に関するサイトに使えそうなボタンのサンプル集を作ってみようと思います!サンプルで使用している画像はこちらのサイトのものを使用しています!https://icooon-mono.com/紹介するソースコードはコピペで自由に使っていただいて大丈夫です!なのですがTwitterのリプライとかで一言いただけると今後の励みになります!『使いました!』って言ってもらえたらすごく嬉しいので、よろしくお願いします!1. ホバーで湯気が出るアニメーション料理のレシピを扱うサイトで使うことをイメージしてみました!湯気のアニメーションは料理以外にもいろいろ使えます!レシピを見る div class="button" spanレシピを見る/span img src="./画像path" alt="" div class="steam"/div/div.button{ position: relative; display: flex; flex-direction: column; align-items: center; background-color: #f9a11b; padding: 1rem; border-radius: 0.4rem; cursor: pointer; overflow: hidden;}.button span{ font-weight: bold; color: white; text-align: center; margin-bottom: 1rem; transition: 0.3s;}.button:hover span{ opacity: 0;}.button img{ width: 3rem;}.steam { position: absolute; width: 3rem; height: 2rem; border-radius: 70% 0 33% 40% / 30% 0 54% 55%; background: rgba(255, 255, 255, 0.627); filter: blur(0.3rem); bottom: 3rem; opacity: 0;}.button:hover .steam{ animation: steam 2s ease-out infinite;}@keyframes steam { 0% { transform: translateY(0) scale(1, 1); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-3rem) scale(1.2, 1.2); opacity: 0; }}2. 予約ボタンのサンプル来店予約フォームにリンクするボタンのイメージでデザインしました。画像を他のものに差し替えることでいろいろなサイトに使えます!ご予約はこちら div class="button" spanご予約はこちら/span img src="./画像path" alt=""/div.button{ position: relative; display: flex; align-items: center; background-color: #f9a11b; padding: 1rem; border-radius: 0.4rem; cursor: pointer; overflow: hidden;}.button span{ position: relative; color: white; font-weight: bold; margin-right: 0.4rem;}.button span::before{ content: ""; position: absolute; width: 0%; height: 0.1rem; bottom: 0; background-color: white; transition: 0.3s;}.button:hover span::before{ width: 100%;}.button img{ width: 1.2rem; height: 1.2rem; transition: 0.3s;}.button:hover img{ transform: rotate(360deg);}3. 上から料理が降ってくるボタンホバーすると上から料理の画像が降ってくるボタンのサンプルです!アニメーションによる変化が大きいので目に留まりやすくなります!ですが、ホバー時には文字が消えてしまうため、押し間違えてはまずいボタン(支払い確定)のデザインをする際は何のボタンなのか常にわかるようにデザインすることが大事です!ご予約はこちら div class="button" spanご予約はこちら/span img src="./画像path" alt=""/div.button{ position: relative; display: flex; justify-content: center; align-items: center; background-color: #f9a11b; padding: 1rem; border-radius: 0.4rem; cursor: pointer; overflow: hidden;}.button span{ position: relative; color: white; font-weight: bold; transition: 0.3s;}.button:hover span{ opacity: 0;}.button img{ position: absolute; transform: translateY(-3rem); height: 2rem; transition: 0.3s;}.button:hover img{ transition-delay: 0.3s; transform: translateY(0rem);}最後まで見ていただきありがとうございます!こんなニッチなテーマでサンプルを作ってほしい!等ありましたらTwitterのコメントなどで教えてください!それでは次の記事もお楽しみに!

2023年04月20日

Read More

ますみ

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

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

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

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

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


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

ますみ

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

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

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

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