カテゴリーアーカイブ 言語

村上 著者:村上

【CSS】要素の幅や高さを指定する単位vw、vhとは

昨日の私の記事の中で紹介したCSSプロパティに

height : 100vh;

上記のようなものがありました。
今回はこのプロパティについてです。

 

この vw や vh とは要素の幅や高さを指定する時に使用する単位です。
viewport widthviewport height の略です。

ビューポートとは何かについては下記のサイトが参考になります。

実践!スマホサイトのviewport設定 – 第1回 viewportとはなにか?|CodeGrid
https://app.codegrid.net/entry/whats-viewport

ごく簡単に説明すると、ビューポートとは表示領域のことで、PCなどのデスクトップ環境では、ブラウザのウィンドウサイズにあたります。

そのため、例えば要素に

width: 100vw;

上記のように指定すると、このCSSを指定した要素の横幅は、ウィンドウの横幅100%となります。
ウィンドウ横幅 100%=100vw なので、width: 10vw; と変更すると、要素の横幅はウィンドウ横幅 1/10、つまり10%になります。
高さを指定したいときは、viewport height を使い、例えば height: 100vh; と記述すると、要素の高さはウィンドウの100%になります。

今まで通り、width: 100%; を使ってもいいのですが、これは親要素に対してのパーセンテージになるため、仮に親要素の幅が ウィンドウの50%の幅だった場合は、width: 100%;を指定しても、ウィンドウの横幅 50% にしか広がりません。
その点、vw、vh を使えば、親要素の影響なく、ウィンドウの画面サイズを基準に、幅や高さを指定することができます。

私は主に、スマートフォンの画面デザインの時に、calc() と一緒に下記のように使うことが多かったです。

height: calc(100vh - 100px);

上記のように指定すると、このプロパティを指定した要素の高さは、ブラウザの画面の高さから 100px だけ引いた高さになります。
そのため、わざわざJavaScriptで画面の高さを取得して、そこから 100px 引いて、そしてCSSの高さを再指定して…ということをしなくて済むので、かなりコードがすっきりしました…!

 

以上、要素の高さや幅を指定するビューポートの単位 vw、vh についてでした。
なお、他にも vmax や vmin というものもあるそうですが…こちらは使ったことがないので、今回は割愛します。
興味のある方は、ご自分で調べてみてください。

  • この記事いいね! (0)
村上 著者:村上

【CSS】知らないプロパティがあるかも「「出会えたことに感謝したいCSSベスト3」まとめ」

今回の記事は、「#出会えたことに感謝したいCSSベスト3」というTwitterのタグをまとめたサイトについて。
見ているだけでも、私の知らないCSSプロパティばかりで、かなり参考になりそうだったので紹介します。

サイトへのリンクはこちらから。

「出会えたことに感謝したいCSSベスト3」まとめ(随時更新中)
https://togetter.com/li/1216261

 

流し読みしているだけでも、知らないプロパティがわんさか出てくるので、かなり勉強になります。
中でも良く挙げられているのが「display: flex;」というプロパティでした。
こちらはこのプロパティを指定した直下の要素が並列になるというものです。
使ったことはないのですが、調べた感じではとても便利そうでしたので、機会があったら是非使ってみたいですね。

あとは、以前紹介した calc プロパティも挙げられていました。
私もこれは凄く便利だと思うので、TOP3の中に入れると思います。

ちなみに、私が挙げるとしたらこんな感じ。

  1. calc
  2. height: 100vh;
  3. transform: translate(-50%, -50%);

calc が 1位なのは譲れませんね。
2位は、高さを画面の 100% にしてくれる vh という単位で、これにはかなり助けられました。
3位の transform: translate(-50%, -50%); は、要素を左右上下中央揃えにしたいときに重宝しています。

 

当たり前ですが、CSSのプロパティって知らないと使えないので、こんな風に色んな人が「これ良いよ!」と紹介してくれると、知らなかったプロパティに出会えて凄く参考になります。
調べるにも限度があるので…こういうまとめサイトも積極的に目を通してみようかと思います。
興味があれば是非見てみてください!
Webデザイナーさん以外の方でも参考になると思います。

  • この記事いいね! (0)
村上 著者:村上

【HTML】フォームデータの送信先を指定する「formaction」属性

デバックのためにコード見ていて、使ったことがない属性だったので、覚え書きとして。
HTML の Button要素である、「formaction」属性についてです。
なお、今回参考にさせていただいたサイトはこちら。

formaction属性 ≪ button要素 ≪ フォーム ≪ 要素 ≪ HTML5入門
http://html5.cyberlab.info/elements/forms/button-formaction.html

 

