CSS

CSS カテゴリー記事(更新日順)

【CSS】簡単なアニメーションの作り方【animation】【keyframes】
カテゴリ: CSS, ホームページ
更新日: 2022年07月14日
今まで CSS で簡単にアニメを作れるという話を書いてきた．【CSS】簡単なアニメーションの作り方【transition】【CSS】簡単なアニメーションの作り方【transform】 CSS だけを使ってもアニメーシ […]
【CSS】簡単なアニメーションの作り方【transition】
カテゴリ: CSS, ホームページ
更新日: 2022年07月14日
アニメーションについて少し書いてみた．続きは以下で．【CSS】簡単なアニメーションの作り方【transform】【CSS】簡単なアニメーションの作り方【animation】【keyframes】 CSS だけを使って […]
【CSS】FlexBoxで縦に中央揃えさせる方法
カテゴリ: CSS, HTML
更新日: 2022年07月07日
FlexBoxで縦に中央揃えさせる方法 FlexBox を使って要素を縦並びかつ、中央揃えさせる方法を紹介します。例は以下の通りです。開発者ツールから FlexBox で要素を縦に中央揃えさせていることも確認いただけま […]
【CSS】五角形の矢印を作成する
カテゴリ: CSS, HTML
更新日: 2022年06月27日
CSSで五角形の矢印を作成する方法状態の遷移を表す際などに用いられる、五角形の矢印をCSSで簡単に実装する方法をご紹介します。以下、五角形の矢印のサンプルです。 HTML <div class="ar […]
「ウェブフォント読み込み中のテキストの表示」問題の解決方法
カテゴリ: CSS
更新日: 2022年06月09日
引き続き，PageSpeed Insights の診断で表示される問題について扱う．いつの間にか「ウェブフォント読み込み中の全テキストの表示」から「ウェブフォント読み込み中のテキストの表示」に表記が変わっていたので修正 […]
LCP (Largest Contentful Paint) について
カテゴリ: CSS, HTML, ホームページ, 知識
更新日: 2022年06月09日
LCPとは(最大コンテンツの描画とは) PageSpeed Insights に出てくる Largest Contentful Paint 解説ページである Web Vitals を見てみると Largest Conte […]
【CSS】レスポンシブ(スマホ)対応横スクロールテーブル(表)
カテゴリ: CSS, HTML
更新日: 2022年04月28日
(2021/03/18 文章追加とコード微修正) レスポンシブ対応のホームページの制作で面倒なものの一つに表(table)がある．横に並んだものを縦にする CSS はよく目にするが，横長のものだと項目が多い場合に訳が分 […]
画像スライダー Swiper の使い方・設定(HTML, CSS, JavaScript)
カテゴリ: CSS, HTML
更新日: 2022年04月20日
ホームページで使われる「画像スライダー」は種類が多数あり，どれを使うか迷う．無料で商用利用可能な画像スライダー Swiper 少し調べてみた限り，Swiper というスライダーがとてもよく出来ていると思ったのでこのスラ […]
CSSで円(丸)を描き，内側にテキスト(文字)を入れる
カテゴリ: CSS, HTML
更新日: 2022年04月18日
円をかいて，中に文字を入れるとはこのような絵のこと．上左中央右下 CSS と HTML による円とテキストの記述方法中の文字の位置指定のポイント CSS は以下のようになる．円は position: rel […]
左側メガメニューの作り方(横スライドタイプ)【レスポンシブ】【CSSのみ】
カテゴリ: CSS, HTML, ホームページ
更新日: 2022年04月07日
【【レスポンシブ対応】メガメニューの簡単な作り方【CSSのみ】のページで簡単な「メガメニュー」の作成方法を記事にしたが，これは一般的な縦スライドタイプのメガメニューだった．今回，必要に迫られて横タイプも作ってみたので […]
CSSだけで外部サイトへのリンクにマーク(アイコン)をつける方法
カテゴリ: CSS
更新日: 2022年04月01日
リンクが外部に飛ぶことを示すアイコン(リンクアイコン)をつけると「押すと別サイト(外部リンク)に行くこと」が分かりやすいので親切である．なぜ，このようなリンクアイコンを設ける必要があるのかというと「クリックすると別サイ […]
【CSS】画像の上に文字を重ねる・重ねた文字を読みやすくする方法
カテゴリ: CSS, HTML
更新日: 2022年03月02日
画像の上に文字を重ねる・重ねた文字を読みやすくする方法画像の上に文字を重ねて表示させたいときがあると思います。例えば、製品画像に製品名を載せたい場合などです。この時に画像に直接文字を重ねるのではなく、文字の背景に4分の […]
チェックボックスのデザインをカスタマイズする
カテゴリ: CSS, HTML, JavaScript
更新日: 2022年01月26日
チェックの切り替えでデザインが変わるチェックボックスチェックボックスの切り替え時に、デザインを変更したい場合はないでしょうか。例えば会員登録情報の変更時に、登録済みの情報とは別の情報を選択した場合、変更したことが目に見 […]
【CSSのみ】ヘルプボタンで説明を表示する方法
カテゴリ: CSS, HTML
更新日: 2022年01月07日
JavaScriptを使用しないヘルプボタンフォームの入力項目や機能の使い方についての説明を、？マーク(ヘルプボタン)をクリックしたときに表示する方法をご紹介します。今回は HTML と CSS のみを使用しており、 […]
レスポンシブデザインとは
カテゴリ: CSS, HTML, ホームページ, 知識
更新日: 2021年12月22日
レスポンシブデザインとは何か？「今さら何をいうのか」という話であるが，たまたま，ちょっと不可解な HTML のソースを見たので今回取り上げることにした．レスポンシブデザインとは wikipedia のレスポンシブデザ […]
【CSS】テキストやリンクを目立たせるいくつかの方法
カテゴリ: CSS, HTML, ホームページ
更新日: 2021年12月21日
新しい記事を投稿した時や新商品を発売した時にその説明ページに対するリンクを目立たせたいという場合がある．そのような場合にアイコン画像を作って張るのもよいが，CSS だけで作ったほうがスッキリする．お客様に質問いただき […]
ホームページ制作＆コンサルティング
カテゴリ: CSS, システム, ホームページ, マーケティング
更新日: 2021年12月16日
見る人のことを考えたホームページになっていますか？初心者をターゲットにしていますか？どのような人たちがページを見に来ると考えていますか？「知っている人にだけ分かればいい」大きな間違いです．ちょっと考えればわかり […]
【CSS】z-index が効かない場合の注意点
カテゴリ: CSS, HTML
更新日: 2021年11月10日
z-index が効かない場合に z-index は要素の重ね合わせの順番を定義できます。以下のように使いますが、数字が大きいほど上に表示されます。 #test { z-index: 1; } スタイルシートを使って、 […]
CSSでHTMLのタグを書き換える
カテゴリ: CSS, HTML, 知識
更新日: 2021年11月04日
CSSでタグを書き換えることはできない CSSに触りなれていないと、CSSでHTMLのタグを書き換えたいと思うことがあるかもしれません。しかし、CSSではタグを書き換えることはできません。実際に＜CSS　タグ　書き換え […]
【CSS】テキスト(見出し，タイトル)に横線をつける方法
カテゴリ: CSS, HTML
更新日: 2021年11月04日
HTMLのコーディングで必要になり，ちょっと調べたので備忘録．見出しなどの文字列の両側(両端，左右)に横線(ハイフン・横棒)をつけて，中央にもっていきたい場合がある． - を使うと ------ のように切れ切れになっ […]
【CSS】タグのデザイン【WordPress】
カテゴリ: CSS, ホームページ
更新日: 2021年09月17日
タグをデザインしてみたので記事として投稿．ブログでタグはそのページの特徴を表す単語となる．詳細は【WordPress】タグとカテゴリの使い分けを参照のこと．タグ上のようなタグを CSS のみでデザインする方法． […]
【CSS】レスポンシブ対応縦スライダーテーブル(表)
カテゴリ: CSS, HTML, ホームページ
更新日: 2021年06月01日
レスポンシブ対応のホームページの制作で面倒なものの一つに表がある．以前，横に長いテーブルを左端を固定してスクロール(スライド)させるテーブルの作り方は紹介したが，今度は縦に長いテーブルで上端を固定して縦にスクロール(ス […]
上部に固定メニューがある場合にページの途中にジャンプする方法
カテゴリ: CSS, HTML
更新日: 2021年05月07日
ページジャンプの方法ページ内の特定の場所に飛ぶ方法は昔は a タグの name 属性を使っていたが，今は id で飛ぶ方法をとることが多い．つまり，以前は <a href="#jump"&g […]
table(テーブル・表)で absolute を使うとセルの枠がずれる
カテゴリ: CSS, 知識
更新日: 2021年04月26日
原因不明の表のズレ px なのに小数点表記とある案件でスライダー表(【CSS】レスポンシブ対応横スライダーテーブル(表)参照)を作成したときのことです。この表は一番左の列を position:absolute にして […]