【CSS】 border-widthを学ぶ【三角形で国旗を作る】
border-widthをきちんと使いこなせば、疑似要素と組み合わせてリボン型見出しなどを作る事が出来ます。今回はboder-widthを見てみましょう。 基本的なこと知っている方は②から読むといいと思います。 borderは一括指定プロパ...
「コード関連」一覧
『:hover』『:active』『:checked』を見てみる
今回はアニメーションみたいに動きを出せる疑似クラスの『:hover』『:active』『:checked』について見てみましょう。 『:hover』とは hoverの表現方法の例を見てみる 画像でもで...
【CSS】セレクタや疑似クラスを学んでidやclassをスッキリ！
CSSでいろいろ装飾をする練習をしていたら、classやidだらけになって困っていたのでセレクタ関連についていろいろ勉強しました。その中でセレクタの指定方法について重要だと感じたものをまとめてみました。 なお、あくまで初心者がまとめるものなので難しい用語はな...
【Atom】超便利!!項目別ショートカット【Windows版】
テキストエディタのAtomのショートカットをまとめてみました。漏れがあるかもなので気付き次第追加していきます。 なお、Windows版なのでご了承ください。Mac買ったらMac版も作ろうかと… Atomのダウンロードはこちらから。 ...
【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でいろいろ作っていたら、ある時を境にまったく反応しなくなっていました。原因をググっても出なかったのですがとんでもない珍事が原因で解決しました。解決するまでに調べたことをまとめましたので同様に困った方は確認してみましょう。 キャッシュが残って...
「送信されたURLにnoindexタグが追加されています」って？
Google Search Consoleから「送信されたURLにnoindexタグが追加されています」とエラーメッセージが表示されたのでかなりテンパっていろいろ調べていました。(他にもエラーとかで振り回されてました) 初心者ながらなんとか無事(簡単)に解決...
【HTML＆CSS】目次作成しよう【ジャンプ・枠で囲うなど加工】
以前もWordpressでプラグインを使わずに目次を作るためにテキストエディタ(HTMLだけ)でリストにリンクを付けてジャンプするやり方を作りましたが、やはり目次らしくするためにCSSも使いながら目次を作成していきます。 今回作るのは以下のよ...