【HTML】ol、ul、liの使い方まとめ【リストの型・応用も】
今回はHTMLでよく使う<ol><ul><li>タグについて見ていきます。 olとは？ リストの中にリストを作って2段階リストにする リストの順番指定 ulと...
「CSS」一覧
【CSS】疑似要素の『::before』『::after』を学ぶ
今回はさまざまなデザインに必須ともいえる疑似要素の::beforeと::afterについて見てみます。 疑似要素を使いこなせばこんな感じで吹き出しが作れるよ ぜひとも使いこなしたいね。さっそくどんなものなのか見てみよう！ ...
【CSS】 border-widthを学ぶ【三角形で国旗を作る】
border-widthをきちんと使いこなせば、疑似要素と組み合わせてリボン型見出しなどを作る事が出来ます。今回はboder-widthを見てみましょう。 基本的なこと知っている方は②から読むといいと思います。 borderは一括指定プロパ...
『:hover』『:active』『:checked』を見てみる
今回はアニメーションみたいに動きを出せる疑似クラスの『:hover』『:active』『:checked』について見てみましょう。 『:hover』とは hoverの表現方法の例を見てみる 画像でもで...
【CSS】セレクタや疑似クラスを学んでidやclassをスッキリ！
CSSでいろいろ装飾をする練習をしていたら、classやidだらけになって困っていたのでセレクタ関連についていろいろ勉強しました。その中でセレクタの指定方法について重要だと感じたものをまとめてみました。 なお、あくまで初心者がまとめるものなので難しい用語はな...
【CSS】paddingとmarginについて学ぶ【必須項目】
今回はCSSのmarginとpaddingについて見ていきましょう。paddingとmarginはサイズの変更や余白を変える、更には配置に関することで絶対に必要な知識になるのでしっかり身に付けていきましょう。 1、要素はどのように構成され...
【HTML/CSS】tableの使い方を学ぶ【表作成・装飾】
Excelについてブログで情報発信をして、HTML/CSSの勉強をしているといいながらtableタグの解説をしていない矛盾に気づいたので解説していきます。 1、tableタグって？ 1-1、タグの種類 1-2、作成方法 ...
【CSS】displayを学ぶ【inline、block、inline-block】
CSSでサンプルサイトを作りながら「こういうデザインにしたい」と悶絶してたので、勉強してきました! 1、displayプロパティとは？ 1-1、displayの値の種類 1-2、それぞれの違い 2、displ...
ずばり6つ!! CSSが反映されない時にチェックすること
CSSでいろいろ作っていたら、ある時を境にまったく反応しなくなっていました。原因をググっても出なかったのですがとんでもない珍事が原因で解決しました。解決するまでに調べたことをまとめましたので同様に困った方は確認してみましょう。 キャッシュが残って...
【HTML＆CSS】目次作成しよう【ジャンプ・枠で囲うなど加工】
以前もWordpressでプラグインを使わずに目次を作るためにテキストエディタ(HTMLだけ)でリストにリンクを付けてジャンプするやり方を作りましたが、やはり目次らしくするためにCSSも使いながら目次を作成していきます。 今回作るのは以下のよ...