はじめてのコーディング技術

＼目次／

1 ボタン・見出し・スケジュールの装飾
2 タイポグラフィ・文字の装飾
3 アニメーション
- 3.1 CSSだけでアニメーションを作成する（CSS Transition・CSS Transform）
4 CSSセレクタの種類と指定方法
- 4.1 隣接セレクタ・擬似要素・擬似クラスを活用してリストのデザインを作成する
5 CSSアイコン
6 ナビゲーションの装飾
- 6.1 CSSで斜めのナビゲーション

とあるサイトでコーディング技術を学習したので、自分なりにアレンジしたコードをアウトプットすることにしました。

その中でも特に勉強になったコードを紹介します。

コピペで使えるようになっているので、あなたのサイトで使っていただけるとうれしいです。

ボタン・見出し・スケジュールの装飾

CSSで実装するボタンデザイン

各ボタンの色味を変えるだけでも雰囲気は大きく変わるかと思います、ちょっとした装飾を施す事によってボタンひとつひとつにも個性を出すことができます。

要素としては決して大きくはありませんが、ボタンはUIの要となる重要なパーツなので丁寧かつこだわりを持って制作する必要があります。

あくまでデザインの一例にすぎないので、調整してオリジナルのデザインを作ってみてください！

ポストイット風ボタン

ポストイット風のラベルっぽいデザインのボタンです。

See the Pen
【ボタンデザイン】 by Web Navigator (@web-navigator)
on CodePen.

グラデーションボタン

ベーシックなデザインにグラデーションをかけ、少し雰囲気を変えたボタンです。

See the Pen
【ボタンデザイン】グラデーション by Web Navigator (@web-navigator)
on CodePen.

ステッチラベルボタン

ステッチが入ったラベルっぽい雰囲気のボタンです。カジュアルなデザインに合いそうです。

See the Pen
【ボタンデザイン】ステッチラベル by Web Navigator (@web-navigator)
on CodePen.

平行四辺形ボタン

斜めに切ったような平行四辺形のボタンです。

See the Pen
【ボタンデザイン】平行四辺形 by Web Navigator (@web-navigator)
on CodePen.

パッチワーク風ボタン

縦横のボーダーを交差させてパッチワークな雰囲気を出したボタンです。

See the Pen
【ボタンデザイン】パッチワーク風 by Web Navigator (@web-navigator)
on CodePen.

ピアノ風ボタン

ピアノっぽい雰囲気のボタンを作ろうとしたのですが定規っぽくなってしまったような気がしてます。

See the Pen
【ボタンデザイン】ピアノ風 by Web Navigator (@web-navigator)
on CodePen.

CSSで実装する見出しデザイン

HTMLではh1〜h6タグで実装される見出し。

各セクションのコンテンツに目を引かせるための重要な役割を担っている部分です。

それゆえにわかりやすく受け入れられやすいデザインが必要となりますが、その中でも個性を出して全体のデザインと調和させたいところです。

シンプルアイコン

見出しテキストの前にアイコンを設置した汎用性の高いシンプルな見出しです。

See the Pen
【見出し】シンプルアイコン by Web Navigator (@web-navigator)
on CodePen.

ポストイット風

ポストイットっぽいラベル風のデザインです。

See the Pen
【見出し】ポストイット風 by Web Navigator (@web-navigator)
on CodePen.

フキダシ風

情報系の記事はもちろん、コーポレートサイトなど割と色々なWEBサイトで使用されているフキダシ風の見出しです。

See the Pen
【見出し】フキダシ風 by Web Navigator (@web-navigator)
on CodePen.

ブックマーク風

ブログなどの記事ページに使いやすそうなタグ風の見出しです。

See the Pen
【見出し】ブックマーク風 by Web Navigator (@web-navigator)
on CodePen.

リボン風

シンプルなリボン風デザインの見出しです。華やかな印象になりますね。

