What's New Qiita

20200209のCSSに関する記事は5件です。

  • 投稿日：2020-02-09T22:49:44+09:00

個人的にオススメしたいTech系YouTuberたち

僕は普段から『Qiita』以外にもプログラミングの情報収集を
『YouTube』で行っているので今回は
個人的にオススメしたいTech系YouTuberの方々と彼らの動画ベスト③を
紹介していきたいと思います！(独断と偏見が入っています笑)

①KENTA / 雑食系エンジニアTV

➡https://www.youtube.com/channel/UC_HLK-ksslL-Z_2wiIZDlMg

  • もう既にご存知の方も多いと思いますが、KENTAさんはプログラミングのみならずIT業界(自社開発、受託、SES等)に関しても深い知見があり今まで見てきたTech系YouTuberの中でもダントツに質の高い情報を提供されている方です。彼の動画はどの動画も有益だと思いますが中には忙しい方もいると思います。そこで、個人的に特にオススメしたい彼の動画ベスト③を発表します！

【第一位】モダンなIT企業を見極める7つの技術的チェックポイント

➡https://www.youtube.com/watch?v=Aw8w9qSdZtY

  • 就職される方や転職される方がモダンなIT企業を見極める際に重要となるチェックポイントを提示してくださっています！普通に有料級の情報だと思うのですがそれがYouTubeでタダで見れてしまうので恐ろしいですね（笑）

【第二位】良い質問をする技術 〜質問テンプレートのススメ〜

➡https://www.youtube.com/watch?v=P6yRjOyM4jU

  • 個人的に思う優秀な人の共通点が「質問力」が高いということ。「質問力」に自信のない方は見ておいて損はないかと思います！

【第三位】Web系自社開発企業さんへの転職に必要なポートフォリオのレベルとは

➡https://www.youtube.com/watch?v=N0yetny4Zco

  • Web系自社開発企業さんへの転職が難しくなってきている現実を知るのに有益かと思います！

ちなみにですが、僕は彼の雑食系エンジニアサロンに今月入会しました！
月額980円で参加できるサロンにしては
かなり質の高いコミュニティなのでは？と思います！

具体的に《サロンのどういう所が良いと思ったのか》と言うと、

①サロン内で技術に関して質問できる環境が整っていること
②アウトプット報告でサロン内のメンバー間で互いに高め合う環境があること
③ポートフォリオを見せ合いレビューし合う環境があること

(人によっては技術に関しての質問なんてteratailがあるから
不要と思う方もいるかもしれませんが、個人的な感想を言うとあのサービスのユーザーは
結構質問が無視されているケースも見かけるので何とも言えない感じがします。)

続いて二人目のTech系YouTuberを紹介していきます！

②【人生逆転エンジニア】アップスターツ

➡https://www.youtube.com/channel/UCczh4w4k5cjuZBKFqlIF3kw

  • コンテンツの内容はどちらかというと初心者向きな感じがします！ ポップなBGMを聞きながら楽しい雰囲気で情報をインプットできるかと思います！

【第一位】【年代別】プログラミング学習のゴールを教えます

➡https://www.youtube.com/watch?v=Zh7njKsR_U0

  • なぜこの動画を第一位に選んだのかというと 学習には「ゴール」を設定するべきだという持論があるからです。 「ゴール」を決めて「逆算」して学習していきましょう！

【第二位】エンジニアなら知っておきたいGoogle検索のコツ

➡https://www.youtube.com/watch?v=S22Bs-G5bZU

  • エンジニアとして働く以上「情報検索能力」いわゆる、「ググり力」も 大事な基礎スキルになってきます。その「ググり力」を身に着けるのに 良いヒントを提示してくれている動画ですので時間がある時に 是非とも視聴することをお奨めします。

【第三位】エンジニアが良く使う便利ショートカットキーを紹介！【13個】

➡https://www.youtube.com/watch?v=Yt92zqwCdyc

  • ショートカットキーもエンジニアが効率的にプログラミングするための 重要なスキルの一つなので是非とも習得してしまいましょう！

続いて、三人目のTech系YouTuberを紹介していきます！

③進撃する人【現役エンジニア】

