Monthly Archives: 5月 2016

選択ボックスからページを移動する方法

JavaScriptのlocationオブジェクトを利用して、ページの移動を制御する簡単なプログラムを作成しました。このプログラム自体は大したことはありませんが、Webサイトをよりシンプルに素早く作成するのに役立つかもしれません。またJavaScriptの勉強中の方にも役立つかもしれませんね。

参考に利用ください!


<body>
<script type="text/javascript">
function jump(elem){
 //選択ボックスの選択が変更されたタイミングで実行
 var isbn = elem.value;
 //選択ボックスから取得した値をもとにリンク先のURLを生成
 location.href = 'http://htmlcsslaboratory.com/' + isbn;
}
</script>
<form name="fm">
 <select name="post" onchange="jump(this)">
 <option value="">---投稿を選択してください---</option>
 <option value="選択ボックスからページを移動する方法">選択ボックスからページを移動する方法</option>
 <option value="JavaScriptでサブウィンドウを生成してみる">JavaScriptでサブウィンドウを生成してみる</option>
 <option value="「前置演算」と「後置演算」を分かりやすく比較">「前置演算」と「後置演算」を分かりやすく比較</option>
 <option value="見出しのデザインをアレンジしてみました!">見出しのデザインをアレンジしてみました!</option>
 </select>
</form>
</body>

[demo]

 

この記事を読んでくださった方の少しでも役に立てたなら幸いです!

JavaScriptでサブウィンドウを生成してみる

自分はJavaScriptでWebオブジェクト利用することが多く、サブウィンドウを利用することがあったので備忘録としてここに残しておこうと思います。

<body>
<script type = "text/javascript">

//サブウィンドウを表すWindowオブジェクトを格納する変数

var subwin;

//[open]クリック時に実行

function win_open(){

    subwin = window.open('http://htmlcsslaboratory.com/','Sample','width=600,height=300,scrollbars=yes,location=yes');

}

//[close]クリック時に実行

function win_close(){

//subwinが空でなく、サブウィンドが閉じられていない時に閉じる

    if(subwin && !subwin.closed){

        subwin.close();

    }

}
</script>

<input type ="button" value = "open" onclick = "win_open()" />

<input type ="button" value = "close" onclick = "win_close()" />
</body>

[demo]

基礎的な部分はこれをコピペしていただければ、大丈夫です。

ここから必要に応じてカスタマイズしていくことになると思います。

(この機能はスマートフォンからでは確認できません。)

 

この記事を読んでくださった方の少しでも役に立てたなら幸いです!

「前置演算」と「後置演算」を分かりやすく比較してみました

皆さんは「前置演算」と「後置演算」を正しく理解して、使い分けていますか?
正直自分は「そこまで結果に差は出ないでしょ〜。とりあえず全て前置演算で統一しておこう!」って、くらいの認識でした…
両方の演算が入り乱れたコードを書いたり、見かけたりすることは少ないかもしれませんが、ここで正しく整理しておこうと思います!

とりあえずサンプルを見てみましょう!


// 前置演算

var x = 3;

var y = x++;

document.writeln(x); &nbsp;//4

document.writeln(y); &nbsp;//3

//後置演算

var x = 3;

var y = ++x;

document.writeln(x); &nbsp;//4

document.writeln(y); &nbsp;//4

 

この違いを図で表してみますね!

img01

 

img02

 

このようにyにxが代入されているのですが、xに対するインクリメントのタイミングが異なることでyの結果が変化することが理解いただけたでしょうか?

この記事を読んでくださった方の少しでも役に立てたなら幸いです!

見出しのデザインをアレンジしてみました!

ワードプレスでサイトを作る時、多くの方は自分の気に入ったテーマをダウンロードして利用していると思います。
ただ、全体のデザインが良くても、見出しなどの細かな修正を入れたくなることはありませんか?

今回は投稿ページで利用する<h2>,<h3>,<li>を少しアレンジしたので、自分のサイトもアレンジしてみたいなと、考えている方の参考になるよう、それぞれのタグのcssを紹介します。

まずは <h2>はこんな感じに

見出し見出し見出し

h2{
    position: relative;
    padding: 0px 10px 5px;
    border-left: 6px solid #00A1E0;
    font-size: 20px;
}
h2::after{
    position: absolute;
    left: 0;
    bottom: 0;
    content: '';
    width: 100%;
    height: 0;
    border-bottom: 1px solid #ccc;
}

次に <h3>

小見出し小見出し小見出し

h3{
    position: relative;
    padding-left: 30px;
    padding-bottom: 5px;
    border-bottom: 1px solid #ccc;
    font-size: 16px;
    line-height: 25px;
}
h3:after{
    position: absolute;
        top: .4em;
        left: .4em;
        z-index: 2;
        content: '';
        width: 12px;
        height: 12px;
        background-color: #ccc;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
}

<li>はこんな感じにしてみました

  • リスト1
  • リスト2
  • リスト3
li{
    list-style-type:none;
    list-style-image:none;
    margin: 5px 0px 5px 0px;
    position:relative;
    padding-left:20px;
}
li::before,
li::after{
    content:'';
    display:block;
    position:absolute;
    top:4px;
    left:8px;
    height:11px;
    width:4px;
    background:#aaa;
    border-radius:10px;
    transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    -o-transform:rotate(45deg);
}
li::before{
top:8px;
    left:3px;
    height:8px;
    transform:rotate(-45deg);
    -webkit-transform:rotate(-45deg);
    -o-transform:rotate(-45deg);
}

この記事を読んでくださった方の少しでも役に立てたなら幸いです!

インストールしているフォントを一覧で確認できる「wordmark」

皆さんは「wordmark」というツールを利用されたことはありますか?このツールはインストールしているフォントを一覧で表示できるものです。デザインを制作している途中でテキストのフォントに迷った時にとても重宝すると思います。

適当な文字を入力して、各フォントで表示される

ページのトップにテキストを入力するところがあるので、そこにいろんなフォントで表示してみたい文字を入力します。ここでの文字はアルファベットや漢字でも大丈夫です。

すると下の画像のようにインストールしてるフォントに合わせて一覧で表示されていきます。
wordmark

デザインを作りながら、全体のイメージに合ったフォントを選択するのは難しいですよね。そんな時に「wordmark」を活用すれば、どのフォントにすべきか悩む時間はかなり短縮されると思います。また、フォントを眺めているだけでも面白いですよね。

フォント選択に迷った時は、一度使ってみてください!
インストールしているフォントを一覧で確認できる「wordmark