投稿日：2020-10-18T22:35:57+09:00

CSSでラジオボタンの表示形式変更

デフォルトのラジオボタンの表示形式を変更させる際、
style="display: none;"を設定したうえ、デフォルトのラジオボタンの表示形式を無効にして、
表示したい形式のCSSを指定すれば、表示形式が変えられます。
※具体的には下記の例をご参照ください。

<html>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#female").click(function(){
    alert($("#female").val());
  });
  $("#male").click(function(){
    alert($("#male").val());
  });
});
</script>

<style type="text/css">
<!--
. ui-radio {
padding: 6px 5px;
}

.ui-radio+label{
background:green;
padding: 7px 60px;
}


.ui-radio:checked+label{
background:yellow;
padding: 7px 60px;
}
-->
</style>
<div>
    <h1>Radioボタン</h1>
    <input type="radio" id="female" class="ui-radio" name="sex" style="display: none;" value="女性"/>
    <label for="female">女</label>              
    <input type="radio" id="male" class="ui-radio" name="sex" style="display: none;"  value="男性"/>
    <label for="male">男</label>
</div>
</html>

　 Tweet
Qiitaで続きを読む

投稿日：2020-10-18T21:17:43+09:00

Twitterシェアボタンをカスタマイズする方法

シェアボタンとは

ボタン1つで、SNSにWebページや記事を共有してもらえるボタンです。自分のサイトを利用者に拡散してもらい、認知度をあげることができます。

Twitterの設置方法

アイコンを使う場合は、以下のブランドリソースを守りましょう。
https://about.twitter.com/ja/company/brand-resources.html

1. 公式ページにアクセス

シェアボタンなどツイッターの埋め込み形を生成できる公式ページにアクセスしましょう。
公式ページ→https://publish.twitter.com/#

2. Twitter Buttonsをクリック

下にスクロールして、Twitter Buttonsをクリックします。

3. Share Buttonを選択

Share Buttonを選択することで、URLをシェアするボタンを作成することができます。

4. set customization optionsをクリック

タイトルに書いてある
That’s all we need, unless you’d like to set customization options.
の青くなっているset customization options.をクリックすると以下の画面になります。

各項目は以下のことを指定できます。

英文できること

Do you want to prefill the Tweet text? 入力したい文字

Do you want to set a specific URL in the Tweet? 共有するURLもしくはツイートURL

Would you like this Tweet to include your screen name? 自分のツイッターアカウント

Would you like to set a hashtag for the Tweet? 共有したいハッシュタグ

Do you want to recommend accounts? お勧めするツイッターアカウント?

How would you like the button displayed? ボタンの大きさ（カスタマイズする場合は選択不要）

What language would you like to display this in? 言語設定

最後に、Updateをクリックしたら完成です。

5. Copy Code

Updateを押すと前のボタンに戻されます。Copy Codeを押すとクリップボードにコードがコピーされます。

6. カスタマイズする！！

一度、公開するWebページに貼り付けます。

そして、Webページを開きます。するとツイートボタンが表示されています。

Google Chromeのディベロッパーツールを使用します。

ページ上で、右クリックを押してから検証を押します。

ソースコードが出されるので、その中から、aタグを見つけ、href=""の中に書いてある文字をコピーします。

写真の場合、https://twitter.com/intent/tweet?original_referer=http%3A%2F%2F127.0.0.1%3A54313%2F&ref_src=twsrc%5Etfw&text=Document&tw_p=tweetbutton&url=http%3A%2F%2F127.0.0.1%3A54313%2Findex.html

6. 自分の作りたいボタンをデザインして、先ほどコピーしたものを貼り付けると完成です！！

英文	できること
Do you want to prefill the Tweet text?	入力したい文字
Do you want to set a specific URL in the Tweet?	共有するURLもしくはツイートURL
Would you like this Tweet to include your screen name?	自分のツイッターアカウント
Would you like to set a hashtag for the Tweet?	共有したいハッシュタグ
Do you want to recommend accounts?	お勧めするツイッターアカウント?
How would you like the button displayed?	ボタンの大きさ（カスタマイズする場合は選択不要）
What language would you like to display this in?	言語設定

　 Tweet
Qiitaで続きを読む