https://www.youtube.com/channel/UC3mMWAA1Lo3rwMorseTcn2g

  • プログラミングスクールの実態や転職活動で経験したこと、SESの闇など 面白くて有益な情報を提供してくださる方です！

【第一位】プログラミング学習でおすすめの教材を紹介しよう

➡https://www.youtube.com/watch?v=vvAqUvek-60

  • 進撃する人が実際に使ったことのあるプログラミング学習教材 (progate, Udemy, ドットインストール, Techpit)で 各々の特徴とオススメ度を語ってくれています！

【第二位】未経験エンジニアが転職をするならwantedlyが最強な件について

➡https://www.youtube.com/watch?v=YgHvdxUdI0Q

  • なぜwantedlyがオススメなのかを語ってくれています！ 個人的に面白いと思う自社サービスをリリースしている企業さんも多いので 是非とも使ってみてほしいと思います！

【第三位】転職サイトでSESを見分ける方６つの方法とは！？

➡https://www.youtube.com/watch?v=UM1kajpU4JI

  • SESを見分ける際に使えるかなり有益な情報を発信してくださっています！

最後に四人目のTech系YouTuberを紹介していきます！

④くろかわこうへい【渋谷で働くクラウドエンジニアTV】

➡https://www.youtube.com/channel/UCX30pfp4p82rIiSJmBygADw

【第一位】未経験ループ脱出4つの基本戦略「未経験からIT業界に飛び込んだとき」を振り返る

➡https://www.youtube.com/watch?v=_kDIvVYy81U

  • 自分自身も就職活動をしている過程で認識したことですが、 日頃からQiita等の技術ブログでアウトプットしていることを 重視している企業さんは増えてきていると思います！

【第二位】未経験でも渋谷エンジニア業界のベテラン勢を簡単に追い抜ける2つの理由と給料に現れない市場価値

➡https://www.youtube.com/watch?v=TvHtaealnzg

  • 彼曰く、AWS や Docker や Git できれば kubenertes を習することで ベテランエンジニアとの差別化を図れるとのことです！

【第三位】バックエンドエンジニア5分類と意外と狙い目のポジションである3つの理由

➡https://www.youtube.com/watch?v=ujUFOi49Rwc&t=3s

  • なぜバックエンドエンジニアがオススメなのかを論理的に 分かりやすく解説して下さっています！

【番外編】

しまぶーのIT大学

➡https://www.youtube.com/channel/UCti6dG0zSAetLGGYcgNML4Q

  • 個人的に応援しているTeck系YouTuberです！ プログラミングだけでなく起業やスタートアップ界隈の情報も提供して下さる方なので 興味のある方はチャンネル登録をしておくことをオススメします！

とだこうき

➡https://www.youtube.com/channel/UCzZiw3exu_81WvN3DKRNXTA/videos

  • 最近YouTubeの活動をストップされているので番外編に入れさせて頂きましたが 彼の発信しているコンテンツもなかなか有益なのでは？と思います！

マコなり社長

➡https://www.youtube.com/channel/UC7I3QTra4_kC4TSu8f7rHkA

  • マコなり社長はエンジニア出身で現在株式会社divの代表取締役として 会社を経営されておられる方です！ 番外編に入れた理由ですが プログラミングに関する情報発信はほとんどされていないからです。 コンテンツの内容は「自己啓発」が多い印象です。 少しでもより良い自分になりたい方は 彼のYouTubeチャンネルを登録してみるのをオススメします！

迫 佑樹

➡https://www.youtube.com/channel/UCKxnXboujhwy7osAwu75-2w

  • 大学在学中にプログラミングのインターンに参加したり、 プログラミングのコンテストに参加して受賞したり、起業して自身で Skill HacksやFront Hacksなどのプログラミング学習教材を作ったり、 YouTubeで情報発信したりなど多方面で活躍されておられる凄い方です！ 番外編に入れた理由ですが、プログラミングに関する情報発信というより 内容が「ビジネス」寄りだからです。ただ内容自体は 見ていて個人的には勉強になるな～と思いながら勝手に勉強させてもらっています！

やまもとりゅうけん

