読者です 読者をやめる 読者になる 読者になる

frontendmemo

このサイトは、「html、css、js、ツールなどについて、自分が覚えたこと、またはいつも忘れて調べることを書き溜め、それが結果といて勉強したての初心者の方や自分と同じような技術レベルの人の助けになることを目的とするWebログ」、略してブログです。挨拶→http://frontendmemo.hatenablog.com/entry/2016/06/25/115845

プログラミング、コーディング用語の読み方を決める

コーディングをしてると、単語は書けるが、読み方がわからないということが何度かあります。
コーダー、プログラマあるあるだと思いますが、読み方で戦争になったり、恥ずかしい思いをしたり。

どっかに正解はないのかと普段思っていました。

そんな折こちらのサイトを見つけました。

yomikata.org

ユーザーが読み方わからない単語を挙げて、その単語の読み方を投票形式で表示し、読み方を決定しようというものです。

規制なく投稿ができるため多少の荒れはありますが笑、結構参考になります。

例えば

width

cssプロパティで読み方が分かれる代表格ではないでしょうか。

1位のオッパイ、3位のウィーッスは置いといて

  • 2位ウィドゥス
  • 4位ワイズ
  • 5位ウィズ

というようにウィドゥスという読み方が一番多いことが分かります。

width の読み方|YOMIKATA

whatwg

  • 1位ワットダブリュジー
  • 2位ワットウィグ

none

  • 2位ナン
  • 3位ノーン
  • 5位ノン

(荒らしは外しています)

nativeの発音に近いナンが多いことがわかります。

まとめ

読み方を間違う前に一度こちらのサイトで確認すると良いかもしれません。
そもそも英語圏の人がなんて言ってるか聞ければいいんですけどね。
英語圏の人も分かれたりするのでしょうか。

新卒研修でhtml、cssの講師を担当した

会社の新卒研修でhtmlとcssを担当したので、その感触と教える側の心構えとして学んだことを書いておこうと思います。

内容

css講義
課題

感触

うちの会社の新卒はディレクター、コーダー、デザイナーまたはその他で職種が別れてるのですが、今年はコーダーが不作で希望者が少ないようです。
もちろん経験者、未経験者入り乱れての研修なので理解に差はありました。今は思い通りにいかない、覚えることが沢山あって大変な方も基本的にやる気があれば何とかなるんじゃない?と軽く考えてます笑

未経験者の躓き所

  • クラス名がつけれない
  • 親のセレクタを関連させれない
  • 命名ルールが作れない
  • デザインの再現性が低い
  • セマンティックなマークアップになっていない
  • 汎用性を考えたcssになっていない

汎用性運用性を考慮したマークアップについては、経験者でも気にされていないところがありました。

コーディングに関しては、経験がモノを言う場合も多々ありますから、実務を通して何度も壁にぶち当たって頑張って欲しいです。

教える側の心構え

今の若者がそうなのか、たまたまなのか、こちらの空気作りの問題なのか、わからなくても質問せず、ずっと悩んで間違えたまま走るから、全然違う場所に辿り着くみたいな新卒の方も何名かいました。途中からこちらから話しかけるようにしましたが、誰がどこで躓いてるのかわかりにくいものですね。大丈夫な顔してる人が大丈夫じゃなかったりします笑
そういえば、自分も半信半疑でコーディングして取り返しのつかないところで先生に聞いて先生の顔を真っ青にしたこともあったな、なんてことを思い出しました。
心構えというか、そういうものだと認識していればこちらの行動も変わりそうですね。

【css】リンクの文字色とアンダーラインの色を変える方法

通常リンクテキストに
text-decoration:underline;
を当てるとそのまま文字色と同じ色のアンダーラインが付きますよね。

See the Pen vmGLGo by funclur (@funclur) on CodePen.


リンクの文字色とアンダーラインの色を変えるには?

a要素の中にspanなどを入れてcolorを変えれば、リンクの文字色とアンダーラインの色を変えることができます。
つまりunderlineはa要素の文字色に依存するので、spanで文字色を設定すればよいのですね!
a要素にborder-bottomにするよりこちらの方が使い勝手的にもよさそうです!

See the Pen XRdXJE by funclur (@funclur) on CodePen.

【CSS】table-cellにtext-overflowを効かせる

text-overflowプロパティは厄介なもので、特定の条件下でないと効いてくれないことが多々あります。

先日書いたものはselectbox内でJsを使用して3点リーダーを表示させるものでした。
www.frontendmemo.xyz

今回はdisplay:table-cell内のテキストにtext-overflowを効かせるやり方です。
display:table-cell内でtext-overflowが効かない理由はよくわかりませんが、max-width:1pxで効くようになります。
これもよく理由がわかりません。わかる方はコメントいただきたいです。

デモを載せておきます。

DEMO

See the Pen aWvGEe by funclur (@funclur) on CodePen.


おまけ

また、2行目や3行目からtext-overflowを効かたいという要望があることもあるでしょうが、こちらは現実的じゃないかと思います。
理由としては改行して2行目のwidthを越した分3点リーダーを付けることはできるが、レスポンシブデザインやスマホでは幅が可変の為、
改行の位置にずれが出てきてしまう、という点とPCの場合でも更新頻度が高い所では運用コストが上がってしまうことが理由として挙げられます。

table-cellにtext-overflowを効かせる

text-overflowプロパティは厄介なもので、特定の条件下でないと効いてくれないことが多々あります。

先日書いたものはselectbox内でJsを使用して3点リーダーを表示させるものでした。
www.frontendmemo.xyz

