【WordPress】プラグインなしでギザギザ吹き出し【CSS】
CSSもすこしずつ理解できるようになってきたよ。 おかげで座りっぱなしで体重が10kg増えたらしいよ… わりとどうでもいい!! ほ ん と そ れ な!! ただ作りたかった。後悔はしていない。 ...
「CSS」一覧
【HTML】ol、ul、liの使い方まとめ【リストの型・応用も】
今回はHTMLでよく使う<ol><ul><li>タグについて見ていきます。 olとは？ リストの中にリストを作って2段階リストにする リストの順番指定 ulと...
【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だらけになって困っていたのでセレクタ関連についていろいろ勉強しました。その中でセレクタの指定方法について重要だと感じたものをまとめてみました。 なお、あくまで初心者がまとめるものなので難しい用語はな...
【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...