私がよく使うFormの書き方ですが、


<form action="データ送信先" method="post">
    <input type="text" name="name">
    <input type="email" name="email">
    <input type="submit" name="submit" value="送信">
</form>

今まで、上記のように書いていました。

が、今回後輩君が書いたコードの中に、下記のような記述を発見。



<form action="[データ送信先URL]" method="post">
    <input type="text" name="name">
    <input type="email" name="email">
    <button type="submit" formaction="[データ送信先]">送信</button>
</form>


butoon要素に、見慣れない formaction という属性があります。

 

この「formaction」ですが、HTML5で新たに追加されたもので、フォームデータの送信先URLを指定するときに使う属性とのこと。
で、注意したいのが、button要素の formaction属性 で定した送信先URLは、form要素の action属性 で指定した送信先URLよりも優先されること。
そのため、下記の場合は、botton要素 で指定した「送信先URL2」が優先されます。



<form action="[データ送信先URL1]" method="post">
    <input type="text" name="name">
    <input type="email" name="email">
    <button type="submit" formaction="[データ送信先2]">送信</button>
</form>


私の場合、うっかり違うURLを指定してしまい、違う送信先に送られる!?ということをやらかしそうです。
それを回避するためには、冒頭で挙げた記述方法を使うのが良さそうですね。

 

ということで、見慣れない formaction属性 についてのまとめでした。
これ便利!使おう!というよりも、こんな属性あるよ!という意味合いの方が強いまとめでした。

  • この記事いいね! (0)
村上 著者:村上

【jQuery】指定した要素に class を追加・削除する方法

今日、後輩くんに質問されたので、自分の覚書としてもまとめ。
要素に指定したクラスを削除する方法です。
もちろん、削除だけでなく、追加もできます。

参考にしたサイトはこちら。

jQuery classの追加・削除 – Qiita
https://qiita.com/NobuyaIshikawa/items/300739f6da6a95e58306

 

使うメソッドは、addClass()removeClass() です。

・addClass()

使い方は下記の通り。

<div id="content">クラスを追加する要素</div>
$("#content").addClass("add");

上記の jQuery を実行すると、id=”content” を指定したDIV要素に対して、class=”add” が追加されます。
 

・removeClass()

removeClass() の使い方は下記の通り。

<div id="content" class="remove">クラスを削除する要素</div>
$("#content").removeClass("remove");

こちらを実行すると、class=”remove” が DIV要素から削除されます。
 

・toggleClass()

こちらは今回調べて初めて知ったメソッドですが、要素に指定したクラスがあったらクラスを削除し、クラスがなかったらクラスを追加する、というものでした。
これなら、要素があるかどうかを調べる hasClass() を使って検索し、その結果で条件分岐…という処理を書かずにすみますね。
具体的には下記のとおりです。

if($("#content").hasClass("add")){  // add という class があるかを調べる
    $("#content").removeClass("add");  // あったら削除
} else {
    $("#content").addClass("add");  // なかったら追加
}

上記の処理が、下記の一行で済みます。

$("#content").toggleClass("add");

これは楽ですね!
見慣れないと、逆に何をしている処理なのかがわかりにくいので、コメントが必須かもしれませんが…コードの行数が少なくてすむ&簡略できるのは嬉しいです。

 

ということで、jQuery で class の追加・削除を行う方法でした。

  • この記事いいね! (0)
村上 著者:村上

【CSS】アルファベットの大文字・小文字での表示を指定する方法

私の場合は、小文字が強制的に全て大文字になってしまったのがきっかけで調べたプロパティです。

使用するプロパティは「text-transform」です。
こちらは、アルファベットを大文字もしくは小文字で表示するかを指定できます。
指定できる値は下記のとおりです。

表示される文字の形式
none 初期値。大文字・小文字は記述した通りに表示されます
capitalize 単語の先頭文字を大文字で表示します
lowercase 全ての文字を小文字で表示します
uppercase 全ての文字を大文字で表示します

私は none を使いましたが、capitalize も便利そうですね。
が、たまに頭文字を大文字にしたくない時もあるので、そういうイレギュラーなときのことも考えると、none を使うのが無難かな。
で、今回すべての文字が大文字になった原因は、恐らく text-transform: uppercase; が body など結構上位の要素の方に指定されていたためだと思われるので、body で !important を使って強制的に上書きしました。
とりあえず、これで解決です。

 

以上、アルファベットの大文字・小文字での表示を指定する方法でした。
何故か小文字で書いたはずの英単語がすべて大文字になる!という場合は、こちらのプロパティが記述されていないか疑ってみてください。

  • この記事いいね! (0)
村上 著者:村上