See the Pen
【見出し】リボン風 by Web Navigator (@web-navigator)
on CodePen.

ステッチラベル

ステッチが入ったラベル風のデザインです。左上のドッグイヤーがポイントです。

See the Pen
【見出し】ステッチラベル by Web Navigator (@web-navigator)
on CodePen.

小見出し付き

左上に小見出しを付けたデザインです。ブログ記事等の中見出しにちょうど良さそうです。

See the Pen
【見出し】小見出し付き by Web Navigator (@web-navigator)
on CodePen.

一日のスケジュールなどに使えそうなCSS

HTMLの構成

1日の流れを表しているのでここではliタグを使用しています。

LPの「サービスの流れ」にも応用できると思います。

全体の構成はこのようになっています。

要素の並びにはflexを使用

時間と予定の部分が横並びなのでflexboxを使用しております。

See the Pen
一日のスケジュールなどに使えそうなCSS by Web Navigator (@web-navigator)
on CodePen.

タイポグラフィ・文字の装飾

CSSで縦書きレイアウト

グローバルなWEBの世界では横書きの文字組が当たり前ですが、日本の伝統的な縦書きの文字組を使用したレイアウトも、美しいデザインを作る選択肢としていかがでしょうか。

文字組を変えるだけで和の雰囲気を感じられる表現ができるので、ぜひ試してみてください。

右上から左下へテキストが流れていく縦書きの組版はアジアの一部でしか馴染みの無いレイアウトですが、我々日本人にとってはとても親しみやすく、特に本が好きな方にはとても愛着のあるレイアウトでしょう。

縦書きレイアウトは和風なデザインを制作する際には必須になるかと思われます。それ以外の場合でも文字組でデザインの差別化を行うには便利かと思います！

横書きの文字組が当たり前のWEB上では少し扱いが難しい部分もあるかと思いますが、flexと組み合わせると中央揃えなど、自由に配置できますので、ぜひ一度縦書きレイアウトを使用したデザインにチャレンジしてみてください！

See the Pen
縦書きレイアウト by Web Navigator (@web-navigator)
on CodePen.

CSSでいろいろな下線を引く

テキストに点線で下線

線種に「dashed」を指定してます。

See the Pen
【下線】テキストに点線で下線［その1］ by Web Navigator (@web-navigator)
on CodePen.

テキストに点で下線を引く

線種に「dotted」を指定してます。

See the Pen
【下線】テキストに点線で下線［その2］ by Web Navigator (@web-navigator)
on CodePen.

点線の色、間隔を調整

See the Pen
【下線】テキストの点線の色、間隔を調整 by Web Navigator (@web-navigator)
on CodePen.

テキストに斜め背景の下線を引く

下線を斜めの縞模様にしてみます。

点線の色、間隔を調整したときと同様の考え方でグラデーションを利用して斜めの縞模様を作ります。

まず横縞の模様になるように指定します。

横縞模様のグラデーションの方向を指定するところで角度を指定します。

今回は-45deg（-45度回転）としています。

See the Pen
【下線】テキストに斜め背景の下線 by Web Navigator (@web-navigator)
on CodePen.

色や角度で幅や太さを変更

色を変更することも可能です。

斜めの角度や縞模様の間隔を変える際にはうまく模様が繋がらない場合があるので、その際は合わせてbackground-sizeも調整します。

See the Pen
【下線】色や角度で幅や太さを変更 by Web Navigator (@web-navigator)
on CodePen.

CSSでLINE風のレイアウトと吹き出しを作ってみる

CSSでLINE風の吹き出し会話を作ってみました。

これはFAQやブログでも使えると思います。

パーツを分割して考える

吹き出しの部分を分割してみると「角丸＋矢印」の組み合わせでできていることがわかります。

今回使用しているタグはdlタグです。

dlタグは、説明リストとして使用できるタグです。ある項目［dt］に対しての説明［dd］がセットになって入ります。

