マンガでわかるホームページ作成
マンガでわかるホームページ作成
【html入門】マンガでわかるホームページ作成について
2020年05月23日 マンガでわかるホームページ作成
「マンガでわかるホームページ作成」ではいわゆるhtml入門でありWebサイト（ホームページ）の作り方をまったく作ったことのない人にもわかりやすいようにマンガで説明します。
この記事を読む
Edgeにてサイトが中国語になる･変な文章になっているときの対処法
2021年02月27日 ホームページ作成ハウツー
Edgeを利用していると漢字があるページを中国サイトと捉え、日本語に自動翻訳することがあります。 「あれ!?文章がおかしくなってる!?」というときはだいたいこれです。 Edgeにてサイトが中国語として認識されている･変な変換がされているときの対処法を説明します。
この記事を読む
CSS borderの重なりを消す方法
2021年01月29日 CSSテクニック
borderを指定してブロック要素やtdが連続すると重なった部分だけ線が太くなっちゃう！同じ線幅にしてすっきりさせたい！ そんなborderの重なりを消す方法を紹介します。
この記事を読む
CSS borderで一部の線を消す方法
2021年01月27日 CSSテクニック
borderを指定すると上下左右すべてに線を引いてしまう。そのうち一部の線を消すにはどうしたらいいの!? そんな疑問にお答えすべく、CSS borderで一部を消す方法を解説します。
この記事を読む
CSS borderで上下だけに線を引く方法
2021年01月26日 CSSテクニック
borderを指定すると上下左右すべてに線を引いてしまう。上下だけに線を引くにはどうしたらいいの!? そんな疑問にお答えすべく、borderで上下だけに線を引く方法を解説します。
この記事を読む
inputのnameをcssセレクタとして指定する方法
2021年01月25日 CSSテクニック
inputではnameの指定がつきものです。そしてそのnameは多くの場合個別の値が指定されます。ならわざわざclassをつけなくてもこのnameをセレクタとして指定できないだろうか。ということでinputのnameをcssセレクタとして指定する方法を紹介します。
この記事を読む
マンガでわかるホームページ連載終了のお知らせ（あとがき）
2021年01月25日 マンガでわかるホームページ作成
当初の予定内容を一通り描き終えましたのでここで連載終了となります。
この記事を読む
Googleアドセンス振り込みの準備【PINコード・振込口座設定】
2021年01月25日 マンガでわかるホームページ作成
Googleアドセンスでの振り込みと審査に通ってから収益を得るまでに設定することについて解説します
この記事を読む
Googleアドセンス広告の貼り方
2021年01月25日 マンガでわかるホームページ作成
Googleアドセンスの審査を通過したらいよいよ広告を貼りましょう。 Googleアドセンス広告の貼り方を説明します。
この記事を読む
Googleアドセンスはいくら稼げるの？【当サイトのデータを公開】
2021年01月25日 マンガでわかるホームページ作成
「Googleアドセンスで収益化するとどのくらい稼げるもんなの？」 そんなあなたの疑問にお答えしたいと思います。 Googleアドセンスの収益化について、いろいろ実験的にやってみて見えてきたことなどを当サイトのデータを公開しつつ、ご紹介したいと思います。
この記事を読む
Googleアドセンスの始め方【審査突破のために】
2021年01月25日 マンガでわかるホームページ作成
ブログでお金を稼ぐと言えばまずは「Googleアドセンス」です。 当ブログのメイン収入源でもあります。 そんなGoogleアドセンスの始め方と審査突破について解説します。 Googleアドセンスの始め方 ざっくりの流れは […]
この記事を読む
ブログで稼ぐ方法【アドセンスとアフィリエイト】
2021年01月19日 マンガでわかるホームページ作成
「ブログで稼げるって聞いたけど何で稼ぐの？」 昨今、副業ブームであったり、コロナ禍で、ネットを通じて仕事にすることへ興味を持つ方も多いかと思います。 私が実践している、実践しようとしているものを含めて、ブログで稼ぐ方法を紹介します。
この記事を読む
CSS text-alignが効かない原因と対処法【中央寄せにならない】
2020年12月20日 CSSテクニック
text-alignは要素の位置を左寄せ・中央寄せ・右寄せにするCSSです。 しかし効かせるには条件があります。その条件を知らずに使うと「なんで中央寄せにならないの!?」となり、うまくいきません。 CSS text-alignが効かない原因と対処法について具体例を挙げながら解説します。
この記事を読む
CSS vertical-alignが効かない原因と代替案
2020年12月17日 CSSテクニック
「vertical-align:middleを指定したのに上下中央寄せにならない！」というときの原因と解決方法を説明します。 上下中央寄せする方法は複数あるので「vertical-align:middle」以外の上下中央寄せ方法についても解説します。
この記事を読む
aタグの中にdivは可能【注意点も説明】
2020年12月14日 CSSテクニック
「クリック範囲を大きくするためにaタグの中にdivを入れたいんだけどインライン要素であるaタグの中にブロック要素であるdivって入れちゃダメなんだっけ？」 この記事ではaタグの中にdivを入れてもいいのか、について解説します。
この記事を読む
CSSで0に関する省略【簡潔なコードに】
2020年12月08日 CSSテクニック
「CSSのコードを見るとたまに「0」が省略されてるんだけど、省略してもいいの？どうして省略できるの？」 CSSで0に関する省略について解説します。
この記事を読む
初心者がブログやるのに月1000円は高い【250円でいい】
2020年12月07日 CSSテクニック
初心者がブログやるのに月1000円は高い理由を3つ挙げます。 具体的な安いサーバーも紹介します。
この記事を読む
CSS input disabledの文字色や背景色を指定する方法
2020年11月29日 CSSテクニック
inputタグでdisabledを指定すると入力したりクリックしたり選択することができない状態にできます。しかし、「できない」状態であることが、文字色や背景色を変えて目視でわかるようにしたいですよね。input disabledの文字色やplaceholder、背景色（background-color）をCSSで指定する方法について解説します。
この記事を読む
CSSでinputのサイズを変更する方法
2020年11月29日 CSSテクニック
inputタグは主にフォームで使われるタグで、お問い合わせフォームなどで文字を入力したり、ボタンとして使われるものです。htmlのままでも使えますがCSSで装飾するとよりキレイで使いやすくなります。この記事ではCSSの基本中の基本、サイズ変更について解説します。
この記事を読む
CSS display:blockが効かないとき確認すべき点
2020年11月23日 CSSテクニック
display:blockを利用するとaタグやspanタグimgタグなどのインライン要素をブロック要素にすることができます。 しかし、設定したはずのdisplay:blockが効かない!?なぜ!? そんなCSS display:blockが効かないとき確認すべき点を解説します。
この記事を読む
CSS display:blockを解除する方法
2020年11月23日 CSSテクニック
display:blockは要素をブロック要素に強制的に変更できるCSSです。 しかし、また元に戻したいときがあるかと思います。 そんなCSS display:blockを解除する方法を解説します。
この記事を読む
CSS display:blockを中央寄せする方法
2020年11月23日 CSSテクニック
中央寄せと言えばtext-align:centerなのにdisplay:blockを指定したら中央寄せにならないぞ？どうやるんだ？ そんなCSS display:blockを中央寄せする方法について解説します。
この記事を読む
CSS display:noneでアニメーションする方法
2020年11月23日 CSSテクニック
非表示から表示へ変わるとき、急にではなくアニメーションさせたい。 display:noneからdisplay:blockでアニメーションを設定したのに急に変わって、アニメーションしない!?なぜ!?どうすればいいの!? そんなCSS display:noneでアニメーションする方法を解説します。
この記事を読む
CSS border-radiusが効かない原因と対応方法
2020年11月20日 CSSテクニック
border-radiusは要素を角丸にするCSSプロパティです。しかしある条件によりborder-radiusが効かない、角丸にならない場合があります。そんなCSS border-radiusが効かない原因と対応方法について解説します。
この記事を読む
CSSのコメントアウトが効かないとき確認すること
2020年11月18日 CSSテクニック
CSSのメモ代わりに使ったり、一時的にCSSを効かなくさせたいときにコメントアウトをすることがあります。 しかし、コメントアウトのやり方を間違えるとコメントアウトが効かなくなります。 CSSのコメントアウトが効かないとき確認することを解説します。
この記事を読む
CSS opacityが効かない条件と回避方法
2020年11月18日 CSSテクニック
opacityは要素を透明、半透明にするCSSプロパティです。 しかし、ある条件によりopacityが効かなくなることがあります。 CSS opacityが効かない条件と回避方法を解説します。
この記事を読む
CSS background-colorが効かない原因と対応方法
2020年11月17日 CSSテクニック
background-colorは背景色を指定するCSSプロパティです。 background-colorで背景色を指定したのに色が表示されない!? そんなCSS background-colorが効かない原因と対応方法を解説します。
この記事を読む
CSS display:noneが効かないとき確認すべき点
2020年11月17日 CSSテクニック
スマホ表示にしたとき、パソコン表示にしたときdisplay:noneで特定のhtml要素を消したいときよくありますよね。 しかし、設定したはずのdisplay:noneが効かない!?なぜ!? そんなCSS display:noneが効かないとき確認すべき点を解説します。
この記事を読む
overflow:hiddenやscrollが効かない原因と対応方法
2020年11月14日 CSSテクニック
overflowを使うと要素を隠したりスクロールさせることができます。 しかし、ある条件によりoverflowが効かない、うまくいかないことがあります。 CSSのoverflow:hiddenやscrollが効かない原因と対応方法について解説します。
この記事を読む
環境によりCSSが効かないケースと対応方法
2020年11月14日 CSSテクニック
CSSがとある環境ではちゃんと効いているのに別の環境では効いていない。なぜ？ ホームページ制作をしているとお客さんから「ホームページが更新されていない」「表示がおかしい（CSSが効いていない）」と言われることがあります。 環境によりCSSが効かないケースと対処法について解説します。
この記事を読む
CSSのpaddingが効かない原因と解決方法
2020年11月14日 CSSテクニック
paddingを指定したのに余白が思った通りにできていない！というアナタへCSSのpaddingが効かない原因と解決方法を解説します。
この記事を読む
記事を書いた後の順位確認と改善方法【当サイトのデータ公開】
2020年11月10日 マンガでわかるホームページ作成
記事を書いた後ほったらかしでいいのだろうか？ちょくちょく記事の改善をしたほうがいいの？ そんな疑問にお答えすべく記事を書いた後の順位確認と改善方法について解説します。
この記事を読む
SEOを意識した記事のキーワード選定方法【1万のキーワードが見つかる】
2020年11月10日 マンガでわかるホームページ作成
テーマは決めたけどどんな記事を作ればいいんだろう？ キーワードはどうやって見つければいいの？ アクセスを増やせる記事を書きたい！ そんな疑問に答えるべく、SEOを意識した記事のキーワード選定方法を説明します。
この記事を読む
ブログテーマの決め方【結論：得意分野・好きな分野】
2020年11月10日 マンガでわかるホームページ作成
アフィリエイトブログに挑戦してみたいけど、そもそもどんなテーマのブログを作ればいいんだろう？ そんな疑問に答えるべく、ブログテーマの決め方を説明します。
この記事を読む
SEOの基礎【アクセスを増やすために】
2020年11月10日 マンガでわかるホームページ作成
アクセスを増やす方法を調べると必ずと言っていいほど「SEO」という言葉に出くわします。 このSEOについて、基礎的な知識と具体的な方法を解説します。
この記事を読む
ネットで売上を上げるための方程式
2020年11月10日 マンガでわかるホームページ作成
ネットで売上を上げるための方程式は次の通り。売上＝「商品の料金」×「集客数」×「コンバージョン率」。これらについて詳しく解説します。
この記事を読む
html divを横並びにする方法【手順を丁寧に解説します】
2020年10月22日 CSSテクニック
ホームページを作るとき往々にしてサイドメニューを置き、divを横並べにします。 divを横並びにして、かつ崩さずピッタリにする方法を説明します。
この記事を読む
WordPress･htmlで画像を横並びにして下に文字を置く方法
2020年10月21日 ホームページ作成ハウツー
ホームページに画像を載せるとき横に空白ができるのがもったいないから画像を横並べにしたいですよね。そのうえで画像の下に文字も書きたい。しかも中央寄せにしたい。 ということでWordPress･htmlで画像を横並びにして下に文字を置く方法を説明します。
この記事を読む
CSSを使わないでhtmlだけで横並びにする方法【WordPressでできる】
2020年10月20日 ホームページ作成ハウツー
横並びの方法を調べるとやれfloatだ、やれdisplay:flexだ、やれdisplay:inline-blockだ、とCSSでの方法をオススメされます。CSSなんか知らん！htmlだけでなんとかならんのか！こちとらWordPressだぞ！そんなあなたのためにCSSを使わないでhtmlだけで横並びにする方法を説明します。
この記事を読む
CSS セレクタでtable･tdを指定するときの注意
2020年10月19日 CSSテクニック
tableやtdをCSSセレクタで指定してるのにちゃんと効いていない？というときの注意点について解説します。
この記事を読む
CSS positionが効かない原因と解決方法
2020年10月19日 CSSテクニック
positionは自由に場所を指定でき、非常に便利なCSSです。しかし、ルールが多く思った通りになかなかいかないこともよくあります。CSS positionが効かない原因と解決方法を説明します。
この記事を読む
CSS positionを解除する方法
2020年10月18日 CSSテクニック
CSSのposition:absoluteは便利なもので細かい位置移動や上から覆いかぶせたり、上部固定などができます。でも、スマホ版になったとき解除したいんだよなぁ、と思うことでしょう。CSS positionを解除する方法について説明します。
この記事を読む
CSS borderが効かない・表示されない原因と対応方法
2020年10月18日 CSSテクニック
あれ？borderを指定したのに線が何も表示されてないぞ？border効いてないのか？と思ってきた方へ、borderが効かない・表示されない原因と対応方法について説明します。
この記事を読む
CSSセレクタにおけるスペースありなしの違い
2020年10月18日 CSSテクニック
CSSのセレクタにおいてスペースは重要な意味を持ちます。 CSSセレクタにおけるスペースありなしの違いについて説明します。
この記事を読む
CSSのセレクタで特定のURLを指定する方法【前方一致・後方一致】
2020年10月18日 CSSテクニック
CSSのセレクタで特定のURLを持つ要素に指定するには属性セレクタを使いましょう。 URLに対して、完全一致、前方一致、部分一致、後方一致を指定できます。
この記事を読む
アフィリエイトって稼げるの？やり方は？
2020年10月17日 ホームページ作成ハウツー
「ブログで稼げるらしいことを聞いたのだけど、具体的にはどうやるの？」「ASPとかアフィリエイトって何？」という疑問にお答えします。 アフィリエイトについて、稼げるのか、どうやるのかを解説していきます。
この記事を読む
SEO順位によるクリック率の違い【1位を目指すべき理由】
2020年10月12日 ホームページ作成ハウツー
SEOで上位に表示された方がクリック率高そうなのはイメージつくけど実際何％くらいなんだろう？と気になるあなたのために、計測しました。 当サイトで計測しているGoogleサーチコンソールの記録をもとにSEO順位別クリック率の発表です。
この記事を読む
月100円代のレンタルサーバーを徹底解説!!【このサイトで利用中】
2020年10月05日 ホームページ作成ハウツー
当サイトにてひと月あたり167円で利用しているレンタルサーバーについて徹底解説します。前半ではサーバーの特徴を説明し、後半ではサーバーの具体的な立ち上げ方法を説明します。
この記事を読む
Googleサーチコンソールの使い方・見方
2020年09月22日 マンガでわかるホームページ作成
GoogleサーチコンソールはSEO・アクセス数を増やすために必須のツールです。 Googleサーチコンソールの使い方・見方を紹介します。
この記事を読む
Googleサーチコンソールのインデックス登録手順
2020年09月22日 マンガでわかるホームページ作成
インデックス登録とはGoogleにサイトや記事のURLを伝え、存在していることを知らせる行為です。 これをしないといつまで経ってもあなたのサイトはGoogle検索に表示されません。よってアクセスは0のままです。 Googleサーチコンソールのインデックス登録手順を説明します。
この記事を読む
Googleサーチコンソールの導入手順・設定方法
2020年09月21日 マンガでわかるホームページ作成
Googleサーチコンソールはアクセスされた検索キーワードを知ることができる唯一の手段です。アクセス数を増やすためには必須のツールです。 この記事ではGoogleサーチコンソールの導入手順・設定方法を解説します。
この記事を読む
Googleアナリティクスの使い方・見方
2020年09月21日 マンガでわかるホームページ作成
Googleアナリティクスは非常に便利で多機能です。一方で多機能すぎて何ができるのか一見わかりません。 Googleアナリティクスの機能のうちよく使うものを抜粋し、Googleアナリティクスの使い方・見方を紹介します。
この記事を読む
Googleアナリティクスの導入手順・設定方法
2020年09月20日 マンガでわかるホームページ作成
アクセス解析のためにGoogleアナリティクスを導入したいという方へGoogleアナリティクスの導入手順・設定方法を説明します。
この記事を読む
アクセス解析･Googleアナリティクスとは【アクセス数を増やすために】
2020年09月20日 マンガでわかるホームページ作成
アクセス解析とは、サイトにどのような人がいつどこにどうやって訪れたのか調査することです。 この記事ではアクセス解析の概要・目的、ツールの活用方法を解説します。
この記事を読む
Googleアカウントをスマホから作成する方法
2020年09月20日 ホームページ作成ハウツー
パソコンからは複数のGoogleアカウントを作ることができません。 スマホからなら複数のGoogleアカウントを作ることができます。 Googleアカウントをスマホから作成する方法を紹介します。
この記事を読む
WordPressテーマ自作方法
2020年08月30日 マンガでわかるホームページ作成
テーマとはWordPressにおけるサイトデザインテンプレートのことです。 サイトの目的によっては既存のテーマ・デザインではなくオリジナルのデザインを適用させたい場合があります。 オリジナルのテーマの自作方法を説明します。
この記事を読む
WordPressのプラグインとは
2020年08月30日 マンガでわかるホームページ作成
プラグインとはWordPressにおける「追加機能」のことです。 プラグインは非常に多くありますが、サイトによって要不要があるため必要なものだけ追加するという使い方になります。
この記事を読む
WordPress 記事作成方法
2020年08月29日 マンガでわかるホームページ作成
WordPressは記事をたくさん更新できる・更新しやすいことが特徴の一つです。基本的にはWordで文章が作るような感覚でカンタンに更新できます。とはいえ、機能が豊富です。すべてを覚える必要はありません。よく使う機能について説明します。
この記事を読む
WordPressの使い方【メニューの説明】
2020年08月29日 マンガでわかるホームページ作成
WordPressをインストールし、ログインできたものの何をどうすればいいのかわからない!? そんなかたのためにWordPressの使い方を説明します。主に各メニューの説明です。
この記事を読む
WordPressインストール手順【つまづきやすいポイントも解説】
2020年08月29日 マンガでわかるホームページ作成
WordPressを使うにはWordPressをサーバーにインストールしなくてはなりません。 WordPressのインストールの手順をつまづきやすいポイントとともに説明します。
この記事を読む
WordPress（ワードプレス）とは
2020年08月10日 マンガでわかるホームページ作成
WordPressとはインターネット環境とブラウザだけで簡単にホームページを更新できるシステムです。
この記事を読む
FFFTPでアップロードする手順
2020年07月26日 マンガでわかるホームページ作成
サーバーの用意ができたらファイルをアップロードできるようになります。公開時だけではなく、修正・更新のときにもアップロード・ダウンロードしますので手順をしっかり覚えていきましょう。
この記事を読む
ドメインとサーバーの紐付け手順
2020年07月26日 マンガでわかるホームページ作成
サーバーには「このドメイン使います」、ドメインには「このサーバーで使います」と知らせ、結び付ける必要があります。ここを超えるとドメインとサーバーが使え、サイトを公開できる状態になります。手順を丁寧に説明していきます。
この記事を読む
ドメインの自動更新設定方法
2020年07月26日 マンガでわかるホームページ作成
せっかく取得したドメインも1年後更新しないと使えなくなり、同時にサイトも見れなくなります。ドメインを自動更新されるようにして毎年滞りなく使えるようにしておきましょう。
この記事を読む
ドメインの具体的な取得方法【3ステップ】
2020年07月26日 マンガでわかるホームページ作成
ホームページを開設するにはドメインが必須です。ドメインの具体的な取得方法を3ステップで説明します。
この記事を読む
ドメインの決め方と料金【1円】
2020年07月25日 マンガでわかるホームページ作成
サイトを開設するにはサーバーの他にドメインが必要です。ドメインとは何か、ドメインの決め方・料金について説明します。
この記事を読む
激安レンタルサーバーの取得方法【167円/月】
2020年07月25日 マンガでわかるホームページ作成
1ヶ月あたり167円という激安料金で利用可能なレンタルサーバー「バリューサーバー」の取得方法を具体的に説明します。
この記事を読む
レンタルサーバーの料金と選び方
2020年07月24日 マンガでわかるホームページ作成
これからホームページやブログを始めようとしているあなた！レンタルサーバを料金や有名かどうかだけで選ぼうとしていませんか!?あなたに必要なスペックの中で最安値を狙うのが一番お得な方法です。あなたにピッタリのレンタルサーバの選び方を解説します。
この記事を読む
レンタルサーバーとは何か、なぜ必要か
2020年07月24日 マンガでわかるホームページ作成
ホームページ開設に必要なものの一つに「レンタルサーバー」があります。このレンタルサーバーとは何か、なぜ必要なのかを説明します。
この記事を読む
スマホ対応・レスポンシブデザインのコツ
2020年07月17日 マンガでわかるホームページ作成
「スマホ対応・レスポンシブデザインが必要なのわかったけど、実際問題具体的にどうやればいいの？」というあなたへ、スマホ対応・レスポンシブデザインサイトを作る具体的な方法とコツを説明します。
この記事を読む
メディアクエリの使い方/レスポンシブ･スマホ対応
2020年07月11日 マンガでわかるホームページ作成
今やスマホ対応があたり前、レスポンシブデザインがあたり前の時代です。でもどうやって対応させればいいのかわからない！そんなレスポンシブ・スマホ対応させる「メディアクエリ」の使い方について、基本的な書き方、ブレイクポイント、入れ子、印刷時対応、オススメの書き方を説明します。
この記事を読む
view portの書き方/レスポンシブ･スマホ対応【コピペでOK】
2020年07月11日 マンガでわかるホームページ作成
今どきレスポンシブ・スマホ対応が当たり前。しかしスマホ対応させるにも方法がわからない？レスポンシブ・スマホ対応view portの書き方について説明します。
この記事を読む
PCでスマホ表示に切り替えする方法
2020年07月11日 マンガでわかるホームページ作成
近年スマホ対応が当たり前になりました。スマホサイト開発や他社のスマホ対応動向確認のとき、いちいち実機スマホで確認するのもメンドウです。PCで確認できれば楽です。そこで「PCでスマホ画面を表示する方法」を紹介します。
この記事を読む
スマホ対応・レシポンシブデザインとは
2020年07月11日 マンガでわかるホームページ作成
スマホ対応とはスマホでも利用しやすいようにWebサイトを調整することです。
この記事を読む
htmlが崩れた原因特定方法【Markup Validation Serviceの使い方】
2020年07月11日 マンガでわかるホームページ作成
ホームページが崩れたけど原因がわからないと直しようがないですよね。まずは原因の切り分けと特定が重要です。ホームページが崩れたときはhtmlかCSSあるいはjavascriptなど原因が考えられます。全部一気に確認はできないのでまずここではhtmlに問題がないか確認・原因特定する方法を説明します。
この記事を読む
CSSの一部が効かないときの原因特定方法【DevToolsの使い方】
2020年07月11日 マンガでわかるホームページ作成
CSSの一部が効かない！何が悪いのかわからない！という方へCSSの一部が効かないの原因特定方法を説明します。
この記事を読む
CSSが効かない原因と回避方法
2020年07月04日 マンガでわかるホームページ作成
CSS効かない、htmlが崩れたときは以下に当てはまらないかチェックしてみてください。
この記事を読む
CSSの!importantの意味・使い方･注意点まで徹底解説!
2020年06月28日 マンガでわかるホームページ作成
CSSの!importantの意味・使い方・書き方・優先順位・重複したらどうなるのか、注意点・効かないときの確認方法などを徹底的に解説します。 マンガもあります。
この記事を読む
html内にstyle･CSSを直書きする方法と使い分け
2020年06月28日 マンガでわかるホームページ作成
htmlタグの中にstyle属性を指定し、ダブルクォーテーションの中にCSSを直書きします。
この記事を読む
CSSの優先順位と点数計算
2020年06月27日 マンガでわかるホームページ作成
疑似クラス、属性セレクタなど含めた優先順位と点数計算方法を解説します。
この記事を読む
CSS positionの書き方【実装例・デモとあわせて紹介】
2020年06月25日 マンガでわかるホームページ作成
CSSのpositionの書き方をstatic,relative,absolute,fixed,stickyの使用例とともに説明します。
この記事を読む
CSS display:flexで解決できること9選!
2020年06月25日 マンガでわかるホームページ作成
display:flexは便利らしいがどんなときに使えるのか。 横並べを中心に、いろいろなことができるので覚えておきましょう。
この記事を読む
CSS displayの書き方【23種説明】
2020年06月25日 マンガでわかるホームページ作成
CSSのdisplayを使うことでhtmlタグの本来の動きを変化させることができます。displayで使える値はたくさんあります。ただ、以下で紹介する23種が現実なところでしょう。CSS displayの書き方を23種デモ付きで全部説明します！
この記事を読む
CSS marginとpaddingの違い・使い分けについて
2020年06月25日 マンガでわかるホームページ作成
marginとpaddingはボックスの余白を調整するCSSです。 marginとpaddingの使い方や違いについて説明します。
この記事を読む
CSS borderの使い方と種類一覧
2020年06月20日 マンガでわかるホームページ作成
CSS borderおよびborderに関連するCSSプロパティの種類一覧を実例とともに紹介します。
この記事を読む
CSS background【背景の指定方法】
2020年06月20日 マンガでわかるホームページ作成
CSSにおいて背景を指定するには「background」プロパティを使います。backgroundでは主に5つのプロパティがあり、それらを説明します。
この記事を読む
CSSでの色（カラーコード）指定方法
2020年06月19日 マンガでわかるホームページ作成
Webサイトでは背景色、線の色、文字の色など色（カラーコード）を指定する場面が多々あります。色（カラーコード）の指定方法を3つ紹介します。
この記事を読む
CSSで使う長さの単位【px･em･%･vw･vh/calc】
2020年06月11日 マンガでわかるホームページ作成
CSSにはwidth等で大きさ・長さを指定するための単位が複数存在します。またそれらを計算できる仕組みがあります。これらをマスターしてイメージ通りのデザインを作成しましょう。
この記事を読む
CSS width height【要素の幅と高さを指定】
2020年06月11日 マンガでわかるホームページ作成
CSSのwidth（幅）とheight（高さ）の指定について説明します。あわせて注意点、min-width（最小幅）、max-width（最大幅）についても説明します。
この記事を読む
CSSセレクタとは【CSSを適用させる対象】
2020年06月11日 マンガでわかるホームページ作成
どのhtmlタグを対象とするのか指定するのがCSSセレクタです。classやid、そのほかよく使うセレクタを紹介します。
この記事を読む
CSSとは【CSSの書き方】
2020年06月11日 マンガでわかるホームページ作成
CSSはデザインをつかさどる言語です。 htmlが骨組みとなり、それに背景色や大きさ、配置といったデザインの指示を出すのがCSSです。 CSSはWebサイトを作るにあたり習得必須の言語です。
この記事を読む
htmlの階層･パス【画像が表示されない・リンク切れのときに】
2020年06月04日 マンガでわかるホームページ作成
内部リンクなどファイルの場所を指定するとき、パスを指定することになります。パスを理解しないとリンク切れや画像が表示されないということになりかねません。そんな階層・パスについて説明しますのでしっかり理解しましょう。
この記事を読む
htmlでリンクの貼り方【aタグの使い方】
2020年06月04日 マンガでわかるホームページ作成
ホームページと言えばリンク、リンクのないホームページなどほぼありません。ホームページを作る以上必ず覚えなければならない「リンクの貼り方」です。htmlでリンクを貼るにはaタグを使います。
この記事を読む
htmlで画像の貼り方【imgタグの使い方】
2020年06月03日 マンガでわかるホームページ作成
画像を貼るにはimgタグを使います。imgタグとその属性srcやaltについても解説します。
この記事を読む
html定型【コピペでOK】
2020年06月03日 マンガでわかるホームページ作成
htmlにおいて最初の型はほぼ一定です。コピペでさくっと作ってしまいましょう。
この記事を読む
htmlのブロック要素とインライン要素
2020年06月03日 マンガでわかるホームページ作成
htmlタグは大きくブロック要素とインライン要素に分かれます。このブロック要素とインライン要素を理解していないとCSSで装飾するときにつまづきますし、html構築でも間違ってしまいます。
この記事を読む
htmlタグにおける親子要素･兄弟要素とは
2020年06月03日 マンガでわかるホームページ作成
htmlにおいて親子要素･兄弟要素というワードがでてきます。親子要素・兄弟要素について解説します。
この記事を読む
htmlタグの属性と値【htmlタグとセットで覚えよう】
2020年05月30日 マンガでわかるホームページ作成
htmlの属性について htmlタグは単体ではなく属性とその値とセットで使うことがあります。 例えば上記の場合、aタグのhref属性の値がindex.htmlで、さらにtarget属性の値が_blankということになりま […]
この記事を読む
htmlタグとは【よく使うhtmlタグを紹介】
2020年05月30日 マンガでわかるホームページ作成
htmlタグとは htmlタグとはhtmlを構成する単語のようなものです。 右クリックから「ページのソースを表示」をすると文字列が表示されます。 その中に「<」と「>」で囲まれた英語が何度も出てきますよね。 […]
この記事を読む
html･CSS･javascript･PHPとは何か簡単にわかりやすく説明
2020年05月30日 マンガでわかるホームページ作成
htmlとそれに関連するCSS、javascript、phpとは何か簡単にわかりやすく説明します。この記事ではhtmlなどがどんなものなのかざっくりイメージをつかみ、概要がわかるように説明しています。
この記事を読む
Webサイト制作ができる最強の無料エディタ・Brackets
2020年05月30日 マンガでわかるホームページ作成
Web制作ができる最強の無料ソフトBracketsのメリット、Dreamweaverとの比較を紹介します。Dreamweaverの代わりになる無料エディタないかなぁという方にもおすすめしますし、ちょっとWeb制作始めてみたいという初心者の方にも超絶オススメです。
この記事を読む
クリック率を上げる商品の魅せ方「メリットの提示」か「デメリットの回避の提示」
2020年05月25日 ホームページ作成ハウツー
「ランディングページの購入ボタンクリック率を上げたい」「商品がいまいち売れない」と困っていませんか？クリック率が低いと売り上げも低いままです。クリック率を上げる商品の魅せ方について紹介します。
この記事を読む
ホームページ作成に最低限必要なもの
2020年05月24日 マンガでわかるホームページ作成
ホームページ作成に最低限必要なものにはパソコン・エディタ・インターネット環境・サーバー・ドメインが挙げられます。それぞれ説明します。
この記事を読む
Webサイト作成開始！
2020年05月24日 マンガでわかるホームページ作成
マンガでわかるホームページ作成は高校生の夢華がWebデザイナーであるお姉ちゃんにWebサイトの作り方を教えてもらうという話です。もちろん読者自身がWebサイトを作れるように説明してまいります。
この記事を読む
CSSで要素を追従させる「position:sticky」
2020年05月16日 CSSテクニック
position:stickyを使うと要素を追従させることができます。具体的に言うと指定した要素がスクロールされ、画面の一番上から画面外に行こうとしたときに画面一番上に固定されるイメージです。CSSで要素を追従させる「position:sticky」について説明します。
この記事を読む
CSSのソースを表示・確認する方法
2020年05月16日 CSSテクニック
「このサイトのCSSどうなってんだろ？」「自分とこのCSSどうなってたっけ？」と、CSSソースを確認したいときは多々あります。そんな時に使える「CSSのソースを表示・確認する方法」を説明します。
この記事を読む
CSSで要素を最前面へ表示させる方法
2020年05月15日 CSSテクニック
position:absoluteを使っていたら他の要素の後ろになってしまった。最前面にもってきたい！というときのCSSで要素を最前面に表示させる方法を紹介します。
この記事を読む
CSSで最初の要素・最後の要素にだけ指定する方法
2020年05月15日 CSSテクニック
「CSSで最初の要素や最後の要素にだけ指定したい。でもいちいちclassを指定するのも面倒！」そんなときは以下に紹介する疑似クラスで解決できます。CSSで最初の要素・最後の要素にだけ指定する方法を説明します。
この記事を読む
CSSで縁取り文字にする方法【太い縁もOK】
2020年05月15日 CSSテクニック
Webフォントが使えるようになったことで、画像に頼らなくてもロゴやコピーをテキストとCSSで表現できるようになりました。しかし、背景によって文字が読みづらい場合、文字を縁取りしたくなる場合があります。そんなときに使えるCSSで縁取り文字にする方法を紹介します。ただし太い縁にするときは一工夫必要になります。
この記事を読む
htmlやCSSで画像の横に文字を置く方法【６種紹介！】
2020年05月13日 CSSテクニック
「テキストばかりだと堅苦しいし読みづらいから画像を横に並べたい！」「テキスト横の空白が寂しいから画像を並べたい！」そんなときに使えるhtmlやCSSで画像の横に文字を置く方法を6つ紹介します。
この記事を読む
CSS !importantが効かないときの原因と解決方法6選
2020年05月11日 CSSテクニック
CSSの優先度を無視して最優先にする方法が「!important」を追加することです。しかし、「それでもCSSが効いていない!?」というときがあります。CSS !importantが効かないときの原因と解決方法を説明します。
この記事を読む
【カンタン!たった1行!】display:flexを解除する方法
2020年05月10日 CSSテクニック
display:flexを使うと横並べにしたり、中央寄せにしたり、順番を入れ替えたりなどレイアウトに関する変更ができます。ただし、パソコン版スマホ版で切り替えるためにdisplay:flexを解除したいときがあります。そんなときのdisplay:flexを解除する方法を説明します。
この記事を読む
htmlリンクの貼り方
2020年05月10日 ホームページ作成ハウツー
htmlにおいてリンク設定は基本中の基本です。htmlリンクの貼り方・別タブでの開き方・文字色、下線の変更方法・画像へのリンクの貼り方・リンクボタンの作り方などを具体的なhtml・CSSソースと表示結果とあわせて説明します。
この記事を読む
CSS・htmlでのclassとidの違い
2020年05月10日 CSSテクニック
htmlにclassやidを指定し、CSSでデザインを指定します。ではclassとidは何が違うのか説明します。
この記事を読む
html コメントアウトの書き方と応用と注意点
2020年05月06日 ホームページ作成ハウツー
コメントアウトとは「ソースにはあるが、ブラウザには表示されない状態にすること」です。コメントアウトしたい範囲を「<!--」と「-->」で挟みます。一行でも複数行でも方法は同じです。htmlでのコメントアウトの書き方と応用と注意点を説明します。
この記事を読む
z-indexが効かない原因と修正方法
2020年05月06日 CSSテクニック
position:absoluteと「z-index」を指定すると重なり順を変更することができます。「だというのに重なり順が変わらない!?z-indexが効いていない!?」というあなたのために「z-indexが効かない原因と修正方法」を説明します。
この記事を読む
Webサーバー確認方法
2020年05月02日 ホームページ作成ハウツー
「このサイトどこのサーバー使ってんだろ？」と思ったときに確認する方法です。
この記事を読む
日本語フリーフォントをWebフォントとして使う方法【高速化もする】
2020年04月29日 ホームページ作成ハウツー
WebフォントといえばGoogleフォントですが、フリーの日本語フォントはたくさんあります。そしてそれらはWebフォントとしても使うことができます。
この記事を読む
無料で使える日本語Webフォント一覧82選
2020年04月29日 ホームページ作成ハウツー
無料で商用利用できる日本語フォントを比較しやすいように一覧化しました。漢字が使えるフォントに絞っています。
この記事を読む
label forが効かない原因と修正方法
2020年04月29日 CSSテクニック
フォームを作るときlabelをクリックすることでinputタグが反応するようにすると利用しやすいですよね。しかしlabelのforが効いていないようでlabelをクリックしてもinputタグが反応しない？そんなときに見直す箇所をまとめました「label forが効かない原因と修正方法」を説明します。
この記事を読む
Webフォント(Googleフォント)の使い方と高速化【容量2%に減】
2020年04月29日 ホームページ作成ハウツー
Webフォントを使うときはフォントファイルの容量を軽くすることが重要になってきます。軽くする方法も含めて「Webフォントの使い方」をご説明します。
この記事を読む
ホームページ制作の勉強方法
2020年04月08日 ホームページ作成ハウツー
まさに今からホームページを作ろう！と思ったあなた！そもそもどうやって勉強して覚えていけばいいんだろう？と思ったはずです。私は地方でWebデザイナーを10年ほどやっていますが最初からホームページを作れたわけではありません。そんな私の経験と一般論からホームページ制作の勉強方法をご紹介します。
この記事を読む
ホームページデザイン作成のコツ
2020年04月05日 ホームページ作成ハウツー
ホームページを作るにはhtmlやCSSだけでなく、そもそもどんなホームページにするのかデザインを決めないと始まりません。ホームページデザインはホームページの顔であり、ホームページリニューアルの主な理由になる場合が多いです。それだけ重要な工程です。でも、ホームページのデザインなんてやったことない人にはどうやってホームページのデザインをしていけばいいのかわからないですよね？ホームページデザイン作成のコツを紹介します。
この記事を読む
CSS position: stickyが効かない原因４種と解決方法
2020年04月05日 CSSテクニック
CSS position: stickyは指定した要素がスクロールしても画面上に追従するCSSです。しかし、特定の条件により効かないことがあります。CSS position: stickyが効かない原因と解決方法を説明します。
この記事を読む
CSSセレクタでor条件(AまたはB)、and条件(AかつB)で複数指定する方法
2020年04月03日 CSSテクニック
or条件（AまたはB）はセレクタをカンマ区切り、and条件（AかつB）はセレクタを密接させます。 記事にて具体例と共に説明します。
この記事を読む
font-familyはメイリオがオススメな理由【よく使われる3つのフォントと比較】
2020年03月29日 ホームページ作成ハウツー
CSSではfont-familyでフォントを指定できます。 でも、フォントってたくさんあって、ホームページやブログでは何を使うのが一番いいの!?font-familyはメイリオを指定することをオススメします。当サイトでもメイリオを使っています。font-familyはメイリオがオススメである理由を、Webサイトでよく使われる3つのフォントと比較しながら解説します。
この記事を読む
SSL対応したのに「保護されていない通信」が消えないときの対処法
2020年03月25日 ホームページ作成ハウツー
chromeではSSL対応していないとURLバーに「保護されていない通信」と表示されます。SSL対応すると「保護されていない通信」が鍵アイコンに変わるのですが、ある条件により変わらない場合があります。SSL対応したのに「保護されていない通信」が消えないときの対処法を解説します。
この記事を読む
CSSだけで複数行3点リーダーを表示させる方法【IE対応】
2020年03月20日 CSSテクニック
3点リーダなんてCSSで簡単にできそうで意外と複雑です。CSSだけで一定行を超えたときに3点リーダを表示させる方法を解説します。IE対応です。
この記事を読む
CSS floatの使い方【floatは使わなくていい!!】
2020年03月19日 CSSテクニック
横並べといえばfloat。しかしfloatは初心者最大の難所といっていいでしょう。初心者から初級者になるための登竜門です！ぜひクリアして初級者の仲間入りしましょう！今回はCSS floatの使い方について説明します。
この記事を読む
クリックしたら特定の要素にclassをつける方法
2020年03月18日 ホームページ作成ハウツー
こっちの要素をクリックしたときにあっちの要素を変化させたい！あっち要素にclassさえつけばCSSで調整できるのに！という要望を実現できます。クリックしたら特定の要素にclassをつける方法を紹介します。
この記事を読む
Webデザイナーってどんな仕事してるの？
2020年03月14日 ホームページ作成ハウツー
これからWebデザイナーやフロントエンドエンジニア、あるいはWebサイト制作フリーランスになりたい、気になっているという方へ、本業Webデザイナー兼フロントエンドエンジニアの私が実際のところどんな働き方をしているのか紹介します。
この記事を読む
CSSセレクタで何番目以降･以前･偶数･奇数ごとに指定する方法
2020年03月09日 CSSテクニック
3番目以降あるいは3番目以前、偶数・奇数ごとに色を変えたい、デザインを変えたいってことありますよね？ そんなときに使える「CSSセレクタで何番目以降･以前･偶数･奇数ごとに指定する方法」を説明します。
この記事を読む
ホームページが更新されていない!?そんなときはキャッシュ削除だ!
2020年03月08日 ホームページ作成ハウツー
ホームページを更新した、あるいは業者に更新してもらったのにホームページが更新されていない!?あわてないでください。ホームページが更新されていないときの確認・確認事項として10個を挙げました。
この記事を読む
borderをグラデーションにする方法
2020年03月08日 CSSテクニック
border（枠線）をグラデーションしてかっこよくしたい！ というかたへborderをグラデーションにする方法を説明します。
この記事を読む
CSSセレクタ一覧【使い方例あり】
2020年03月07日 CSSテクニック
主要ブラウザで使えるセレクタ等の一覧です。主要ブラウザで使えるセレクタ等の一覧です。CSSの記述例と実行例もあります。
この記事を読む
transform:rotate deg角度確認一覧
2020年03月04日 CSSテクニック
CSSではtransform: rotateを使うことで回転させ、斜めを表現することができます。しかし45degと指定したらどうなるのか？一覧を作ったので参考にしてください。
この記事を読む
CSS 回転transform:rotateの中心軸とその変更方法
2020年03月03日 CSSテクニック
CSSではtransform: rotateを使うことで回転させ、斜めを表現することができます。しかし、このtransform: rotateいったいどこが中心軸なのか？回転transform:rotateの中心軸とその変更方法について説明します。
この記事を読む
CSS opacityとtransitionでマウスオーバーしたとき透明に変化させる方法
2020年03月03日 CSSテクニック
opacityとtransitionでマウスオーバーしたとき透明に変化させる方法を説明します。よくある方法としてリンク画像にマウスを乗せたときに変化を加えるために透明にするということがあります。transitionを使うことで簡易なアニメーションを使うことができます。
この記事を読む
CSSで文字色を一部変える方法
2020年03月03日 CSSテクニック
文章を書いていて一部注目させたいワードを赤字にしたい！ってときありますよね。そんなときに使える「CSSで文字色を一部変える方法」を説明します。
この記事を読む
aタグなどのインライン要素を右寄せにする方法
2020年03月03日 CSSテクニック
文章は通常左寄せになります。でも「トップへ戻る」のようなaタグを作成し、右端に置いておきたい。そんときに使える「aタグなどのインライン要素を右寄せにする方法」を説明します。
この記事を読む
CSSのmargin:0 autoが効かない原因と修正方法・代替案
2020年03月02日 CSSテクニック
中央寄せするために「margin:auto」を指定したのに効かなくて中央寄せにならないことがあります。 そこでCSSのmargin:0 autoが効かない原因と修正方法・代替案を説明します。
この記事を読む
labelタグにCSSが効かない原因と修正方法
2020年03月01日 CSSテクニック
labelタグはinputタグとセットで使用し、inputのタイトルを示すものです。デザインとしてもinputのクリックできる範囲を大きくするために使うことがあります。しかし、labelタグにCSSが効かず思ったようにデザインできない!?そんな「labelタグにCSSが効かない原因と修正方法」を説明します。
この記事を読む
CSSのlinear-gradientで透過グラデーションを指定する方法
2020年03月01日 CSSテクニック
CSSではbackgroundとlinear-gradientを使うことでグラデーションを表現できます。しかし、透明色のグラデーションはできるのか？CSSのlinear-gradientで透過グラーデーションを指定する方法を説明します。
この記事を読む
CSSで改行させない方法6パターン
2020年03月01日 CSSテクニック
white-space: nowrapなどのCSSを使って改行させずに1行で納める方法を6パターン紹介します。 表を作っていて改行させたくないのに勝手に改行される。htmlタグのbrを消したい。単語内を改行させたくない。というときに使えます。
この記事を読む
CSSのfirst-childやlast-childが効かない原因と解決方法
2020年02月29日 CSSテクニック
子要素の最初と最後の要素に対する指定といえば疑似クラス:first-child :last-childです。しかしある条件により効かないことがあります。CSSのfirst-childやlast-childが効かない原因と解決方法を説明します。
この記事を読む
CSSでidとclass同時指定の方法と注意点
2020年02月29日 CSSテクニック
CSSではidとclassを使って他の要素と区別します。では、idとclassは同時に使えるのか!?CSSでidとclass同時指定の方法と注意点について説明します。
この記事を読む
CSS background-imageが表示されない9つの原因と修正方法
2020年02月29日 CSSテクニック
なぜかbackground-image（背景画像）が表示されない！そんなときのbackground-imageが表示されない原因と修正方法を9つ説明します。
この記事を読む
floatはもう古い!?display:flexを使えば絶対崩れない!!
2020年02月28日 CSSテクニック
横並べをするためのCSSといえば昔からfloatと相場が決まっています。 しかし、floatは崩れやすく、調節が面倒だったり、CSS初心者がはまりやすいポイントの一つです。
この記事を読む
IEでは効かない！CSSでcalcを入れ子で使う方法と注意点
2020年02月28日 CSSテクニック
CSSではcalcという要素を使うことで違う単位のものを計算して出力できる非常に便利なものがあります。calcは入れ子で使うことができますが注意点もあります。
この記事を読む
CSSのborder-radiusで円を作る方法
2020年02月27日 CSSテクニック
border-radiusは角を丸くするCSSです。 これを使って円を作ることができます。円はちょっとした装飾などよく使います。CSSのborder-radiusで円を作る方法を説明します。
この記事を読む
CSS テキストや画像やボックスを上下中央に寄せる方法
2020年02月27日 CSSテクニック
左右中央寄せはけっこう簡単ですが、上下中央寄せはちょっと工夫が必要…だったのは一昔前。今はCSS3が使えるのでけっこう簡単に上下中央寄せができます。テキストや画像やボックスを上下中央に寄せる方法を説明します。
この記事を読む
CSS box-shadowで下だけに影を出す方法
2020年02月27日 CSSテクニック
box-shadowを使うことでボックスに影をつけることができます。 しかし勝手に広がるので下にだけ影を出すにはひと工夫必要です。そこで、box-shadow 下だけに影を出す方法を説明します。
この記事を読む
CSS 沈むボタンの作り方4種【コピペでOK】
2020年02月27日 CSSテクニック
ボタンにマウスを乗せたら沈むとボタンっぽいですよね。沈むボタンの作り方を4種説明します。
この記事を読む
CSSで最後の要素（last-child）へのafter指定方法
2020年02月27日 CSSテクニック
CSSにおいてちょっとした装飾をするときならbefore・afterを使うことでhtmlコードをシンプルにできます。さて、最後の要素（last-child）のafterを消したい、あるいは変更したい。 そんな最後の要素（last-child）へのafter指定方法を説明します。
この記事を読む
CSSのbefore・afterが効かない原因はcontentにあり！
2020年02月27日 CSSテクニック
CSSにおいてちょっとした装飾をするときbefore・afterを使うとhtmlコードをシンプルにできます。ただし、ちょっとしたことで効かなくなることがあります。CSSのbefore・afterが効かない原因を、失敗例を提示して説明します。
この記事を読む
CSS paddingやmarginを1行で指定するときの順番
2020年02月26日 CSSテクニック
CSSで余白の調整の際に必ず使うpaddingやmarginは上下左右それぞれ指定できます。 その順番について説明します。
この記事を読む
CSS display:noneの逆･反対･解除方法
2020年02月25日 CSSテクニック
display:noneを指定すると要素を消すことができます。 display:noneを解除し、再度表示させたいことがあるかと思います。 CSS display:noneの逆、反対、つまり解除方法、表示方法について解説します。
この記事を読む
CSS classなどのセレクタの入れ子の書き方
2020年02月24日 CSSテクニック
classなど、CSSセレクタはたくさんありますが、中でもよく使うのが入れ子（子孫要素）へ指定するセレクタです。 これをしっかりマスターし、classだらけのhtmlから脱却しましょう。
この記事を読む
CSS animation opacity（透明）を使って明滅させる方法
2020年02月24日 CSSテクニック
CSS animation opacity（透明）を使って明滅させる方法を説明します。基本的なアニメーションの使い方がわかっていればカンタンです。
この記事を読む
CSS animationを止める方法【一時停止か終了時点で止める】
2020年02月24日 CSSテクニック
CSS animationを使ったものの、止め方がわからない。マウスを乗せたとき止めたい！最後の状態で止めたい！そんな「CSS animationを止める方法」を説明します。
この記事を読む
CSS animationで複数指定する方法
2020年02月24日 CSSテクニック
CSS3からanimationが使えるようになり、サイト上で複雑な動きをつけられるようになりました。 1つの要素に複数のanimationを指定することで複雑な動きをカンタンにつけることができます。そんな「CSS animationで複数指定する方法」を説明します。
この記事を読む
CSS animationの繰り返し方法
2020年02月24日 CSSテクニック
CSS3からanimationが使えるようになり、サイト上に複雑な動きをつけられるようになりました。 animationの良さの一つにアニメーションを繰り返せることがあります。そんなanimation 繰り返し方法を説明します。
この記事を読む
CSSのanimationのkeyframesの使い方【サンプルあり】
2020年02月24日 CSSテクニック
CSS3からanimationが使えるようになり、サイト上に複雑な動きをつけられるようになりました。使ってみたいけど、複雑でちょっと難しい!?そんなあなたのために、 animationの基本中の基本であるkeyframesについて説明します。
この記事を読む
CSSでborderやpaddingを内側に指定する方法
2020年02月24日 CSSテクニック
横並べにするためにwidthをぴったり指定したのにborderやpaddingをつけたら崩れた。なぜならborder やpaddingはwidthの外側になるから。 内側に指定して崩れないようにしたい。そんなときに使えるCSSでborderやpaddingを内側に指定する方法を説明します。
この記事を読む
CSSで下線（border-bottom・underline）の位置を変える方法
2020年02月24日 CSSテクニック
リンクによくついている下線（border-bottom・underline）のデザインにこだわりたい！そんな「CSSで下線の位置や太さを変える方法」を説明します。
この記事を読む
CSSで上下のborderを指定する方法
2020年02月24日 CSSテクニック
タイトルタグなどでは上下のborderをきれいに装飾していることがよくあります。でも、あれってどうやるの？そんな「CSSで上下のborderを指定する方法」を説明します。
この記事を読む
CSSでテキストを上下中央寄せにする方法
2020年02月24日 CSSテクニック
CSSでテキストを上下中央寄せにすること、よくありますよね。 でも意外とやり方がわからないものです。 そんな「テキストを上下中央寄せにする方法」を説明します。
この記事を読む
CSSで残りの幅を指定する方法【100% - ○px は可能!】
2020年02月24日 CSSテクニック
2列のボックスを作り、ある1方には幅を指定し、もう1方には残りの幅を指定したいときありますよね。そんな「残りの幅の指定の仕方」を説明します。
この記事を読む
CSSで矢印の角度を変える（90度以外にする）方法
2020年02月23日 CSSテクニック
CSSで矢印を作る方法は多く紹介されていますが、その矢印の角度は決まって90度です。しかし矢印は90度だけではありません。狭い角度や広い角度の矢印もあります。そんな角度を変えられる矢印の作り方を説明します。
この記事を読む
CSSで「×」バツボタンの作り方4種【コピペでOK】
2020年02月23日 CSSテクニック
CSSでバツボタンの作り方を説明します。 コピペでOKです。
この記事を読む
CSSでハートアイコンを作る方法【コピペでOK】
2020年02月23日 CSSテクニック
CSSでハートマークのアイコンを作る方法です。 コピペでOKです。
この記事を読む
CSSでinfoアイコンを作る方法【コピペでOK】
2020年02月23日 CSSテクニック
CSSで「i」マークのinfoアイコンを作る方法です。 コピペでOKです。
この記事を読む
CSSでヘルプアイコンを作る方法【コピペでOK】
2020年02月23日 CSSテクニック
CSSで以下のような「？」マークのヘルプアイコンを作る方法です。 コピペでOKです。
この記事を読む
CSSでhover時に矢印が伸びる・動くボタンの作り方
2020年02月23日 CSSテクニック
ボタンの右に矢印があるデザインはよく見かけますね。 マウスを乗せたとき矢印が右に伸びるとクリックしたくなるものです。 ここではCSSでhover時に矢印が伸びる・動くボタンの作り方を説明します。
この記事を読む
CSSだけで長い矢印アイコンの作り方【コピペでOK】
2020年02月23日 CSSテクニック
ネットで調べると三角だけの短い矢印アイコンの作り方は多数紹介されています。しかし長い矢印アイコンの作り方は意外と見つかりません。 ここでは長い矢印アイコンの作り方を説明します。 太長い矢印と細長い矢印を上下左右用意しました。 CSSをそのままコピペしてOKです。
この記事を読む
CSSでのcalcが効かない7つの原因と修正方法
2020年02月20日 CSSテクニック
cssで使うcalcが効かない原因と修正方法を7種お伝えします。先に言うとcalcは半角スペースのありなしがシビアです。
この記事を読む
【コピペでOK】googlemapのコードを貼り付けるだけでレスポンシブ対応
2020年02月19日 CSSテクニック
googlemapをレスポンシブ対応させるためにgooglemapのコード貼り付けるだけで済ませたい！パソコンで見たときとスマホで見たとき、それぞれ適切なサイズであればOK！googlemapのコードを貼り付けるだけでレスポンシブ対応する方法のご紹介です。
この記事を読む
CSSでaタグのhoverが効かない･文字色が変わらない原因と修正方法
2020年02月18日 CSSテクニック
hoverを使うとaタグの文字の色など変えることができます。しかしちょっとしたことでhoverがうまく効かないことがあります。 CSSでaタグのhoverが効かない･文字色が変わらない原因と修正方法を解説します。
この記事を読む
html･CSSでマウスオーバー時に文字･ボタン･画像の色を変える方法
2020年02月18日 CSSテクニック
マウスオーバー時に要素を変化させるとクリックできることがわかったり、スペースの節約ができたりします。 html･CSSでマウスオーバー時に文字･ボタン･画像の色を変える方法を紹介します。
この記事を読む
CSSでborderを使わないで三角形を作る方法
2020年02月17日 CSSテクニック
この記事ではCSSでborderを使わないで三角形を作る方法をお伝えします。 backgroudを使います。
この記事を読む
CSSのみスライドショー【選択ボタン付き自動再生】
2020年02月17日 CSSテクニック
CSSのみのスライドショーです。自動再生する上に選択ボタンも付いています。htmlのラジオボタンとCSSを駆使して作成しました。
この記事を読む
CSSだけで選択ボタン付きスライドショー
2020年02月17日 CSSテクニック
javascriptを使わずCSSだけで選択ボタン付きスライドショーを作る方法です。
この記事を読む
CSSだけで自動再生スライドショー
2020年02月16日 CSSテクニック
javascriptを使わない、CSSだけの自動再生スライドショーの作り方です。
この記事を読む
CSSで下だけ斜めにする方法
2020年02月14日 CSSテクニック
divなどの要素は長方形であり、1つの角が90度でない形にはできません。 しかし、見た目上の三角形と組み合わせることで見た目上の台形ができます。 ここではCSSだけで下だけ斜めの台形ができます。 レスポンシブ対応です。
この記事を読む
【html】画像を横並びにしたときずれる原因と修正方法
2020年02月13日 ホームページ作成ハウツー
画像を横並びにしたとき画像の高さがあってなく、うまくそろってない、ずれていることがあります。 ここではその原因と修正方法についてご説明します。
この記事を読む
CSSでli（リスト）を均等に横並びにする方法
2020年02月13日 CSSテクニック
メインメニューなどはli（リスト）が均等に横並びしているものです。しかし、liの中のテキスト量はバラバラで、うまく横幅が均等にならないこともあるかと思います。 ここではCSSでli（リスト）を均等に横並びにする方法を説明します。
この記事を読む
htmlやCSSでボタンを横並びにする方法3選
2020年02月13日 CSSテクニック
ボタンを横並びで2つ配置したいときがあります。 ボタンのサイズもそんなに大きくないからできればきれいに横並べしたい。 そんな「htmlやCSSでボタンを横並びにする方法」をご説明します。
この記事を読む
CSSでdivを横並びにしてレスポンシブ対応する方法
2020年02月13日 CSSテクニック
横並びにしたdivをレスポンシブ対応する方法を説明します。スマホ版で横並びにしたいときと、スマホ版では縦並びに切り替えたい時があると思いますのでそれぞれ説明します。
この記事を読む
divを横に並べつつ中央寄せにする方法
2020年02月13日 CSSテクニック
1つのdivを中央寄せする方法は調べればいくらでも出てきますが、2つのdivを横にならべつつ、中央寄せする方法は意外とわからないものです。 そんな「divを横に並べつつ中央寄せにする方法」を説明します。
この記事を読む
display:flexが効かない・横並びにならない原因と修正方法
2020年02月13日 CSSテクニック
display:flexは新しいCSSで、横並びにするときによく使う便利なCSSです。横並びと言えばfloatですがこれと同じように使うとCSSが効かず、うまく横並びにならないことがあります。 ここではdisplay:flexが効かない・横並びにならない原因と修正方法を説明します。
この記事を読む
CSSやhtmlで画像を横並び2列にする方法３選（レスポンシブ対応）
2020年02月13日 CSSテクニック
「画像と画像を横並び2列にしたいけど、やりかたがよくわからない！」 そんなときに使える「CSSやhtmlで画像を横並びにする方法」を説明します。レスポンシブ対応もします。
この記事を読む