CSSのプロパティと値である『display: grid;』を知っていますか。
今回はそんなCSSのプロパティと値である『display: grid;』を使って、サイトに頻出する表を作っていきたいと思います。
『display: grid;』をまだ知らない方もこの記事を読んで、『display: grid;』を使いこなしていきましょう。
続きを読むCSS
【頻出デザイン】テキストと写真を交互にレイアウトするには『flex-direction: row-reverse;』
LPなどでテキストと写真が交互にレイアウトされているデザインを見たことはありませんか。今回はそのままコピペするだけで、テキストと写真を交互にレイアウトしたデザインを反映させることのできるコードを詳しく解説していきます。
結論：テキストと写真を交互にするためには『flex-direction: row-reverse;』と疑似クラス『nth-child(odd)』
続きを読むCSSとは？CSSの使い方、書き方を初心者でも分かりやすく簡単解説！
プログラミングの勉強でHTMLなどに続き、学ぶ言語の一つである『CSS』はサイトを制作する際に必ず理解していなくてはいけない言語です。
ここではCSSとは何なのかということから、その使い方、書き方までを初心者の方にも分かりやすく解説していきます。
続きを読む【CSSで使う単位の全て】px・%・em・remを徹底解説！
デザインを指定するための言語であるCSSには様々な単位が存在します。しかし、多岐にわたる単位があることによって、それぞれがどのような意味の単位か分からないことがあるのではないでしょうか。今回はCSSで使用される主な単位である、px・%・em・remを詳しく解説していきます。
続きを読む【デザインが進化】CSS プロパティopacityとは？使い方を簡単解説
CSSのプロパティの一つである『opacity』を知っていますか。『opacity』はデザインをグレードアップさせるために重宝するプロパティの一つです。この記事で『opacity』を理解し、使うことで更なるWebサイトのデザイン性を高めていきましょう。
結論：『opacity』は要素の透明度を変化させるプロパティである
続きを読む【テンプレあり】レスポンシブデザインとは？コードの書き方、ブレイクポイントまで徹底解説
Webサイトを制作する上で避けては通れない重要なポイントの一つであるレスポンシブデザインとは何か正確に理解しているでしょうか。
今回はそんなレスポンシブデザインについて、その意味やレスポンシブデザインをWebサイトに反映させる作り方、コードの書き方まで、徹底に解説していきます。
続きを読む【コピペあり】CSSで蛍光ペン風の下線を引く方法を簡単解説！
文章の一部を強調したい時、手書きのノートなどに蛍光ペンを使うことはありませんか。ブログなどでも強調したい文言を他のものとは違うをフォントサイズやカラーによって強調させることがあると思います。そんな文章を強調させるテクニックの中から今回はCSSを使ってWebページ内に蛍光ペンで下線を引き、文章の一部を強調させる方法を解説していきます。
結論：CSSで『linear-gradient』と『transparent』を組み合わせて指定する
続きを読む【HTML初心者向け】spanタグの意味、使い方を簡単解説！
コードの要所に登場することの多い、spanタグですが、その意味や使い方について正確に把握しているでしょうか。
spanタグについて、曖昧にしか分からない人や全く分からない人に向けて、今回はspanタグの持つ意味、詳しい使い方を丁寧に解説していきます。
結論：spanタグは一部のデザインを変更するために存在する
続きを読む【コピペあり】CSSで背景をグラデーションにする方法を簡単解説
背景がグラデーションのオシャレなサイトを見たことはありませんか。単色の背景を組み合わせるだけではデザインに幅が生まれず、淡白なサイトしか制作できなくなってしまいます。今回はそんなグラデーションをCSSで再現するための方法を簡単に解説していきます。
続きを読む【HTML基礎】class属性、id属性の違いとは？それぞれの使い方を徹底解説
HTMLで必須の知識である、class属性、id属性。この二つはほとんど同じような使い方をするが故に、どう使い分ければいいのか悩んだことはありませんか。
今回はそれぞれの違いや特徴を説明すると共にそれぞれの使い所についても詳しく解説していきます。
続きを読む