➡https://www.youtube.com/channel/UCp60qNFmqRy7Q5ymP20dsGw

  • やまもとりゅうけんさんは数あるTech系YouTuberの方々の中で 「フリーランスエンジニア」になることを推奨されています！ 彼も迫 佑樹さんと同様に内容が「プログラミング」というよりは「ビジネス」寄り だったので番外編に入れました。ただ発信されているコンテンツは勉強になる内容が 多いので「プログラミング」だけでなく「ビジネス」も！という方にはオススメです！

以上で「個人的にオススメしたいTech系YouTuberたち」の紹介を終えます！
この記事を読んでくれた読者の方に少しでも参考になれれば嬉しいです(^^)

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-02-09T17:29:52+09:00

Webサイト制作で役立つカラーコードサイト5選

1. FLAT UI COLORS 2

FLAT UI COLORS 2
color1.png

2. Color

Color
color2.png

3. Color Hunt

Color Hunt
color3.png

4. Color Palettes Color Schemes

Color Palettes Color Schemes
color4.png

5. HTML Color Picker

HTML Color Picker
color5.png

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-02-09T17:11:36+09:00

Safariで別ページからのページ内リンクの位置がずれる問題はJSの影響だった

スマートフォンのコーディングをしていた時、
別ページからのページ内リンクを実装していたら、
一部リンクのみ勝手に1000pxくらい下にスクロールされて、位置がずれてしまった。

すでに実装してあったJSを全て削除してから試してみると、ちゃんと動いたので、
JSの機能を一つずつコメントアウトしてクリックを試してみたところ、
bxSlider部分が影響していることがわかった。

※bxSlider（スライダープラグイン）
https://bxslider.com/

原因

PCのChromeのエミュレーターは、bxSliderが整形し終わった後の高さを見込んでページ内リンクの位置を割り出すのに、
SafariはbxSliderが整形する前の高さを元にページ内リンクの移動をするようで...。

bxSlider 整形前
bxSlider 整形後

どう対処したか

bxSlider部分を囲んでいるタグに、整形後を見込んだheightとoverflow: hidden;を前もってかけておくと、
bxSliderの整形での高さのずれが出にくく、解決しました！

.section-member-list-wrap { /* スライダーするリストを囲うタグのclass */
    height: 235px;
    overflow: hidden;
}

その他の抜粋ソースコード

<nav>
    <ul>
        <li><a href="/index.html">Top</a></li>
        <li><a href="/index.html#vision">Vision</a></li>
        <li><a href="/service.html">Service</a></li>
        <li><a href="/index.html#company">Company</a></li> <!-- ←問題のリンク -->
    </ul>
</nav>

<section>
// コンテンツ内容は略
</section>

<section id="vision"> <!-- ←ここへはちゃんとたどり着く -->
// コンテンツ内容は略
</section>

<section>
    <div id="js-list-member" class="section-member-list-wrap">
        <ul class="list-member">
            <li>
                <figure><img></figure>
                <h3>名前1</h3>
            </li>
            <li>
                <figure><img></figure>
                <h3>名前2</h3>
            </li>
            <li>
                <figure><img></figure>
                <h3>名前3</h3>
            </li>
</section>

<section id="company"> <!-- ←ここはずれる -->
// コンテンツ内容は略
</section>


jQuery(function () {
    'use strict';

    // bxSlider
    jQuery('#js-list-member .list-member').bxSlider({
        mode: 'horizontal',
        moveSlides: 1,
        slideMargin: 12,
        infiniteLoop: true,
        slideWidth: 154,
        minSlides: 3,
        maxSlides: 3,
        speed: 300,
        pager: false,
        controls: false,
    });
});

動作確認環境

iOS 13.3 Safari

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-02-09T16:25:29+09:00

jQueryにおけるthisを使用する理由

個人的メモなので悪しからず。
main.js
$(function() {
$('#header').on('mouseover', function() {
    $(this).css('color', '#333');
  });
});

例で使われているon()メソッドのようにメソッドの第2引数に命令を渡すメソッドではその命令内でthisを使用できます。
なので上記のコードで使われているthisには#headerが格納されている。