説明リストではdtとddをグループとしてdivで囲うことも可能になっています。

構造は下記になります。

See the Pen
LINE風のレイアウトと吹き出しの装飾をつくる by Web Navigator (@web-navigator)
on CodePen.

アニメーション

CSSだけでアニメーションを作成する（CSS Transition・CSS Transform）

See the Pen
アニメーションを作成する by Web Navigator (@web-navigator)
on CodePen.

CSSセレクタの種類と指定方法

隣接セレクタ・擬似要素・擬似クラスを活用してリストのデザインを作成する

隣接セレクタで作るリストデザイン

リストで境界線のボーダーをいれるときに、隣接セレクタでボーターをいれる方法を解説します。

隣接セレクタとは同じセレクタ同士（例えば、liタグとliタグ）が直接並んでいるとき（直後の弟）に適用されるセレクタです。

この隣接セレクタを使って隣り合う同士のリストに対してボーダーで境界線のデザインをつけていきます。

今回はliタグにクラスを適用して、CSSに「.list-item + .list-item」と記述します。

プロパティと値に「border: 1px solid #999999;」を適用して隣接セレクタを使用します。

See the Pen
隣接セレクタで作るリストデザイン by Web Navigator (@web-navigator)
on CodePen.

擬似クラス「nth-child」で作るリストデザイン

リストの内容が増えれば増えるほど、可読性が落ちます。

そのような場合にはリストの背景色に色を交互につけることで見やすくすることができます。

リストの背景色に擬似クラスnth-childを使って、交互に色を指定する方法を解説していきます。

今回はリストの各項目の偶数と奇数にCSSを適用させます。

奇数の場合は「nth-child(odd)」という疑似クラスを使ってCSSを適用させます。

先程作成した「.list-item」に擬似クラスを追加して、CSSに「.list-item:nth-child(odd)」と記述します。

プロパティと値に「background: #999999;」を適用して擬似クラスを使用します。

偶数の場合は「nth-child(even)」という疑似クラスを使ってCSSを適用させます。

先程作成した「.list-item」に擬似クラスを追加して、CSSに「.list-item:nth-child(even)」と記述します。

プロパティと値に「background: #f2f2f2;」を適用して擬似クラスを使用します。

See the Pen
擬似クラス「nth-child」で作るリストデザイン by Web Navigator (@web-navigator)
on CodePen.

擬似要素「after」で作るリストデザイン

リストの区切り線がリストの幅より狭いデザインのときに擬似要素でつくる方法を解説していきます。

最初に解説した隣接セレクタを使いつつ、疑似要素で区切り線を適用させます。

CSSに「.list-item + .list-item」させるところまでは一緒なのですが、この最後の「.list-item」の部分に「:after」を記述します。

「.list-item + .list-item:after」と記載することで、隣接セレクタの部分に擬似要素を指定することができます。

今回は疑似要素に区切り線をCSSで適用させて、positionでリストの上部部分に配置することでリストの区切り線のデザインを表現しています。

See the Pen
擬似要素「after」で作るリストデザイン by Web Navigator (@web-navigator)
on CodePen.

CSSアイコン

三角形の矢印アイコンをつくろう

borderを指定する

まず最初に三角形の元となるborderを指定していきます。今回はわかりやすいように各辺の色を変えていますが、通常は1色で大丈夫です。

色を変えているので分かると思いますが、各辺の境目は斜めにできていています。三角形アイコンはこれを利用して作成していきます。

See the Pen
【三角形の矢印アイコン】borderを指定 by Web Navigator (@web-navigator)
on CodePen.

幅・高さを0にする

次に、真ん中の部分は不要なので幅・高さを0にしてborderだけの要素にしていきます。

幅と高さを指定しないと要素に応じて自動で幅が決まってしまうため、ここは明示的に幅と高さを指定する必要があります。

See the Pen
【三角形の矢印アイコン】幅・高さを0にする by Web Navigator (@web-navigator)
on CodePen.