【Xcode】Type ‘UISlider’ does not conform to protocol ‘ValidatableInterfaceElement’エラーへの対処法

久しぶりに遭遇したXcodeでのエラーです。
特に内容を変更した記憶のないアプリを開いてみたら、いきなりビルドエラーが発生しました。
エラー分は下記のとおりです。

Type 'UISlider' does not conform to protocol 'ValidatableInterfaceElement'

どうやら、CocoaPodでインストールした「Validator」というライブラリ内部でエラーが発生していたことまでは突き止めたのですが、その原因がわからず…検索してもヒットしない状況でした。
なお、Validator についてはこちらから。

GitHub – adamwaite/Validator
https://github.com/adamwaite/Validator

が、会社にあるもう一台のMacbookでは問題なく動いていたので、そこが謎でした。

 

で、色々見てみた結果、どうやらXCodeのバージョンが影響していたことが判明!
先日、Xcode をアップデートして 9.3 にしたのですが、これを 9.2 に戻したら問題なく動き、ビルドも完了しました。
……Xcodeは不用意にアップデートしてはだめですね…。

なお、Xcodeの以前のバージョンをインストールする方法は、下記の記事を参考にしました。

Xcodeの旧バージョンをインストールする方法 – Qiita
https://qiita.com/TsukasaHasegawa/items/0d7d5c2cf3a2b8ce8993

ただ、ダウンロードに凄く時間がかかったので、何か別の作業をしながらのんびり待つことをおすすめします。
ダウンロード時間が「残り約60分」の表示を見た時は、正直ため息を付きそうになりました…。

 

ということで、ビルドエラーの解消方法でした。
同僚に聞いたところ、Xcode のバージョンの違いのせいで発生するバグってあるようなので、バグの原因が分からないときに確認するようにしましょう。

  • この記事いいね! (0)
村上 著者:村上

【CSS】要素に指定したCSSスタイルを解除する方法

今回はCSSを解除する方法について。
複数のCSSファイルを適用しているサイトで、指定した要素に既に別のスタイルが指定されている場合があるかと思います。
で、その既に設定されているCSSスタイルを解除する方法です。

参考にさせていただいたサイトはこちらから。

CSSのスタイルを解除する – Qiita
https://qiita.com/kijitora-neko/items/155b1bc499a365ea1e3f

 

スタイル解除に使うのは、initial という値です。
これを、スタイルを解除したいプロパティの値に指定するだけ。

指定方法のサンプルは下記のような感じです。

div {
    display: initial;
}
span {
    text-align: initial;
}

解除方法はたったこれだけです。

 

ということで、CSSスタイルを解除する方法でした。
!important を使って上書きする方法はありますが、解除は知らなかったので、これはなかなか使えそうです。

が、Internet Explorer 10 では動作しないとのことなので、動作確認は念入りにしてください。
また、プロパティによっては初期値がある場合もあるので、その時は初期値を指定したほうがよさそうです。
状況に応じて、便利に使いましょう。

  • この記事いいね! (0)
村上 著者:村上

【JavaScript】クライアント側にデータを無期限に保存できる「LocalStorage」

クライアント(ブラウザ)側にデータを保存する方法としては、Cookie がよく使われているかと思います。
が、個人的に使い勝手が良いと思っているのが、「Local Storage」です。

Local Storage も Cookie と同じように、ブラウザにデータを保存できます。
データの保存・取得・削除・全クリアなどの操作は、JavaScriptで行います。
Cookie と LocalStorage の違いをまとめた表はこちら。

別ウィンドウでのデータ共有 データの有効期限 データ量の上限 サーバーへのデータ送信
Cookie できる 指定期限まで有効 4KB サーバーへアクセスするたびに毎回自動送信
LocalStrage できる 永続的に有効 5MB 必要時のみスクリプトやフォームなどで送信

なお、こちらの表は、下記のサイトから転載させて頂いております。

Web Storage ‐ HTML5のAPI、および、関連仕様
http://www.htmq.com/webstorage/

 

具体的な使い方は、下記のとおりです。
 

・データの保存、上書き

window.localStorage.setItem('nickname', 'murakami');
localStorage.nickname = 'murakami';

上記のどちらでもOKです。
個人的には、上の書き方の方が好みなので、こちらを使っています。
なお、1つめの記述方法ですが、window は省略可能です。
 

・データの取得

var name;
name = window.localStorage.getItem('nickname');
name = localStorage.nickname;

取得するための記述はこんな感じ。
なお、こちらの書き方についても、window は省略できます。
 

・データの削除

window.localStorage.removeItem('nickname');  // 'nickname'の値を削除
window.localStorage.clear();  // 全削除(初期化)

