CSS(シー・エス・エス) 【CSS】HTMLのinputで入力フォームを作る基本方法＆CSSでフォームのデザインを変える方法[1/3]
WEBページでよく見る「入力フォーム」ですが、今回はHTMLのinputでの入力フォームの作り方の基本とCSSでデザインする方法についてご紹介をしていきます。 入力フォーム要素 HTML のinput要素は、ユーザーからデータを受け取るため...
CSS(シー・エス・エス)
CSS(シー・エス・エス) 
CSS(シー・エス・エス) 【CSS】グリッドレイアウトで更に複雑なボックスを並べてみる[2/4]グリッドデザイン(display: grid)
ディスプレイグリッド（グリッドレイアウト） 前回、ディスプレイグリッド（グリッドレイアウト）を使ってCSSレイアウトを作ってみました。今回は、さらにdisplay: gridで色々と試してみたいと思います。 ※前回の謎のレイアウトですが、ど...
CSS(シー・エス・エス) 【CSS】グリッドレイアウトでサイズが違う複数のボックスを複雑に並べてみる[1/4]グリッドデザイン(display: grid)
複雑なブロックレイアウトをCSSでどうやって作るのか？と考えていたら「グリッドレイアウト」を使えばどうにかなりそう…ということで、試してみました。 ▶デモページはこちら グリッドレイアウト(display: grid)の基本 グリッドは、列...
CSS(シー・エス・エス) 【CSS】【１枚ずつ表示編】アニメーションで画像や文字を遅延表示（遅れて表示）させる方法｜CSS animation
前回、CSSのアニメーションを使って「画像や文字を遅延表示（遅れて表示）」させる方法を書きましたが、今回はさらにパワーアップして「１枚ずつ順番に」画像や要素を表示させる方法に挑戦をしてみたいと思います。 CSS animation（復習） ...
CSS(シー・エス・エス) 【CSS】アニメーションで画像や文字を遅延表示（遅れて表示）させる方法｜CSS animation
CSSで遅延アニメーションを作りたい WEBサイトを見ていると「画像や要素が遅れて表示されている！」という、かっこいいWEBサイトを見る場面も多いかと思います。 複雑なものはどうなっているのかよく分かりませんが、CSSの基本アニメーションだ...
CSS(シー・エス・エス) 【2021年版】「Font Awesome」とは？アイコンのインポートと設置方法
「Font Awesome」というものをご存知でしょうか。使えるようになっておくと、WEBデザインの場でも役に立ちますので、ぜひ知見として覚えておくとよいかと思います。 「Font Awesome」とは？ 「Font Awesome」とは、...
CSS(シー・エス・エス) 【CSS】WEBページを開いた時の「ローディング・アニメーション」を作る方法｜HTML・CSS・jQuery
ローディング・アニメーションを表示したい サイトを開いた時や画面を遷移した時に、ページが表示される時にただ待ってもらっているだけでは…という感じがしたので、画面の前に「ローディングアニメーション」を表示させたい…と思い、実際に試してみたいと...
CSS(シー・エス・エス) 【CSS】マウスオーバーした時に浮き上がる表現をする方法｜transition＆transform|hoverした時のホバーアニメーション
CSS要素のホバーアニメーション 「hoverした時にふわっとしたアニメーションをさせたくて…。」そんなことを考えながら、記事の一覧ページで、マウスオーバーした時に、フワッと浮き出るような表現を作りたい…！と思った時に使えるCSSの方法です...
CSS(シー・エス・エス) 【CSS】指定の子要素を持つ親要素をクラス選択して非表示にする方法｜hasClass(class)
またちょっと悩ましいことを試したい…という今日この頃。「指定の子要素を持つ親要素を選択して非表示にする」という方法です。 指定の子要素を持つ親要素 例えば、WordPressのカテゴリー一覧ページで「指定のcat-labelを持ったカテゴリ...
CSS(シー・エス・エス) 【CSS】:first-child|並んでいる最初のブロック要素だけのサイズを小さくしたりするCSS
並んでいるブロックの最初だけ小さくしたい 例えば、ワードプレスなどでCSSを設定してブロックを並べている時に、「最初の一番左のブロックだけを、幅を短くしたい」といった場合に使える方法です。 <div class="wrap"> <span ...
CSS(シー・エス・エス) 【CSS】position:absolute;について再度おさらい！思いのままに図形をWEBページ上に配置する
position:absolute;については、過去にも何度か書いていますが、それでもまた分からなくなってしまったので、再度おさらいの意味を込めてご紹介したいと思います。 メンティー position:absolute;が、また分からなくな...
CSS(シー・エス・エス) 【CSS】画像に黒の透過・半透明カラーを重ねる方法
WEBサイトの背景一面に画像を配置した場合などに、メニューの文字がみづらい場合に上に半透明画像を重ねたい場合に使える方法です。 疑似要素::before ::afterを使う CSS における ::before は、選択した要素の最初の子要...
CSS(シー・エス・エス) 【CSS】続・WordPressで縦書きレイアウトの文字を表示する方法｜writing-mode: vertical-rl;
前回、段落を縦書きにできた。 前回、「段落を縦書きにする」のお話で、段落を縦書きにするところまで成功しました。しかし、このままでは文章が画面の下の方に突き出てしまい、いまいち見にくい文章になってしまいます。 writing-mode: ve...
CSS(シー・エス・エス) 【CSS】WordPressで縦書きレイアウトの文字を表示する方法｜writing-mode: vertical-rl;
ワードプレスなどで色々とページを作っていると、「小説風に縦書き」で表示したい・・・！という場面も出てくるかと思います。そんな時に使える方法です。 writing-mode: vertical-rl; writing-modeテキストの行のレ...
CSS(シー・エス・エス) 【CSS】：has CSS Selectorとは？
：has CSS Selector Did You Know About the :has CSSSelector? Twitterの投稿で見つけましたが、CSSの:has( )セレクタについて。意味が分からなかったので実際に試してみました...
CSS(シー・エス・エス) 【CSS】position: absoluteとposition: relativeについてもう一度おさらい｜絶対位置・相対位置
図形をレイアウトする時に使うposition:「absolute」「relative」がまたまた分からなくなってしまったので・・・改めておさらいをしたいと思います。 HTMLとCSSでBOXを並べる <!doctype html> <htm...
CSS(シー・エス・エス) 【WordPress】画面サイズが小さくなるにつれて文字サイズを可変にするCSSの設定方法
画面はテキストをposition:absolute;で位置を指定した状態です。 テキストサイズ（font size）をpxで直接、指定しています。 この場合、画面サイズが小さくなったときも、同じフォントサイズのままになります。 こちらを「画...
CSS(シー・エス・エス) 【HTML・CSS】文字を中央揃えや右揃え・均等割り付けにする方法
HTMLやCSSで文字を中央揃えにしたいと思った時には、「text-align」というCSSプロパティを使って指定をすることで、揃えることができます。 text-alignを指定する 下記のような感じでプロパティにテキストアラインを指定しま...
CSS(シー・エス・エス) 【CSS】CSSを使って三角形を作る方法｜borderプロパティ｜transparent
CSSで三角形を作る border:属性を使うことで、三角形を作成できます。 土台を作る borderプロパティを使って三角形の土台を作ってみます。このようにすると、上編に青色のボーダーが入った四角形が作られます。※見やすいように背景に黄色...
CSS(シー・エス・エス) 【CSS】 Flexbox(フレックスボックス)とは何？を解説！基本編PART1
CSSを使っていると、必ずと言っていいほど出てくる「Flexbox（フレックスボックス）」とは何か？について説明していきたいと思います。 フレックスボックスの基本概念 フレックスボックスを使うと、例えば下記のようなレイアウトを簡単に作ること...
CSS(シー・エス・エス) 【CSS】unsplash.com｜CSSのサンプルを作る時のサンプル用画像に便利なストックフォトサイト【商用利用フリー画像】
無料で商用利用可なフリー画像や写真素材を探しているのであれば「unsplash.com」さんもオススメのひとつです。 unsplash.comとは？ Unsplashライセンスに基づくストックフォトの共有に特化したWebサイト。207,00...
CSS(シー・エス・エス) 【CSSプロパティ】background｜背景に関する指定を行う
background：バックグラウンド : 背景の指定をするプロパティ background 背景に関する指定をまとめて行います。 background バックグラウンド : -color -image -repeat -position ...
CSS(シー・エス・エス) 【CSS】cssのvwとは？ vh, vmin, vmax,%の違いについて
width cssで画像の横幅を指定しない場合は画像サイズがそのまま設定されるので、ウィンドウサイズが大きくても小さくても画像のサイズはそのままです。 ウィンドウを小さくすると、画像が隠れて見えなくなります。 width:100% 画面の横...
CSS(シー・エス・エス) 【CSS】右に何も無いのになぜかスマホで右にスクロールできてしまう？右側にできた謎の余白を消す方法
横幅は収まっているはずが・・・？ cssを見ていても、横幅は画面に収まっているはずなのに、なぜか横にスクロールが出来てしまう。 こんな時の、ひとまずの対処法です。 DeveloperToolsでCSSのプロパティ＆値を片っ端から消す おそら...
CSS(シー・エス・エス) 【CSS】スマホで表示した時に画面が横にスクロールする状態を解決する方法
WordPressなどでウェブサイトを作成した時に、スマホで表示させた時に横にスクロールしてしまう場合の解決法です。 width : 100% からのはみ出し? 例えばですが、単純に、width : 100%の場合に要素に左右にmargin...
CSS(シー・エス・エス) 【CSS】ドロワーメニューが途中で切れてしまい下まで表示できない場合の対処法
CSSを扱っていて、PCの時は問題ないのですが、スマホでドロワーメニューを表示した時に、メニューが途中で切れてしまい、下まで表示がされない症状が発生しました。 解決したので、その方法です。 余白の高さを調整する height：100%だとま...
CSS(シー・エス・エス) 【CSS入門】パララックスサイトを作ってみる！｜準備編
パララックスとは？ パララックスとは『視差効果（しさこうか）｜(Parallax Effect)』のこと。スクロールした時に画面の動き方をずらすことで、奥行きのあるページ仕上げることができるデザインの手法です。 welikesmall.co...
CSS(シー・エス・エス) 【CSS入門】WEBサイトのスマホ画面シミュレーションができる便利サイト｜responsinator.com
WEBサイトをスマートフォンで見た時にどんな感じになるのか？という画面のイメージをサクッと見てみたいときに便利なサイトです。 Enter your site サイト左上の「Enter your site」にスマートフォンで見てみたいサイトの...
CSS(シー・エス・エス) 【CSS入門】tableをスマートフォンの幅に合わせる方法
tableをスマホサイズに テーブルの横幅が大きすぎて画面に収まりきれない…。コンテンツ横幅を超えているため右側が表示できない。 width:100% width:100% table-layout: fixed table-layout:...
CSS(シー・エス・エス) 【CSS入門】img(ボックス)に影をつける方法｜《box-shadow》プロパティ
画像に影 画像に何か枠が付く…でもimg borderは設定されていない…？ 枠線が消えない…と思っていたら、box-shadow:プロパティが設定されていたようでした。 box-shadow .content img.alignnone ...