棒付き三角形の矢印アイコンをつくろう

三角形をつくる

三角形の要素は

borderを指定する
幅・高さを0にする
一片以外のborderの色を透明にする

という風に作成していきます。

今回は右を向いた矢印なので左側のborder以外の色を透明にしています。

See the Pen
棒付き三角形の矢印アイコン by Web Navigator (@web-navigator)
on CodePen.

currentColorの解説

コードをよく見ていた人は気づいているかもしれませんが、ちょっと聞き慣れないcurrentColorという値を使っています。

これは仕事でCSSを書いている人でも知らなかったりするちょっとマイナーな指定方法です。細かい説明は省きますが、colorプロパティで指定している値を別のプロパティでも指定できるというものです。

通常であればbackgroundを横棒と三角形で同じカラーコードで指定するのですが、横棒でcolorを事前に指定しているためその色をbackgroundでも使用できるようになっています。

サンプルコードではあまりメリットを感じにくいですが、実際のサイトやアプリなどを実装する場合は同じカラーコードを複数の場所に指定しなければならない場面ができます。そういったときにcolorの色を使い回せると共通の値を指定できるので便利です。

ハンバーガーメニューアイコン

以下のような手順を行うことで簡単に作成することができます。

中央の横棒をつくる
before要素で同じ長さの横棒をつくる
after要素で同じ長さの横棒をつくる

See the Pen
ハンバーガーメニューアイコン by Web Navigator (@web-navigator)
on CodePen.

ナビゲーションの装飾

CSSで斜めのナビゲーション

CSSで平行四辺形が横並びになったナビを作ってみました。

See the Pen
斜めのナビゲーション by Web Navigator (@web-navigator)
on CodePen.

WordPressの保守運用ならWEB先案内！

WordPressでのお困りの不具合等を復旧致します！

ココナラでも提供しております。ココナラだけでも、多数のご依頼を頂いています。またココナラではうれしい五つ星評価（最高評価）も頂いております。

ココナラでの評価・実績

WordPressの作業代行

お見積もりも、もちろん無料です。

日祝・時間を問わず対応しております。お気軽にご相談ください。

こんな不具合を解消しています。

下記のようなエラー復旧のご依頼を頂いています。

『WordPressにログインできない』
『ユーザー名、パスワードがわからなくなった』
『ワードプレスを更新したらおかしくなった』
『XXXX年間ビジターアンケートが表示された』
『ログインしようとしたら画面が真っ白（表示されなくなった）』
『サイトによくわからない文字が表示されている』
『400、500などのエラー表示が出ている』
『ウィジェットやバーが表示されない』
『ページが真っ白、エラーページが表示される』
『プラグインが動かない』
『403エラーが出て、サイトが見れなくなった』
『ホームページが改ざんされてしまった』
『不正なアクセスの検知をした旨のメールが届いた…』
『Fatal error: Uncaught Error:
Call to undefined function wp_unregister_GLOBALS() 』に関するエラー
『作業はやるので代わりに調べて欲しい』
『調べた内容は本当にできる？』
『詳しい人のアドバイスが欲しいだけ』
『WordPressを始めてみたけどこの後どうすればいいの？』
『インストールしたテーマの使い方がわからない…』
『外観＞カスタマイズ』で設定できる内容
『ERR_TOO_MANY_REDIRECTS』に関するエラー
『WordPressのバージョンを上げたらおかしくなった』
『テーマを更新したらデザインが崩れてしまった』
『サーバーを移行したら表示がおかしくなった』
『phpのバージョンを上げたらおかしくなった』
『画像をメディアにアップロードできない』
『サイト内の画像がすべて表示されなくなった』
『ドメインを変更したら表示がおかしくなった』
『サーバー移管SSL化（https）』
『他のブログからの引っ越し（アメーバブログ・他のWordPress等）』
『用途に応じたサーバー選び』