HTML/CSS CSSを設定するときに頻出する設定項目

このブログの表示感を調整するためにCSSをカスタマイズしていたが、毎回調べなおしていたので備忘録。

• width
• タグ要素の幅。divで頻出。
• height
• タグ要素の幅。divで頻出。
• background-color
• タグ要素内の背景色。RGB指定。
• font-size
• タグ要素内のテキストのテキストサイズ。 指定方法が色々ある。
• px,emとか。
• larger/smaller （親要素のフォントサイズとの相対）とか。
• color
• タグ要素内のテキストの色。RGB指定。
• font-style
• タグ要素内のテキストのスタイル。
• normal／italic／obliqueとか。
• padding
• タグ要素内に設定する余白。px,em指定。
• 1つ指定は全方向に同一の値を設定。
• 4つ指定は上、右、下、左の順に設定される。
• margin
• タグ要素外に設定する余白。px,em指定。
• 1つ指定は全方向に同一の値を設定。
• 4つ指定は上、右、下、左の順に設定される。
• list-style
• リストタグ（ul）限定。左につくボッチの指定。
• noneを指定すると消える。
• border-style
• 枠線を表示する際のスタイルを指定できる。
• solid(実線),dashed(破線)など。
• border-width
• 枠線を表示する際の枠線の太さ設定。
• px, em指定。
• border-color
• 枠線を表示する際の枠線の色指定。
• RGB指定。
• border
• border-style, border-width, border-colorを一括で指定できるプロパティ。

HTML/CSS マウスオーバーしたときの表示をカスタマイズする

マウスオーバーしたときに表示を切り替えたいときは、CSSに疑似クラスを指定する。

a:hover {
  マウスオーバー中に表示したい内容
}

この指定を複数の要素に指定することで、例えばテキストやイメージの表示切替などもできる。

a:hover {
  マウスオーバー中に表示したい内容
}

.a-covered:hover {
  マウスオーバー中に表示したい内容
}

マウスオーバー以外にも疑似クラスの指定により表示を変えられるものは以下。

• link：御訪問リンク
• visited：訪問済みリンク
• hover : マウスオーバー
• active : リンククリック中

参考

• html･CSSでマウスオーバー時に色を変える方法

CSS に追加するときの タグ／クラス／IDの指定方法

どうも。どっことです。今回はCSSを追加するときによく忘れるタグ／クラス／IDの指定方法について整理しました。

タグ指定によるカスタマイズ

タグ指定によるCSSは タグ名をそのまま書きます。つまり以下です。

/* bodyタグの指定*/
body {
 ...
}
/* h1クラスの指定 */
h1 {
 ...
}

クラス指定によるカスタマイズ

クラス指定によるCSSはピリオド「.」をつけて書きます。

/* hogeクラスの指定 */
.hoge {
 ...
}
/* fugaクラスの指定 */
.fuga {
 ...
}

また、タグ指定とクラス指定を組み合わせることができます。

/* hogeクラスが設定されているdivタグの指定 */
div.hoge {
 ...
}

/* hugaクラスが設定されているpタグの指定 */
p.fuga {
 ...
}

ID指定によるカスタマイズ

ID指定によるCSSはシャープ「＃」をつけて書きます。

/* ID:header */
#header {
 ...
}

/* ID:footer */
#footer {
 ...
}

また、ID指定も、タグ指定、クラス指定を組み合わせることができます。

/* ID:headerが指定されているdivタグ */
div#header {
 ...
}

/* new-articleクラス、ID:title 指定 */
.new-article#title {
 ...
}

/* divタグ、commentクラス、ID:title 指定 */
div.comment#title {
 ...
}

指定のタグ／クラス／ID内の要素に対してCSSを指定できます。

/* ID:headerが指定されている要素内のaタグ指定 */
#header a {
 ...
}

/* new-articleクラス内の div 指定 */
.new-article div {
 ...
}

参考

• クラスとID < CSS ｜ HTML+CSSまとめページ
• セレクタと疑似クラス < CSS ｜ HTML+CSSまとめページ
• 【CSS･html】idやclassの複数指定、同時指定方法

CSS CSSでのコメントの書き方を紹介

CSSにコメントを書く場合は/** こんな感じ */ でコメントを書く。

参考

• CSSのコメントアウト！見やすい書き方から使い方まで徹底解説

CSS 親要素を基準に位置を決めたい

親の領域を基準に特定の要素の位置を決める、AndroidでいうところのRelativeLayoutな位置調整をしたかったので実装方法を調べた。

親のスタイルに対して以下を設定する

position:relative