今回はdisplay:table-cell内のテキストにtext-overflowを効かせるやり方です。
display:table-cell内でtext-overflowが効かない理由はよくわかりませんが、max-width:1pxで効くようになります。
これもよく理由がわかりません。わかる方はコメントいただきたいです。

デモを載せておきます。

DEMO

See the Pen aWvGEe by funclur (@funclur) on CodePen.


おまけ

また、2行目や3行目からtext-overflowを効かたいという要望があることもあるでしょうが、こちらは現実的じゃないかと思います。
理由としては改行して2行目のwidthを越した分3点リーダーを付けることはできるが、レスポンシブデザインやスマホでは幅が可変の為、
改行の位置にずれが出てきてしまう、という点とPCの場合でも更新頻度が高い所では運用コストが上がってしまうことが理由として挙げられます。

【JavaScript】クロージャを使って10回ボタンを押したらアラートを出す

下記を参考にクロージャを使って10回ボタンを押したらアラートを出してみたいと思います。

[JavaScript] 猿でもわかるクロージャ超入門 5 クロージャを作る · DQNEO起業日記

クロージャの条件

  • 外の関数のスコープ内で変数を定義し、
  • 外の関数の中に関数(=関数内関数)を作って
  • その関数内関数から、先ほどの変数を参照する

クロージャの利点

  • 「状態を保持する関数」を作ることができます。
function count(){
    var x = 1;
    return function (){   
      x += 1;
      if(x === 10){
         alert('10回押されました')
       }
    };
}

var aler =  count(); 
$('button').on('click', function(){
  aler();
});

DEMO

See the Pen eWNXRV by funclur (@funclur) on CodePen.

【JavaScript】モジュールパターンを学ぶ~スムーススクロール機能を実装~

モジュールパターンというものを最近知りました。プラグインでよく使われてる手法なのかなと思います。

モジュールパターンの参考記事

なぜモジュールパターンを使うか

上の記事によると利点は以下だそうです。

  • 他の処理との競合を防ぐ
  • 追加・置き換え・削除ができる
  • 機能別にコードを分割できる

といってもコードを書いてみないとわかりません。
上記記事を参考にしながら、スムーススクロールをモジュールパターンに置き換えてみました。

通常のスクリプト

  'use strict';
  var $win = $(window);
  /**
  * スムーススクロール
  */
  $.fn.smoothScroll = function(options){
    if(!this.length || this.attr('href') === '#'){
      return;
    }
    var o = $.extend({
      speed : 300, // スクロールの速度
      easing : 'swing' // スクロールの速度
    }, options);
    var self = this,
      speed  = o.speed,
      easing = o.easing,
      target, position, targetHref,
      hash = window.location.hash,
      // ブラウザを判定し対応している要素を変数にsetする
      $targetBody = $('html').scrollTop() > 0? $('html'): $('body');
    // 読み込み時にURLに#がある場合

    if(hash){
      $win.on('load', function(){
        self.trigger('click');
      });
    }
    this.on('click', function(){
      var $self = $(this);
      scroll($self);
    });
    // スクロールさせる関数
    function scroll($self){
      setPosition($self);
      $targetBody.not(':animated').animate({
        scrollTop : position
      }, speed, easing);
    }
    // 移動先の数値を取得するための関数
    function setPosition($self){
      // hrefの値を取得
      targetHref = $self.attr('href');
      // 移動先をアンカーを取得
      target = $(targetHref === '#top' ? $targetBody : targetHref);
      // 移動先の数値を取得
      position = target.offset().top;
    }
  };
  $('a[href^="#"]').smoothScroll();
})(window.jQuery);

モジュールパターンを使用したスクリプト

window.jQuery && (function ($) {
  'use strict';
  var $win = $(window);
  /**
  * スムーススクロール
  */
  var smoothScroll = smoothScroll || {
    util: {
      obj: {}
    }
  };
  smoothScroll.util.obj = (function(){
    var self = $('a[href^="#"]'),
      speed  = 300,
      easing = 'swing',
      target, position, targetHref,
      hash = window.location.hash,
      // ブラウザを判定し対応している要素を変数にsetする
      $targetBody = $('html').scrollTop() > 0? $('html'): $('body');

     var click = function(target){
      target.on('click', function(){
        var $self = $(this);
        smoothScroll.util.obj.scroll($self);
      });
    },
    scroll = function($self){
    // スクロールさせる関数a
      smoothScroll.util.obj.setPosition($self);
      $targetBody.not(':animated').animate({
        scrollTop : position
      }, speed, easing);
    },
    // 移動先の数値を取得するための関数a
    setPosition = function($self){
      // hrefの値を取得
      targetHref = $self.attr('href');
      // 移動先をアンカーを取得
      target = $(targetHref === '#top' ? $targetBody : targetHref);
      // 移動先の数値を取得
      position = target.offset().top;
    },
    init = function(){
      if(hash){
        $win.on('load', function(){
          $('a[href="' + hash + '"]').trigger('click');
        });
      }
    }
    init();
    return {
      click: click,
      scroll: scroll,
      setPosition: setPosition
    };
  })();
  smoothScroll.util.obj.click($('a[href^="#"]'));
})(window.jQuery);

DEMO

See the Pen oBxQbP by funclur (@funclur) on CodePen.


まとめ

以上、スムーススクロール機能をモジュールパターンに置き換えてみました。
詳しい説明は、自分が未だよくわかっていないので上記記事をご覧ください。
また、通常のスクリプトもグローバル環境汚染してるわけじゃないし、機能も追加できるし、はっきりとした利点が良くわかっていません。
ただかっこいいからモジュールパターン使っていこうかなという感じ笑

分かってきたらまた、ブログを更新するとします。