- 投稿日：2021-04-12T22:13:28+09:00
【CSS】max, min, clamp関数内で「0」指定が使えない
概要 CSSで値を0px,0%などを使用する時、以下のように省略して0を使用できます。 top: 0px; /* top: 0px;と同じ意味 */ top: 0; 同じ様な考えで以下のように記述できる気がします。 left: max(1000px, 0); しかし、実際にはmax関数では単位を省略すると比較が出来ないという理由から、省略すると「invalid property value」というエラーになります。 解決法 単位指定をつけると大丈夫です。 left: max(1000px, 0px); ※stylelintでの対応 自分がこのエラーにハマった理由は、stylelintのlength-zero-no-unitのルールによって、0px指定が使えなかったためです。 この問題については、すでにissuが上がっており、修正されていました。 今後のリリースで修正されそうです。
- 投稿日：2021-04-12T19:37:26+09:00
【CSS・SCSS】ファーストビュー表示速度改善｜クリティカルCSSとは？使い方について
CSSの設計方法でクリティカルCSSに触れたので、考え方、目的、使い方をまとめてみた。 クリティカルCSSとは？ ファーストビューに必要なCSSのみをページheadタグ中にstyleタグで埋め込み、それ以外のスタイルは</body>の上でlinkタグで読み込む。 styleタグで読み込む時はphpのfile_get_contentsメソッドを使う。 ▼目的 ページの読み込み速度改善のため。linkタグを使うとファイルの読み込みのため、クローラーがレンダリングをストップしてしまい描画が遅れる。 file_get_contentsとは？ PHPのメソッドの一つ。・file_get_contents(URL)指定したURLの内容を読み込んで丸毎表示する。 htmlの中で使う時は以下のように記述する。 <style type="text/css"> <?= file_get_contents(CSSのURL)?> </style> <?= ?>は<?php echo ?>の省略形で指定した変数などを文字列として表示する。 実装手順 インラインで表示するファイルの準備 linkタグで読み込むファイルの準備 htmlファイルで読み込み 1. インラインで表示するファイルの準備 public > css > inview.css ファイル名はなんでもいいがhtml（ビュー）の中(in)に記述するということでinview.cssとしている。 2. linkタグで読み込むファイルの準備 public > css > overview.css ファイル名はなんでもいいがhtml（ビュー）全体のスタイルになるので、overviewとしている。 3. htmlファイルで読み込み .html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> <?= file_get_contents( 'inview.cssへの絶対パス' ); ?> </style> </head> <body> <link href="overview.cssへの相対パス" rel="stylesheet"> </body> </html> Laravelでscssを使って実装する手順 応用編としてLaravelで実際に使う場合の例。 前提として、 - Larvel MixでWebpackを使ってコンパイルしているプロジェクト。 - cssの設計はFLOCSSを使用 （参考） ・Laravel Mixの使い方 ・FLOCSSとは？ resources > sass 配下にファーストビューで使うcssのみをimportしたinview.scssを作成する。 resources > sass 配下にファーストビュー以外のcssをimportしたoverview.scssを作成する。 Laravel Mixでコンパイル対象のファイルを設定する。 resources > views > layouts の中に共通レイアウト用のビューを作成する。 1. ファーストビューで使うcssのみをimportしたinview.scssを作成する inview.scssの例 inview.scss @charset 'utf-8'; // foundation @import "foundation/variable"; @import "foundation/mixin"; @import "foundation/normalize"; @import "foundation/base"; // layout @import 'layout/grid/grid'; @import "layout/header"; @import "layout/container"; // object - component @import "object/component/breadcrumb"; @import "object/component/title"; @import "object/component/btn"; @import "object/component/link"; @import "object/component/pagenation"; @import "object/component/error"; // object - project // object - utility @import "object/utility/display"; @import "object/utility/space"; @import "object/utility/typography"; 2. ファーストビュー以外のcssをimportしたoverview.scssを作成する overview.scssの例。 overview.scss @charset 'utf-8'; // foundation @import "foundation/variable"; @import "foundation/mixin"; // layout @import "layout/footer"; ここでは、footerのレイアウトのみ読み込んでいる。 variableとmixinはコンパイルするときに必要になるファイル。 3. Laravel Mixでコンパイル対象のファイルを設定する resources/sass/*.scssにマッチするファイルを'public/css'配下に.cssとしてコンパイルするよう設定を記述する。 webpack.mix.js const mix = require('laravel-mix'); const glob = require('glob'); glob.sync('resources/sass/*.scss').map(function(file) { mix.sass(file, 'public/css') .options({ processCssUrls: false, postCss: [ require('autoprefixer')({ grid: true }) ] }) .version() }) ・autoprefixerとは？ 必要なベンダプレフィックスを自動で付けてくれる便利なツール。 ・Laravel以外でLaravel Mixを使う場合はglob.sync~の上に以下を記述する。 mix.setPublicPath('./public') これがないとコンパイル後のファイルがpublic配下に生成されない。（コンパイルが途中で止まる） 4. 共通レイアウト用のビューを作成する ざっくり必要な物をまとめると以下のようになる。 meta情報。$metaという変数で渡す OGPの設定。FacebookやTwitterなどのSNSでの表示 Favicon と Apple Touch Iconの設定 ファーストビューのcssの読み込み。inview.css jsonld用のセクション header用のセクション 本文用のセクション footer用のセクション トップに戻るボタン ファーストビュー以外のcss読み込み。overview.css JavaScriptファイルの読み込み あとは必要に応じて、canonicalを設定したり、meta情報を変更するサービスや条件分岐を入れたり。 layouts>base.blade.php <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <meta name="description" content="{{ $_meta['description'] }}"> <meta name="keywords" content="{{ $_meta['keywords'] }}"> <title>{{ $_meta['title'] }}</title> <!-- OGP --> <meta name="twitter:card" content="summary_large_image"> <meta property="og:site_name" content="{{ $_meta['site_name'] }}"> <meta property="og:title" content="{{ $_meta['title'] }}"> <meta property="og:description" content="{{ $_meta['og_description'] ?? '' }}"> <meta property="og:type" content="website"> <meta property="og:url" content="{{ url()->current() }}"> <meta property="og:locale" content="ja_JP"> @if (isset($_meta['og_image'])) <meta property="og:image" content="{{ $_meta['og_image'] ?? '' }}"> @endif <meta name="csrf-token" content="{{ csrf_token() }}"> {{-- Favicon & Apple Touch Icon--}} <link rel="icon shortcut" href="{{ asset("/img/favicon.ico") }}"> <meta name="apple-mobile-web-app-title" content="{{ $_meta['siteName'] }}"> <link rel="apple-touch-icon" href="{{ asset("/img/apple-touch-icon.png") }}"> <link rel="shortcut icon" href="{{ origin_url( asset("/img/favicon.ico") ) }}"> <link rel="manifest" href="{{ asset('/site.webmanifest') }}"> <meta name="msapplication-TileColor" content="#da532c"> <meta name="theme-color" content="#fff"> {{-- ファーストビューのcssの読み込み --}} <style type="text/css"> <?= file_get_contents(public_path('css/inview.css')); ?> </style> @yield('jsonld') </head> <body> @include('layouts.header') <main id="l-body" class="@yield('contentClass')"> @yield('content') </main> @include('layouts.footer') <div id="js-btn-to-top" class="c-btn-to-top"></div> {{-- ファーストビュー以外のcss読み込み --}} <link href="{{ asset('css/core_overview.css') }}" rel="stylesheet"> @yield('cssCode') {{-- JS --}} <script defer src="{{ asset('js/app.js') }}"></script> @yield('jsCodeBody') </body> </html> 以上。
- 投稿日：2021-04-12T16:17:38+09:00
「Grid」を使用した聖杯レイアウト
「Grid」を使用した聖杯レイアウトについてまとめました。 ※使うメリットはdivタグの使用頻度が減り、コードが見やすい。 完成形 HTML 親子関係を作ること。 親のclassに「グリッドコンテナー」(grid-container)を指定し、レイアウト対象である「グリッドアイテム」を囲む。 <div class="grid-container"> <header>ヘッダー</header> <nav>ジャンル</nav> <main>メモ</main> <aside>辞書</aside> <footer>フッター</footer> </div> CSS グリッドラインで分割をする。 親クラス display: grid;を記述。 横を分割し、グリッドラインを作る。 grid-template-columns: 1fr 3fr 1fr; 縦を分割し、グリッドラインを作る。 grid-template-rows:1fr 6fr 1fr; ※今回はfr（比率）で区切る。px、%でもOK！ グリッドアイテム 区切ったグリッドラインの範囲を数値で指定する。 横は、grid-column: 始まりのライン / 終わりのライン; 縦は、grid-row: 始まりのライン / 終わりのライン; .grid-container { display: grid; grid-template-columns: 1fr 3fr 1fr; grid-template-rows:1fr 6fr 1fr; height: 100vh; } header { grid-column: 1 / 4; grid-row: 1 / 2; background-color: #E6FFE9; } article { grid-column: 2 / 3; grid-row: 2 / 3; background-color: white; } nav { grid-column: 1 / 2; grid-row: 2 / 3; background-color: #EEEEEE; } aside { grid-column: 3 / 4; grid-row: 2 / 3; background-color: whitesmoke; } footer { grid-column: 1 / 4; grid-row: 3 / 4; background-color: #E6FFE9; } 引用 https://goodsan.jp/wp/gridholy/ プログラミング初心者です。色々ご指摘頂けると幸いです。
- 投稿日：2021-04-12T14:26:33+09:00
独学でJavascriptを学んだ素人がもう一度1から学びなおす Part2
Sass/Scssを使ってみる cssについてはHTMLを多少学習した人であるなら、おそらくみんな最低限名前くらいは知っていると思う。しかし、Sassというものの存在は知らない人も多いのではないか。（私もその一人だった） 今回はSassの記述方法と特徴をまとめてみようと思う。 事前準備 Visual Studio CodeにLive Sass Compilerを追加しておく サンプル用HTML <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="container"> <button class="btn">Button</button> </div> </body> </html> ※linkタグの参照先はファイル名.cssにしておきます。（ファイル名.scssをcssにコンパイルする為） Sass $cWhite: white; $cBlack: black; .btn{ background-color:$cWhite; color:$cBlack; border: 1px solid $cBlack; padding: 10px 40px; font-weight: 600; cursor: pointer; margin: 50px 0; transition: all 0.5s; &:hover { background-color: $cBlack; color: $cWhite; } } 入れ子の中の&(アンパサンド)は親セレクタを意味する。 (今回だとclassがbtnである要素がマウスオーバされた時のスタイルを指定) 通常のCSS（コンパイル後） .btn { background-color: white; color: black; border: 1px solid black; padding: 10px 40px; font-weight: 600; cursor: pointer; margin: 50px 0; transition: all 0.5s; } .btn:hover { background-color: black; color: white; } 従来のcssだと、どのタグやclassに属しているかをそれぞれ分けて記載する必要があり、第三者には読みずらい点がある。一方Sassの場合、入れ子構造（ネスト）で記述出来る為、プロパティの記述されている箇所が一目瞭然。変なところでスタイルが重複したりしにくくなる。 感想 今回、初めてSass方式での記述をしてみたが、確かにこれはイケてる。 (サンプルの量が少なかったので、これだけだとメリットを感じずらいかもしれないが…) 自分と同じように初めて知ったという人は是非使ってみてほしい。
- 投稿日：2021-04-12T12:44:53+09:00
社会人2年間の集大成！占いサイトを作成した話⑥
社会人2年間の集大成！占いサイトを作成した話⑤のつづきとなります！ ついにこれがラストです！！ 特集画面の紹介 機能の紹介 特集１ 自分で考えるのはなかなか大変だったため、この文章は占いサイトからお借りしました。。 特集２ おやつ占いというのを他のサイトで見つけたので採用し、おやつの内容は自分で考えました。シンプルになりすぎないよう、各星座のところにイラストを追加してみました！ 特集３ この開運術は自分で考えてみました！このページに関してもシンプルにならないよう各題名のところにイラストを追加しています。このイラストはFontAwesomeのものを使用しています。 特集ページは統一感が出るよう同じCSSを使用しています！ 実装方法の紹介 特集画面のコンテンツ部分のHTML <section class="contents"> <ul> <li> <div class="exp"> <a href="contents3.html"> <img src="../../images/animal_usagi.png"> <span class="title">【2021年の運勢】生まれ年でわかる「最強の総合運」TOP3大公開!</span> </a> </div> </li> <li> <div class="exp"> <a href="contents2.html"> <img src="../../images/food_sweets.png"> <span class="title">星座別！2021年のラッキーおやつ占い</span> </a> </div> </li> <li> <div class="exp"> <a href="contents1.html"> <img src="../../images/oosouji_mado.png"> <span class="title">2021年の運勢をあげる「簡単開運術」4選</span> </a> </div> </li> </ul> </section> 画像と文字を押下した際にページ遷移するようにaタグでimageタグとspanタグを囲っています。 使用したCSS // 各特集ページの題名の下線をドットにする設定 .contents-title { border-bottom: 3px dotted rgba(220,220,220,.5); } .contents { text-align: left; } // 各特集ページの見出しの余白、位置、下線の設定 h2 { padding: 30px 30px 10px; text-align: left; border-bottom: 1px solid black; } // リスト項目の先頭に設定される「・」の削除 ul { list-style: none; } // 特集ページの見出しの下線の設定 .exp { border-bottom: 1px solid#e5e5e5; } // 特集ページの見出しの画像の余白、大きさの設定 .exp img { padding: 15px 10px 10px; width: 170px; height: 150px; } // 特集ページの見出しの文字の色、大きさ、余白、位置の設定 .title { color: black; font-size: larger; margin-top: 60px; position: absolute; } まとめ 特集サイトを作ろうと決めてはいましたが、自分で特集内容を考えるとなるとなかなか苦労しました。。今回は色々なサイトを参考にし、特集を作成していき無事完成しました！！ また、全体を通して色々な占いを考え想像以上にサイトを完成するのには苦労しました。作っていく中で自分の思い通りにサイトを作りたいという気持ちと妥協したい気持ちが揺れ動きどちらを優先するかというのを味わえたのは個人開発だからこそだと思いました。今後もwebサイトやアプリを作っていきたいと思います
- 投稿日：2021-04-12T09:55:49+09:00
必要だと気付いてもいなかったフロントエンド用リポジトリ7選
本記事は、Anurag Kanoria氏による「7 Repos I Didn't Know I Needed For Front-End」（2021年3月8日公開）の和訳を、著者の許可を得て掲載しているものです。 必要だと気付いてもいなかったフロントエンド用リポジトリ7選 より良いものをより早く作るのに役立つ、あまり知られていないリポジトリ。 Photo by Juan Rumimpunu on Unsplash はじめに 私たちは、汎用ツールやリソースが数回タップするだけで手に入る時代に生きています。しかも幸いなことに、そのほとんどが無料です。 新しいツールやより簡単な方法が見つかり、面倒で複雑なタスクを実行できれば、誰にとっても、特に開発者には嬉しいことです。 でも、より良く賢い方法があり、予想外の方法で時間を節約できることを知らない場合もあります。 この2年間で見つけたGitHubの素晴らしいリソースは、私をかなり助けてくれました。これらのうちいくつかは、その必要性さえ知りませんでした。 そこで、あなたもおそらく必要になるGitHubリポジトリのリストを作りました。 1. 33 JS concepts ソース 私はプログラミングをJavaで始め、その後Dartに移行しました。 JavaScriptに移行した時は、プログラミングの概念はほぼ同じなのに、全く新しい言語のように感じました。 33 JS Conceptsは、JavaScript初心者や、スキルアップして新しいことを発見したい人はここを見るだけで事足ります。 その名の通り、これは知っておくべき33のJavaScript必須概念と基礎のリストです。 クリーンコード、部分適用、配列メソッド、データ構造、Promisesなどのトピックに関する詳細な記事やリソースが見つかります。 このリポジトリはJavaScriptを学ぶのにぴったりで、全くの初心者でも大丈夫です。 コンテンツは初心者向けにアレンジされており、変数や構文など、重要で最も基本的なトピックから、徐々に高度なトピックへと紹介されていきます。 2. Art of Command Line ソース このリポジトリは、Linuxのコマンドラインをマスターするためのものです。 コマンドラインを使いこなすスキルは軽視されがちですが、真の開発者だけが、その必要性を理解しています。 このリポジトリの内容の多くは、最初はQuoraに掲載されていましたが、GitHubに移されていくつかの改良が加えられました。 このリポジトリは、初心者と経験者の両方を対象としています。これはLinux用ですが、MacOSのみ、Windowsのみのセクションもあります。 Linuxを使っていなくても、このリポジトリには目を通すことを強くお勧めします。 3. RealWorld ソース ウェブ開発分野で数ヶ月以上働いているなら、より早く、より簡単にものを作れる新しいフレームワークが、次々と登場していることに気付くはずです。 これは素晴らしいことのようですが、ウェブ開発を続けていると、新しいフレームワークの出現が異常に早く、すべてのフレームワークに追いつくのはほぼ不可能だと、ある時点で悟ります。 さらに、新しいフレームワークを学ぶには独自の難点があります。というのは、ほとんどのチュートリアルは、FacebookやMediumのような実際のアプリケーションではなく、基本的なTodoアプリの作り方を教えているからです。 そこで、RealWorldの出番です。 このリポジトリでは、バックエンドとフロントエンドのフレームワークの一覧から好きなものを選んで、ほぼMediumのクローンであるConduitというアプリを作ることができます。 バックエンドとフロントエンドはAPIで接続され、各フレームワーク（バックエンドとフロントエンド）は同じAPI仕様で設計されているため、どの組み合わせでも問題ありません。 目的は、好みの技術スタックでMediumの実際のクローンを提供することです。 4. Front-end Developers Bookmarks ソース このリポジトリは、かなり前から私の頼みの綱です。 すべての開発者が時々必要とする重要なリソースを厳選して集めています。 このリストは、厳密にはフロントエンド開発者を対象としていますが、バックエンド開発者でも見る価値があります。 外観、ワークフロー、アーキテクチャ、ニュース、エコシステムなどに関するリソースを利用できます。 このリポジトリで最も興味深いものに、互換性セクションがあります。さまざまな入出力デバイスの連携に重点を置いています。 リポジトリが提供する情報は、この巨大なファイル1つにすべてまとめられています。 5. CSS Pro Tip ソース CSS Pro Tipは、CSSスキルの向上に役立ったリポジトリです。 最もシンプルでありながら最も効果的なヒントやガイドを紹介しています。 SVGやCSSリセットを使うメリットなど、基本的な情報が分かります。 ミュートされていない自動再生ビデオを非表示にする方法など、巧妙なトリックやハックを教えてくれます。 このガイドは、すべてのCSSユーザーを対象としています。初心者も経験者も、ぜひ見てみてください。 あまり知られていない面白いCSSプロパティを紹介した記事も、ぜひ読んでください。 誰も話題にしないCSSプロパティ6選 多くの人が聞いたことのない面白いプロパティ javascript.plainenglish.io 6. Awesome Design Patterns ソース このリポジトリは、大規模アプリケーションの構築を計画している場合に最適です。 フロントエンドデザインパターンと混同しないでください。これは完全にワークフローとアーキテクチャが対象です。 アーキテクチャは基本的に、ファイルを構造化する方法や、コードが他のコードファイルと通信する方法を指します。 例えば、MVCアーキテクチャは、アプリケーションをモデル、ビュー、コントローラの3つの主要な論理コンポーネントに分けます。 大規模アプリケーションと小規模アプリケーションの違いは、コーディングファイルの数だけでなく、アプリケーションの拡張性に重要な役割を果たすアーキテクチャにもあります。 Go、C#、JavaScriptなど、有名な言語のほとんどにパターンがあります。 クラウド、サーバーレス、マイクロサービスのアーキテクチャも、このリポジトリで提供されています。 7. Awesome Cheatsheets ソース その名の通り、このリポジトリには、データベース、フロントエンド、バックエンドなどに関する大量のチートシートがあります。 チートシートは、特にフレームワークと言語の間を行き来する時には、有益で重宝するツールになります。 また、数ヶ月ぶりにその言語に戻ってきた時にも、主要な概念を網羅したチートシートがあると便利です。 例えば、このリポジトリのJavaチートシートは、一般的な構文や規則だけでなく、比較演算子や数学ライブラリなど、主要なメソッドや概念をすべてカバーしています。 このライブラリを必要に応じて見直せば、既知のことを学び直すために膨大な時間を無駄にしないで済むでしょう。 おわりに 必要だと思っていなかったツールやリソースを見つけると、いつもワクワクします。 多くの場合、私たちは、より良い別の方法を探したり、より簡単な方法がないか調べたりせず、物事をありのままに受け入れてしまいがちです。 このリストには、厳選されたコンテンツも、RealWorldのようなユニークなリポジトリもあります。 この記事を楽しんでいただけたなら、プログラミングスキルを身につけられる楽しいゲームの記事も読んでください。 コーディングスキル向上のためにするべき楽しいゲーム7選 さまざまなウェブ技術をマスターする、ありきたりではない方法 javascript.plainenglish.io 記事を楽しんでいただけたなら嬉しいです。 翻訳協力 この記事は以下の方々のご協力により公開する事ができました。改めて感謝致します。 Original Author: Anurag Kanoria Original Article: 7 Repos I Didn't Know I Needed For Front-End Thank you for letting us share your knowledge! 選定担当: @gracen 翻訳担当: @gracen 監査担当: - 公開担当: @gracen ご意見・ご感想をお待ちしております 今回の記事はいかがでしたか？ ・こういう記事が読みたい ・こういうところが良かった ・こうした方が良いのではないか などなど、率直なご意見を募集しております。 頂いたお声は、今後の記事の質向上に役立たせて頂きますので、お気軽に コメント欄にてご投稿ください。Twitterでもご意見を受け付けております。 皆様のメッセージをお待ちしております。
- 投稿日：2021-04-12T00:38:07+09:00
【コピペ用】画像の比率を１：１に切り取るCSS
画像ファイルに比率を１：１にしたいと思ったことありませんか？ 少なくとも１度は思うこと。 今回はそんな悩みをコピペするだけで解決できる方法をお教えします。 コピペの量も全く多くないので、是非ストックして必要な時にコピペしてください。 この記事を書くにあたってYoutuberのトラハックさんの以下の動画を参考にさせて頂きました。 ・Cloud Storageに画像をアップ&プレビュー&削除【日本一わかりやすいReact-Redux講座 実践編#5】 本当にトラハックさんの動画は分かりやすい！ ぜひ皆さんもご覧ください！！！ 対象のHTMLタグを用意 imgタグの親要素にdivタグを用意し、以下のようなクラス名を付けて下さい。 <div className="p-media__thumb"> <img alt="1:1に切り取る" src="" /> </div> CSSをコピペ 後は以下のCSSをコピペするだけ。 .p-media__thumb { position: relative; overflow: hidden; width: 100% } .p-media__thumb::before { content: ""; display: block; padding-top: 100%; } .p-media__thumb > img { position: absolute; object-fit: cover; object-position: center; top: 0; left: 0; width: 100%; height: auto; } これで画像が1:1に切り分けられます。 楽チン！ Thunk you for reading
- 投稿日：2021-04-12T00:11:11+09:00
【aタグ】リンクを新しいタブで開く仕様にする方法
aタグとtarget 属性 表示先をtarget属性を使用して設定することができる。 一般的なaタグ <a href="ここにリンク先のURLを入れる">○○○○○</a> 同じタブで開く <a href="ここにリンク先のURLを入れる target="_self">○○○○○</a> or <a href=ここにリンク先のURLを入れる">○○○○○</a> 新規タブで開く <a href="ここにリンク先のURLを入れる" target="_blank">○○○○○</a> <-セキュリティを考慮する場合以下を用いる-> <a href="ここにリンク先のURLを入れる" target="_blank" rel="noopener noreferrer">○○○○○</a> 以上