最後はデータの削除ですが、アイテム名を指定して、その値のみを削除する方法と、全データを削除する方法があります。
無いとは思いますが…書き間違えにご注意ください。
なお、例にもれず、こちらも window を省略可です。

 

個人的には、Cookie よりも直感的に操作出来るし、意図的にデータを消さない限りデータが半永久的に残るので使いやすいです。
Cookieで苦しめられた記憶のある方は、こちらの Local Storage の導入を検討してみてはいかがでしょうか。

  • この記事いいね! (3)
村上 著者:村上

【JavaScript】クリックイベント等で取得したオブジェクトの中身

JavaScrip の クリックイベント等で、よく下記のようなコードを書くかと思います。

$("#button").on("click",function(event){
    // クリック時に実行したい処理
});

で、この時に取得できるオブジェクトから取得できる値の中で、使用頻度の高そうなものをまとめてみました。
今までは、イベントをキャンセルする event.preventDefault(); くらいしか使ったことがなかったんですよね。

 

・DOM要素の取得

var dom = event.target;

クリックしたDOM要素を取得できます。
が、これはこのまま使うよりも、後述する、ID・class名の取得と一緒に使う事の方が多そうですね。
 

・クリックした座標の取得

// x座標
var x = event.x;
// y座標
var y = event.y;

こちらはクリックした位置を取得できます。
click イベント以外にも、mousemove イベントや touchmove イベントでももちろん使えます。
 

・ID、class名の取得

// ID名取得
var id = event.target.id;
// class名取得
var class = event.target.className;

先述した、DOM要素の取得で取得できた要素の ID名、class名を取得できます。
 

・要素の幅と高さ

var width = event.target.offsetWidth;
var height = event.target.offsetHeight;

target で取得できた要素の幅と高さを取得する方法です。
単に width、height と記述しただけでは取得できないので、そこは要注意ですね
 

・要素のスタイル

var eventType = event.target.style;

要素のスタイルを取得できます。
これは .css() メソッドと一緒に使うことが多そうかな?
 

・イベントタイプの取得

var eventType = event.type;

イベントの種類を取得する方法です。
これも便利そうですね。

個人的には、要素名を取得するメソッドがあるとよかったのですが、無さそうだったので…今回はclass名の取得で対処しました。
まあ、でもclass名でも問題はなかったです。
…良く思うのですが、一度アルゴリズムでハマって考え込んでしまうと、「このやり方でなければいけない」と思い込んでしまうので、柔軟な発想って重要だなとつくづく思います。

 

以上、クリックイベント等で取得したオブジェクトから取得できる値の一覧でした。
他にも、要素の親要素・子要素を取得する方法もありましたが、今回は割愛します。
詳しくは、今回参考にさせていただいた下記のサイトをご覧ください。

【JavaScript】クリックイベントで取得したオブジェクトの使い方 まとめ|Web制作会社スタイル
http://www.hp-stylelink.com/news/2014/04/20140422.php

  • この記事いいね! (0)
村上 著者:村上

プログラミング初心者におすすめの学習動画サイト「ドットインストール」

HTMLなど、プログラミングの勉強方法でおすすめなのが、こちらの「ドットインストール」というサイトです。

ドットインストール – 3分動画でマスターする初心者向けプログラミング学習サイト
https://dotinstall.com/

1つが約3分程の動画になっており、長すぎず見やすいです。
私も先輩スタッフにこのサイトのことを教えてもらいました。

 

実際の画面はこんな感じ。

こちらはHTMLのレッスン1「#01 HTMLとはなにか?」の画面です。
動画なので、分からないところを繰り返し聞けておすすめです。

また、学習できる言語は、HTMLのほかにも、CSS、JavaScript、jQuery、PHP、Ruby などがあります。
さらに、業務で使えそうなWordPress入門だったり、Android、iOSアプリの作り方だったり、サーバ環境の作り方だったり、ゲームプログラミングについてのレッスンもあります。
レッスンは、目的別で分類してあるので探しやすいです。

有料会員でないと見られない、中・上級者向けのプレミアムコンテンツもありますが、初歩的なことを勉強するなら、無料会員でも問題はなさそう。
少なくとも入門あたりであれば、どの言語・コンテンツでも見られます。
ちなみにプレミアム会員は、月額980円です。

 

ということで、おすすめのプログラミング学習サイトでした。
経験がある人には物足りないと思いますが、「プログラミングをやってみたいけど、何から勉強していいかわからない!」という入門者・初心者の方にはぴったりだと思います。
プログラミングを勉強したい人は、参考にしてみてください。

  • この記事いいね! (0)