投稿日：2020-10-18T18:06:17+09:00

ボタンの中のテキストを中心にする方法

.testbutton {
  display: inline-flex;
  align-items: center; 
　justify-content: space-around;
}
２行以上のテキストをDIVの中にvertical中心にするときは
display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
また、下記はzerosixthreeからのもので、6行のCSSで何でも中央に配置できます
p {
  text-align: center;
  position: relative;
  top: 50%;
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

　 Tweet
Qiitaで続きを読む

投稿日：2020-10-18T16:40:13+09:00

ブロックの中央よせのしかた・HTML・CSS

はじめに

今回は、HTMLとCSSについてです。
毎回検索しているので、忘備録として、、、

ブロックの中央よせ（左右）

index.html

<div class="parent">parent
　　　　<div class="child">child</div>
</div>

main.css

.parent{
      height: 200px;
      width: 200px;
      background: blue;
    }

    .child{
      height: 100px;
      width: 100px;
      background: red;
      margin: 0 auto;
    }

ブロックの中央よせ（上下・左右）

index.html

<div class="parent">parent
       <div class="child">child</div>
     </div>

main.css

.parent {
        position: relative;
        width: 200px;
        height: 200px;
        background-color: blue;
      }

      .child {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100px;
        height: 100px;
        text-align: center;  /*以下2行で文字を中央よせにする*/
        line-height: 100px;
        background-color:red;
      }

　 Tweet
Qiitaで続きを読む

投稿日：2020-10-18T12:32:46+09:00

キャンバス要素を透過させる

デバッガで直にHTMLをいじるときに透過させたいとき。
style="opacity:0.5;"

　 Tweet
Qiitaで続きを読む

投稿日：2020-10-18T10:43:13+09:00

【初心者必見】ブラウザショートカットを駆使して、効率よくWEB開発を行おう！（win&mac両方対応）

どうも7noteです。WEB制作時によく使うブラウザのショートカットを紹介。

WEB開発者は常にスピードや効率化との勝負です。（クオリティも大事）
ブラウザの標準機能を使いこなしてさらに効率化UPを図りましょう！

今回紹介するのはGoogleChromeでのショートカットになりますが、他のブラウザでもほぼ同じショートカットが使えると思います。

よく使うショートカット一覧

キー（Win）キー（mac）機能説明

[Ctrl] + [N] [command] + [N] 新しいウィンドウを開く ---

[Ctrl] + [T] [command] + [T] 新しいタブを開く ---

[Ctrl] + クリック [command] + クリックリンク先を別タブで開く ---

[Ctrl] + [W] [command] + [W] 現在のタブを閉じる ---

[Ctrl] + [Shift] + [T] [command] + [shift] + [T] 最近閉じたタブを開く一番最後に閉じたタブを再度開きます。連続使用も可能で超便利。

[Ctrl] + [TAB] [command] + [alt] + [→] 次のタブへ移動 ---

[Ctrl] + [Shift] + [TAB] [command] + [alt] + [←] 前のタブへ移動 ---

[Ctrl] + [Shift] + [R] [command] + [shift] + [R] スーパーリロードキャッシュなどをクリアしてページをリロード。CSSがなかなか反映されない時などに必須。

[Ctrl] + [+] [command] + [+] 拡大 ---

[Ctrl] + [-] [command] + [-] 縮小 ---

[Ctrl] + [0] [command] + [0] 拡大縮小のリセット拡大縮小していた場合、デフォルト（100%）のサイズに戻す。

[Ctrl] + [F] [command] + [F] ページ内検索ページ内に使われている言葉を検索できる。

[Ctrl] + [L] [command] + [L] アドレスバーにフォーカスアドレスバー（URLが書いてるところ）にフォーカスが当たる。

[Ctrl] + [U] [command] + [U] ページのソースを表示現在見ているページのソース（HTML）を見ることができる。

[F12] [F12] 検証ツールを表示 ---

その中でも特に覚えておきたいショートカット3選

① 最近閉じたタブを開く

windowsショートカット → [Ctrl] + [Shift] + [T]
macショートカット → [command] + [shift] + [T]

これは初めて知ったときからずっと重宝して使ってます。
使えるシチュエーションとしては・・・

・「あ、さっきまで参考にしていたサイトを間違えて閉じちゃった！」
・「修正が終わったページ、やり直しが出た。。。もうページ閉じちゃったのに・・・」
・「他のウィンドウと間違えてブラウザの閉じるボタン押しちゃった！」

などなど、使える場面が豊富でかつミスをカバーしてくれるので圧倒的な時間短縮が可能になります。
特にすごいのが、間違えてウィンドウごと閉じてしまった場合。この場合でも、新規ウィンドウを立ち上げ直して、ショートカットを入力すると閉じたウィンドウのタブがすべて復元されます。

② スーパーリロード

windowsショートカット → [Ctrl] + [Shift] + [R]
macショートカット → [command] + [shift] + [R]

これはオススメというよりも、このショートカットキーがないと話にならないレベル。
ブラウザが保持するキャッシュをクリアしなければなかなかCSSが反映されないので・・・

・「あれ、おっかしいなぁ、CSSあってると思うのに反映されない。」

なんて泥沼にハマってしまい無駄な時間を過ごすことになります。
無駄な時間を省いて、チェックはテキパキと効率よく進めたいですね。

③ 検証ツールを表示

windowsショートカット → [F12]
macショートカット → [F12]
※PCによってはファンクションキー[fn]も同時に押す必要があります。

こちらも暗記必須のショートカットキーになります。
検証ツールの詳しい使い方については省略しますが、htmlのソースの確認、cssの微調整、javascriptのデバッグ等開発する上で必須のショートカットになります。

このショートカットキーを知っているか知らないかでは開発速度が倍以上違うと言っても過言ではないほど重要なショートカットキーなので、もしまだこの記事を読むまで知らなかったという方は今すぐ検索?！！

組み合わせ技例

ショートカットキー単体の紹介はしましたが、ここからはできるだけ実践に近いショートカットキーの使い方を紹介できればと思います。

其の１）「ページのソースを表示」からの→ 「ページ内検索」

windowsショートカット ➡ 「 [Ctrl] + [U] 」→ 「 [Ctrl] + [F] 」
macショートカット ➡ 「 [command] + [U] 」→ 「 [command] + [F] 」

HTMLソースを表示したのち、探したいclass名やid名、ファイル名を検索。
マウス操作なら10秒〜20秒、大掛かりなサイトなら30秒以上かかる作業が5秒以内で完了できます。

其の2）「リンク先を別タブで開く」からの→ 「次のタブへ移動」からの→ 「現在のタブを閉じる」

windowsショートカット ➡ 「 [Ctrl] + クリック」 → 「 [Ctrl] + [TAB] 」 → 「 [Ctrl] + [W] 」
macショートカット ➡ 「 [command] + クリック」 → 「 [command] + [alt] + [→]」 → 「 [command] + [W] 」

あまり頻出するシチュエーションではないのですが、wordpressなどで複数の記事を修正しなければならない時に同一タブで、

「開く」→「開かれるのを待つ」→「修正して保存する」→「戻るボタンを押す」→「戻るのを待つ」

ってやっていると待ちタイムが2回もあるのです。
この待ちタイムを削減するために、私はいつも次のような手順で行っています。

「10個〜20個一気に別タブで開く」→「修正して保存」→「保存中に次のタブへ移動」→（繰り返し）→「連続でタブを閉じる」

本当はデータベースを直接見て、SQL文とかを書くほうがいいのですが私は思いっきりフロントメインだったのであまり得意ではなく、ついこのような手法をとってしまいます。データベースさわれる人超尊敬。

まとめ

なんにせよショートカットキーが使えると1回1回はほんの数秒の時間短縮でも塵も積もればで1週間、1ヶ月で見ると数時間分の短縮になったりするものです。
最初はショートカットキーを覚えたり、使いこなすまでに時間がかかるかもしれませんが滅気ずにプログラミングに挑戦するのと同じ気持ちでショートカットも覚えていくといいかもですね。

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】HTML・CSSのちょいテク詰め合わせ

キー（Win）	キー（mac）	機能	説明
[Ctrl] + [N]	[command] + [N]	新しいウィンドウを開く	---
[Ctrl] + [T]	[command] + [T]	新しいタブを開く	---
[Ctrl] + クリック	[command] + クリック	リンク先を別タブで開く	---
[Ctrl] + [W]	[command] + [W]	現在のタブを閉じる	---
[Ctrl] + [Shift] + [T]	[command] + [shift] + [T]	最近閉じたタブを開く	一番最後に閉じたタブを再度開きます。連続使用も可能で超便利。
[Ctrl] + [TAB]	[command] + [alt] + [→]	次のタブへ移動	---
[Ctrl] + [Shift] + [TAB]	[command] + [alt] + [←]	前のタブへ移動	---
[Ctrl] + [Shift] + [R]	[command] + [shift] + [R]	スーパーリロード	キャッシュなどをクリアしてページをリロード。CSSがなかなか反映されない時などに必須。
[Ctrl] + [+]	[command] + [+]	拡大	---
[Ctrl] + [-]	[command] + [-]	縮小	---
[Ctrl] + [0]	[command] + [0]	拡大縮小のリセット	拡大縮小していた場合、デフォルト（100%）のサイズに戻す。
[Ctrl] + [F]	[command] + [F]	ページ内検索	ページ内に使われている言葉を検索できる。
[Ctrl] + [L]	[command] + [L]	アドレスバーにフォーカス	アドレスバー（URLが書いてるところ）にフォーカスが当たる。
[Ctrl] + [U]	[command] + [U]	ページのソースを表示	現在見ているページのソース（HTML）を見ることができる。
[F12]	[F12]	検証ツールを表示	---

　 Tweet
Qiitaで続きを読む

投稿日：2020-10-18T09:58:35+09:00

CSSのみで、文字列の省略を簡略化する方法

■ はじめに

CSSのみで、文字列の省略を簡略化する方法について記事にしました。
この記事で得る内容は以下の通りです。

・CSSの基礎知識が増える
・長文で文字が表示しきれない際の対応ができる様になる

■ 例

例えば、以下の様なブログの見出しで、これを1行にしたい場合

white-space: nowrap;で改行させず、1行にし

overflow: hidden;で要素からはみ出た文字を非表示にして

text-overflow: ellipsis;と指定すると、文字列を省略することができます。

要素の幅が変わっても、要素の領域分まで文字を表示し、文字列の省略は消えません。
ただ、今回ご紹介した方法では、文字列が1行の場合のみにしか使えませんので注意が必要です。

　 Tweet
Qiitaで続きを読む

投稿日：2020-10-18T01:04:31+09:00

Hello Droid! CSSでドロイド君を描いてみた

CSSでアンドロイドのキャラクター「ドロイド君」を作成する

目標

次の画像にあるドロイド君を作成する

※できあがったコードはこちらから確認できます。

準備

任意のディレクトリに下記ファイルを作成

droid.html

droid.css

droid.html の初期状態
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ドロイド君</title>
<link href="droid.css" rel="stylesheet">
</head>
<body>
  <div class="droid">
    
  </div>
</body>
</body>
</html>
droid.cssの初期状態
/* ドロイド君 */
.droid {
  margin: 50px;
}

/* 以下に追記していく */
作成

必要なパーツ検討

大きく分けて3パーツに分けられそう

さらに、体は手足と親子関係を築けそう

droid.htmlで表現するとこんな感じになる
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ドロイド君</title>
<link href="css/droid.css" rel="stylesheet">
</head>
<body>
  <div class="droid">
    <div class="droid__head">
      <div class="droid__antenna"></div>
      <div class="droid__eye"></div>
    </div>
    <div class="droid__body">
      <div class="droid__hand"></div>
      <div class="droid__leg"></div>
    </div>
  </div>
</body>
</body>
</html>
頭を作成

まずは頭のみ作成

これは半円で表現できそう。droid.css に以下を追記
.droid__head {
  width: 100px;
  height: 50px;
  border-radius: 100px 100px 0 0;
  background: #a0c437;
}
positionのrelative・absoluteとz-indexを使って、半円の上に目をのせる
.droid__head {
  width: 100px;
  height: 50px;
  border-radius: 100px 100px 0 0;
  background: #a0c437;
  /* 新規追加 */
  position: relative;
  z-index: 0;
}

.droid__eye {
  width: 100%;
  position: relative;
  z-index: 1;
}

/* 疑似属性のbefore, afterを使わなくても良いが、使用するdiv タグの数を減らせる */
.droid__eye::before,
.droid__eye::after {
  top: 25px;
  left: 20px;
  width: 13px;
  height: 13px;
  border-radius: 10px;
  background: #ffffff;
  content: "";
  position: absolute;
}
ファイルを開くとこんな感じになる

目と同じようにアンテナ用のクラスも追加
.droid__antenna {
  position: relative;
  z-index: 1;
}

.droid__antenna::before,
.droid__antenna::after {
  border: 1px solid #a0c437;
  top: px;
  left: 15px;
  width: 15px;
  background: #a0c437;
  transform: rotate(50deg);
  content: "";
  position: absolute;
}

.droid__antenna::after {
  left: 70px;
  transform: rotate(-50deg);
}
これでようやく頭ができた

頭の下に体を作成

下記を追記
.droid__body {
  width: 100px;
  height: 100px;
  background: #a0c437;
  border-radius: 0 0 5px 5px / 0 0 5px 5px; /* 体の下の角を少し丸くする */
}
ファイルを開くと…ん、頭と体がくっついてしまった、、
.droid__head に margin-bottom: 5px;を追記して調整

これでいい感じになった

手足を追加

頭に目やアンテナを付けたときと同じように手足も付けられる
.droid__hand {
  z-index: 1;
  position: relative;
}

.droid__hand::before,
.droid__hand::after {
  left: -25px;
  width: 20px;
  height: 77px;
  background: #a0c437;
  border-radius: 20px/ 20px;
  content: "";
  position: absolute;
}

.droid__hand::after {
  left: 105px;
  border-radius: 20px/ 20px;
}

.droid__leg {
  position: relative;
  z-index: 1;
}

.droid__leg::before,
.droid__leg::after {
  top: 50px;
  left: 10px;
  width: 20px;
  height: 77px;
  background: #a0c437;
  border-radius: 20px/ 20px;
  content: "";
  position: absolute;
}

.droid__leg::after {
  left: 70px;
  border-radius: 20px/ 20px;
}
できあがり！

少し工夫

ドロイド君がまばたきするようにしてみた
.droid__eye::afterにanimation: blink-r infinite 7s;を追加

さらに下記を追加
.droid__eye::before {
  animation: blink-l infinite 7s;
}

@keyframes blink-r {
  0% {
    transform: rotate(180deg) scaleY(1);
  }
  1% {
    transform: rotate(180deg) scaleY(0);
  }
  2% {
    transform: rotate(180deg) scaleY(1);
  }
  50% {
    transform: rotate(180deg) scaleY(1);
  }
  51% {
    transform: rotate(180deg) scaleY(0);
  }
  52% {
    transform: rotate(180deg) scaleY(1);
  }
  53% {
    transform: rotate(180deg) scaleY(1);
  }
  54% {
    transform: rotate(180deg) scaleY(0);
  }
  55% {
    transform: rotate(180deg) scaleY(1);
  }
  100% {
    transform: rotate(90deg) scaleY(1);
  }
}

@keyframes blink-l {
  0% {
    transform: rotate(180deg) scaleY(1);
  }
  1% {
    transform: rotate(180deg) scaleY(0);
  }
  2% {
    transform: rotate(180deg) scaleY(1);
  }
  50% {
    transform: rotate(180deg) scaleY(1);
  }
  51% {
    transform: rotate(180deg) scaleY(0);
  }
  52% {
    transform: rotate(180deg) scaleY(1);
  }
  53% {
    transform: rotate(180deg) scaleY(1);
  }
  54% {
    transform: rotate(180deg) scaleY(0);
  }
  55% {
    transform: rotate(180deg) scaleY(1);
  }
  100% {
    transform: rotate(90deg) scaleY(1);
  }
}
感想

面白かったしcssの勉強にはなったけど、
これ以上複雑なものを作ろうとしたらかなりの時間が溶けそう…。

参考

BEMのドキュメント

クラス名はBEMの考え方を取り入れた

CSSでいろんなカタチを表現してみる

基本的な図形の書き方はこれを参考にした

画像を使わずにHTMLとCSSだけで猫を描いたお話

ドロイド君のまばたきはこれを参考にした