位置を決めたい要素のスタイルに対して以下を設定する

position:absolute

上記を設定したら、あとは特定の要素に対してleft,top,right,bottomを指定すればOK。特にやりたかった右下を指定する場合は以下。

right:0
bottom:0

参考

• ボックス要素の右下端にボタンを配置する

HTML/CSS 画面上の文字や画像を選択状態にできないようにするCSS設定を紹介

どうも。どっことです。今回はWebページ上の文字や画像を選択できないようにするCSSについて解説します。

テキストや画像が選択状態にできないようにする

テキストにクリックリスナーを設定した際、そのテキストが選択状態になってしまい、シンプルにダサいです。今回はそんな経緯から、テキストや画像が選択状態にできない設定を紹介します。

設定方法

設定はシンプルで、該当のテキスト・画像のタグに以下を設定します。

user-select: none;

例えば画像に設定する場合はimgタグなので以下となります。

img { 
    user-select: none;
}

簡単ですが、以上です。

参考

• 画面上の文字や画像を選択できないようにする at softelメモ

HTML/CSS/JavaScript モーダル(ポップアップ)表示したい

ボタンをタップしたらポップアップを表示させたいので実装方法を調べた。

やったこと

モーダル表示用のdivをbodyタグにいれる＋不要になったら捨てる。

<div id="modal-view" class="modal-background">
  <div class="modal"/>
</div>

• modal-backgroundクラスは背景として設定。
• modalクラスをポップアップぽくCSSを設定する。
• 背景、ポップアップは参考サイトの設定を見てなんとなく。

不要になったら以下で捨てる。

var view = document.getElementById('modal-view');
document.body.removeChild(view);

Blogger Highlight.jsによるシンタックスハイライトの設定方法を解説

どうも。どっことです。今回は、Bloggerにコードを載せるためのシンタックスハイライトの設定方法を解説していきます。

シンタックスハイライト：highlight.js

Bloggerのhead内に追記する。

Getting Started

<!-- syntax highlight-->
<link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css' rel='stylesheet'/>
<style>code{font-family:Menlo,Consolas,Courier,monospace;color:#333;background:#f8f8f8};</style>
<style>kbd{padding:.1em .6em;border:1px solid rgba(63,63,63,0.25);-webkit-box-shadow:0 1px 0 rgba(63,63,63,0.25);box-shadow:0 1px 0 rgba(63,63,63,0.25);font-size:.7em;font-family:sans-serif;background-color:#fff;color:#333;border-radius:3px;display:inline-block;margin:0 .1em;white-space:nowrap}</style>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/awk.min.js'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/erlang.min.js'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/erlang-repl.min.js'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/go.min.js'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/ldif.min.js'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/scheme.min.js'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/yaml.min.js'/>
<script>hljs.initHighlightingOnLoad();</script>

ただしハマりポイントとして、リンクタグやスクリプトタグはエンドタグを別に書かないと、だいたい正しく動作しない。つまり、

<link href="..." rel="..."/>

ではなくて

<link href="..." rel="..."></link>

こう書く。スクリプトも同様。

コード部分の記載を変更

記事内のコード部分を

<pre><code></code></pre>

で囲って記載する。これで書いたら、いったん動作確認。

スタイルを変更する

default.min.css の部分を変えると、スタイルを変えられるとのこと。ハイライトのデモページ、スタイル一覧はGitHubのコードを参照して、draculaに変えることにした。

highlight.js demo

GitHub /styles

default.min.css

を

dracula.min.css

に変えて動作確認。ちなみに、dracula.cssでは動作しなかった。

参考

• Bloggerで技術ブログを書くためのカスタマイズ
• Highlight.js

JavaScript ユーザに画像を選択させる

ユーザにローカルの画像を選択させてWebページ上に反映させたかったので調べた。

画像を選択させるための導線

<input type="file" id="myImage" accept="image/*">
<img id="preview">

• input タグを使う。
• type はfile を指定する。
• acceptというattributeがあるから、それにimageを設定する。

ユーザが選択した画像を画面に反映する

$('#myImage').on('change', function (e) {
  var reader = new FileReader();
  reader.onload = function (e) {
    $("#preview").attr('src', e.target.result);  
  }
  reader.readAsDataURL(e.target.files[0]); 
});

• inputに対して、ユーザが何かしら選択したことを検知するリスナーを付与
• FileReaderで読み込んで、読み込んだ画像をsourceとしてimageタグに付与
• jqueryで書かれてるぽい

参考

• 【JavaScript】input[type=”file”]で選択した画像をimg要素で表示する