[HTML/CSS]padding-top/bottomで縦横比を調整する

2017.02.27 l＠ha

通常、子要素のwidthとheightの値をautoにすると親要素の値に従って設定されるがiframeなどはautoで調整ができないため、親要素の依存した値に設定したい場合はラッパー領域を用意してその領域を調整するという…

[HTML/CSS]クラス要素の非指定方法

2017.02.23 l＠ha

短いですが使い道がありそうなので、書いておきます。指定した要素がついていない時の装飾を設定できます。『:not(クラス要素、またはID要素)』

//「active」という名前のクラス要素がついていない時はフォントカラーを赤くする
.sample:not(.active){
        color:red;
}

//「active」という名前のクラス要素がついていない時はフォントカラーを赤くする

.sample:not(.active){

color:red;

}

&nb…

[HTML/CSS]要素を横並びにするinlineとinline-blockの違い

2017.02.09 l＠ha

HTMLの要素は「ブロックレベル要素」と「インラインレベル要素」にわけられます。「ブロックレベル要素」文章の骨組みとなる要素です。「＜h1＞、＜h2＞、＜p＞、＜ul＞、＜li＞、＜table＞…..e…

[初心者向け]JQueryってなに?どんなことができるの？

2017.02.08 l＠ha

この記事はJavaScriptを勉強し始めた人に向けて書いています。 JavaScript自体に触れたことがない方にはまずJavaScriptの基礎だけでも勉強してから見ることをお勧めします。個人的な意見としてはJav…

[HTML/CSS]ベンダープレフィックスでブラウザ間の差異をなくそう

2017.02.06 l＠ha

CSSでは同じコードを、-moz-とか-webkit-とかを頭につけて何度も記述している場面があります。これはブラウザ間の差異をなくすために必要な記述です。 InternetExploler(IE)やGoogle Ch…

[JavaScript]QRコードの作成[Googl APIの使用]

2017.02.05 l＠ha

Google APIを使用して指定したURLや文章のQRコードを作成してみます。 QR Codes | Infographics | Google Developers [crayon-678b38…

[JavaScript]if文の条件式の省略した書き方

2017.02.03 l＠ha

JavaScriptのif文の省略した書き方についてのメモです。単純な条件分岐の場合です。

var val=10;

//例
if(val > 5){
	cocole.log("5以下です。");
}else{
	cocole.log("5以上です。");
}

//以下のような書き方が可能
val > 5 ? console.log("5以下です") : console.log("5以上です");

cocole.log("5以下です。");

}else{

cocole.log("5以上です。");

}

//以下のような書き方が可能

val > 5 ? console.log("5以下です") : console.log("5以上です");

条件式が複数の場合です。 [crayon-67…

[JavaScript]中級者への第一歩 bindメソッド

2017.02.02 l＠ha

bindは他のオブジェクトが保持している状態を使用することができるメソッドです。 bindメソッドを調べてみると「thisの束縛」という風に表現されています。以下、サンプルコードです。 [crayon-678b38b1…

[JavaScript]中級者への第一歩 callメソッド

2017.02.01 l＠ha

JavaScript特有のcallメソッドについてです。一言で言うと、「自分の持っていない関数を使用するための関数です」自分の持っていない関数とは、他のオブジェクトが持っている関数を示しています。 [crayon-…

[JavaScript,JQuery]CSSを動的に変更する

2017.01.24 l＠ha

CSSを動的に変更する方法のメモです。

//設定している外部CSSのリンク
<link id="css_link" href="####" rel="stylesheet" type="text/css">

//素のJavaScriptの場合
var css_link = document.getElementById("#css_link");
css_link.href="@@@@";　　//リンク先を@@@@に変更

//JQueryの場合
$("#css_link").attr("href", "@@@@");　　　//リンク先を@@@@に変更