main.js
$(function() {
    $('#header').on('mouseover', function() {
       $(this).css('color', '#ebc000');
    });
    $('#text').on('mouseover', function() {
       $(this).css('color', '#ebc000');
    });
});

header直下のthisにはheaderが格納されtext直下のthisにはtextが格納されます。

thisを使用する理由

・処理のパフォーマンスの向上
・関数に複数のセレクタを指定した場合に処理を分けられる

1つめの「処理のパフォーマンスの向上」に関しては$()関数が実行されるとブラウザはHTMLから要素を集める処理を行うため繰り返し実行された場合CPUに負荷がかかり処理に時間がかかる場合がある。
しかしthisを使用すると取得済みの要素を使い回せるのでHTMLから要素を集める処理を短縮できます。

2つめの「関数に複数のセレクタを指定した場合に処理を分けられる」は以下のコードをご覧ください。

sumple.js
$(function() {
     $('header, #text, footer).on('click, function() {
        $('header, #text, footer).css(
            backgroundColor: '#4182fd'
        );
     });
});

上記のコードだと関数に指定されている3つのセレクタのいずれかの要素にクリックすると全ての要素にcssメソッドが適応されてしまう。

sumple.js
$(function() {
     $('header, #text, footer).on('click', function() {
        $(this）.css(
            backgroundColor: '#4182fd'
        );
     });
});

thisを使用するとthisにはクリックした要素のみが格納されることになる。
例えばheaderをクリックするとheaderのbackgroundのみが変更される。

以上個人的メモでございました。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-02-09T02:58:40+09:00

FLOCSS設計ってどんなんだっけ？となった時に思い出せる簡単なメモ

概要

Found Layout Object CSSの略で、OOCSSやBEM、SMACSSの流れを受けて考案されたCSS設計思想

FLOCSS

Foundation

  • サイト全体のデフォルトスタイルを定義する
  • _reset.scss, _base.scss, _mixin.scss, _variables.scss

Layout

  • Objectの配置を決める
  • ページ単位で唯一の存在になるのでidセレクタを使う
  • 構造に関わる部分でProjectごとの整列用にflexやfloat解除につかったり、sitewidthを定義したりする程度の記述
  • _header.scss, _sidebar.scss, _footer.scss

Object

  • Component
    • 再利用可能なパーツ
    • プレフィックスにc-をつける（.c-btn, .c-btn_primary)
  • Project
    • Componentにするほどでもないパーツ(個々のページの中でしか使わない、１回しか使わないなど)
    • プレフィックスにp-をつける（.p-article, .p-article__title)
  • Utility
    • 汎用クラスで単一のスタイルを持つ
    • プレフィックスにu-をつける（.u-clearfix, .u-block)

命名規則ではBEMと同じ規則が用いられている

ディレクトリ構成

FLOのそれぞれの構造に合わせ、ディレクトリ構造も分割することでメンテナンスしやすくなる

css
|-- foundation
|   |-- _base.scss
|   |-- _reset.scss
|-- layout
|   |-- _main.scss
|   |-- _sidebar.scss
|-- object
    |-- component
    |   |-- _button.scss
    |   |-- _grid.scss
    |-- component 
    |   |-- _articles.scss
    |   |-- _profile.scss
    |-- component 
        |-- _clearfix.scss
        |-- _margin.scss
        |-- _text.scss

例

sample.html
<!-- flocss.html -->
<h1>FLOCSS</h1>
<!-- 以下、layout idセレクタを使う -->
<div id="countainer">
  <!-- 以下、component(module) c-を使う -->
  <ul class="c-menu">
  　　<!-- FLOCSSではmodifierをつける時マルチクラスパターンを基本とする -->
    <li class="c-menu__item c-menu__item--large">link</li>
    <li class="c-menu__item c-menu__item--active">active</li>
  </ul>
</div>
style.scss
.c-menu {
  list-style-type: none;
  &__item {
    width: 80px;
    margin-bottom: 5px;
    color: #4486F7;
    border: 1px solid #4486F7;
    text-align: center;
    &--large {
      width: 100px;
    }
    &--active {
      color: #fff;
      background-color: #4486F7;
    }
  }
}
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

日付別

タグ一覧