はてなブックマーク

• あとで読む

  #2 僕のJavaScriptの書き方

  4 users

  tsudoi.org

  • テクノロジー
  • 2020/05/20 18:34

  • JavaScript
• あとで読む

  SCSSのファイル設計について Vol.1　吉本式BEM設計（BEM設計ベース）

  4 users

  tsudoi.org

  SCSSのファイル設計について Vol.1 SCSSのファイル設計について、解説します。 ディレクトリ構造は次のようなテンプレートとなります。 - scss - base - mixin - module - page - pulgins - setting style.scss それぞれのディレクトリの役割は、次のようになります。 baseディレクトリ ベースとなるスタイルが定義さているSCSSファイルを格納するディレクトリです。 mixinディレクトリ mixinが定義されているSCSSファイルを格納するディレクトリです。 moduleディレクトリ サイト共通で使用するモジュール別にスタイルが定義さているSCSSファイルを格納するディレクトリです。 pageディレクトリ ページ単位で使用するスタイルが定義さているSCSSファイルを格納するディレクトリです。 pulginsディレクトリ

  • テクノロジー
  • 2020/02/15 23:56
• あとで読む

  SCSSのファイル設計について Vol.2　吉本式BEM設計（BEM設計ベース）

  3 users

  tsudoi.org

  SCSSのファイル設計について Vol.2 前回の記事の続きです、SCSSファイル設計について解説していきます。 必要なディレクトリ構成は次になります。 - scss - base - mixin - module - page - pulgins - setting style.scss 前回の記事で、baseディレクトリ、mixinディレクトリ、moduleディレクトリについて解説しました。 baseディレクトリに関しては、リセットCSS用の_reset.scssとサイト全体のベースとなる_base.scssが格納されます。 mixinディレクトリには、別Blockで同じスタイルが必要になった場合にmixinを定義するというルールで、mixinファイルを作成します。 moduleディレクトリには、サイト共通で使用するモジュール単位（Block単位）で定義されます。 また、吉本式BEM設

  • テクノロジー
  • 2020/01/27 16:13
• あとで読む

  BacklogのWebフック機能で、サーバー環境を自動デプロイする方法

  4 users

  tsudoi.org

  • テクノロジー
  • 2020/01/08 04:06

  • backlog
  • webhook
  • Git
  • development
  • 技術
  • web
• あとで読む

  【Vue.js】historyモードにした際の注意点

  4 users

  tsudoi.org

  • テクノロジー
  • 2019/09/19 17:11
• あとで読む

  Pugのファイル設計（LPなどの1ページ案件） | 吉本式 Web制作のコーディングガイドライン

  3 users

  tsudoi.org

  Pugのファイル設計について（LPなどの1ページ案件） Pugのファイル設計は、SCSSファイルの設計に比べて複雑ではありません。 実務を通して、色々と試してみましたが、ルールが統一されていれば、基本的には自分（チームや会社）が見やすいファイル設計で問題ないと思っています。 複雑なファイル設計にはならないので、第三者が見てもすぐにどのようなファイル設計になっているか理解できるはずです。 ただし、ルールが統一されているというのは重要なポイントです。 ルールが統一されていなければ、第三者が見たとき（引き継いだとき）に、どのようなファイル設計になっているのか判断ができません。 私の場合、LPなどの1ページ案件と、コーポレートサイトのような複数ページ案件で、ファイル設計のルールを分けています。 LPなどの1ページ案件に関しては、include（インクルード）ファイルを分けなくても問題ないと個人的に

  • テクノロジー
  • 2019/07/23 13:25

  • web制作
  • webデザイン
  • web
• あとで読む

  吉本式BEM設計（BEM設計ベース）

  6 users

  tsudoi.org

  吉本式BEM設計（BEM設計ベース）とは、より美しいソースコードにするためのマークアップエンジニア向けの技術コンテンツです。

  • テクノロジー
  • 2019/07/16 14:00

  • css
  • programming
  • あとで読む
• あとで読む

  Web制作の開発環境とファイル構成について | 吉本式 Web制作のコーディングガイドライン

  5 users

  tsudoi.org

  Web制作の開発環境とファイル構成について 現在（2019年7月）、私はWeb制作を行う際は、Pug + SCSS + TypeScriptを使用しています。 htmlファイル、cssファイル、jsファイルへのコンパイルには、webpackを使用しています。 以前まではgulpも使用しており、gulp + webpackという構築環境でしたが、現在はgulpを使用せず、npm-script + webpackという構築環境です。 早速、まずは私の構築環境が実際にどのようになっているかを体験していただきたく、構築環境を下記にアップしました。 サンプルデータ一式 : sample.zip zipを解凍し、ターミナルでsampleフォルダに移動し、次のコマンドを実行します。 npm i これで必要なパッケージがインストールされるはずですが、もしこの時点でエラーが出た場合は、node.jsやnpm

  • テクノロジー
  • 2019/07/16 13:59
• あとで読む

  【TypeScript】ジェネリック型について

  3 users

  tsudoi.org

  • テクノロジー
  • 2019/02/04 17:48
• あとで読む

  【レスポンシブコーディング】要素の横幅と高さの比率を保つ

  4 users

  tsudoi.org

  • 学び
  • 2018/12/28 00:24
• あとで読む

  クラス設定ルール | クラス名（クラス設計）ルール | 吉本式BEM設計（BEM設計ベース）

  4 users

  tsudoi.org

  クラス設定ルール : クラス名（クラス設計）ルール 前回の記事では、クラス名の固定化について解説しましたが、それだけではまだクラス名のルールは十分ではありません。 コーディング作業を進めていく際に、次の迷い（問題）が出てくると思います。 そもそもクラス設定が必要かどうかの判断が迷う。 では、クラスを設定するタイミングはいつでしょうか。 まず、前提として、BEM設計の場合、CSSで要素（タグ）を指定する場合、必ずクラス指定にしなければいけません。 これについては、後ほど改めて解説します。 それでは、BEM設計で構築していない場合の例で、コーディングのフローを再現し、どのタイミングでクラス設定をするかみてみます。 例：リスト要素の中に画像とリンクテキストが配置されているレイアウトのコーディングフロー。 <ul> <li></li> </ul> まずは、リスト要素なので、ここまでコードを書くでし

  • 世の中
  • 2018/05/12 01:23

  • あとで読む
• あとで読む

  クラス名の固定化 | クラス名（クラス設計）ルール | 吉本式BEM設計（BEM設計ベース）

  4 users

  tsudoi.org

  クラス名の固定化 : クラス名（クラス設計）ルール コーディングの経験を多く積んでいくと、あることに気づきます。 「このクラス名、いつも出てくるなぁ」と。 いつも出てくるということは、既にクラス名が固定化されているということです。 では、固定化されていない他のクラス名は、なぜ固定化できていないのでしょうか。 クラス名の固定化ができれば、ソースコードが美しくなります。 また、コーディング作業をしていく中で「この要素のクラス名、どうしようかな」と迷うことはないでしょうか。 クラス名の設定に迷いがなくなれば、コーディングスピードが大きく改善されます。 クラス名の固定化は、吉本式BEM設計（BEM設計ベース）の中で最も大事な要素の1つです。 これができれば、ソースコードが美しくなり、コーディングスピードも上がります。 本記事は、クラス名の固定化をテーマに、解説していきたいと思います。 Blockの

  • テクノロジー
  • 2018/05/11 21:29
• あとで読む

  反響について | 吉本式BEM設計（BEM設計ベース）

  30 users

  tsudoi.org

  反響について 私の想定を遥かに超える反響があり、戸惑いと共に、良い経験ができました。 5月5日に公開した本コンテンツのある記事が、1日で3万アクセスを超えています。 作業をしながら反応を見ていましたが、私が意図していない解釈で酷評が広がっていきました。 1. 勘違いされてしまう言葉の使い方。 2. マイノリティな主張を刺激的に使ってしまった。 この2つが今回のこの反響の原因だと思いました。 これは反省しなければならない。 勘違いされてしまう言葉の使い方 「ソースコード」「コーディング」という言葉をこのコンテンツでは頻繁に使用していますが、これは全てHTML言語のソースコード、コーディングを指していました。 本コンテンツの内容を読んでいただければ、理解できる内容だと思いますが、それでも勘違いされてしまったようです。 「私は、インデントを付けません」 と、記事で言っていますが、HTMLのソース

  • テクノロジー
  • 2018/05/11 21:23

  • あとで読む
• あとで読む

  ソースコードの形状ルール | 吉本式BEM設計（BEM設計ベース）

  280 users

  tsudoi.org

  HTMLのソースコードの形状ルール 今回のこの記事に対しての反響について 日頃から他の実装者が制作したWebサイトのソースコードを見るようにしていますが、美しいソースコードだと思えるソースコードにはなかなか出会えません。 「美しいソースコード」という意味には、単に「美しい」だけではなく「見やすい」という意味も含めて使用しています。 タイトなスケジュールに追われて、ソースコードを整える余裕がないというのが現状でしょうか。 中でも最も気になるのが、インデントです。 Webサイトのソースコードを見ると8割程度の割合で、インデントが付いています。 なぜインデントを付けるのかを聞くと「コーディングミスが防ぎやすい」「作業効率が良くなる」という回答がきます。 これについて否定はしませんが、ではインデントを付けないとコーディングミスが起きやすく、作業効率が悪いのかというと、そんなことはありません。 私は

  • テクノロジー
  • 2018/05/10 15:32

  • html
  • あとで読む
  • プログラミング
  • コーディング
  • コード
  • Web制作
  • class
• あとで読む

  吉本式BEM設計（BEM設計ベース）

  8 users

  tsudoi.org

  吉本式BEM設計（BEM設計ベース）とは、より美しいソースコードにするためのマークアップエンジニア向けの技術コンテンツです。

  • テクノロジー
  • 2018/05/08 21:10

  • コーディング
  • HTML
  • 勉強
  • web制作
• あとで読む

  タスクランナー（gulpなど）を使用せず、npm+webpackで構築する開発環境

  4 users

  tsudoi.org

  • テクノロジー
  • 2017/11/09 11:41
• あとで読む

  BacklogのWebフック機能で、サーバー環境を自動デプロイする方法

  5 users

  tsudoi.org

  • テクノロジー
  • 2017/08/10 10:13

  • git
  • あとで試す
  • PHP
• あとで読む

  【SVG】レスポンシブ対応してみた

  4 users

  tsudoi.org

  • テクノロジー
  • 2016/03/08 17:20

  • SVG
• あとで読む

  .position()と.offset()の違い > CSS > jQuery | 吉本集

  6 users

  tsudoi.org

  <style> #rect0{ position:relative; width:100px; height:100px; } #rect0 p{ margin:20px; background-color:#89e887; width:60px; height:60px; } </style> $('#btn0').click(function(){ $('#input0').val( $('#rect0').position().top ); $('#input1').val( $('#rect0').position().left ); $('#input2').val( $('#rect0').offset().top ); $('#input3').val( $('#rect0').offset().left ); $('#input4').val( $('#rect0 p').

  • テクノロジー
  • 2015/11/05 16:14

  • jQuery
  • javascript
  • library
  • ブックマーク バー
  • あとで読む
• あとで読む

  ngAnimateモジュールを使用したアニメーション（基本）

  4 users

  tsudoi.org

  • 暮らし
  • 2015/09/25 08:46
• あとで読む

  ngAnimateモジュールを使用したアニメーション（jQueryでアニメーションを設定）

  19 users

  tsudoi.org

  • テクノロジー
  • 2015/09/25 02:52

  • AngularJS
  • javascript
  • jQuery
  • あとで読む
• あとで読む

  モジュールを細分化して読み込む

  4 users

  tsudoi.org

  • テクノロジー
  • 2015/08/06 02:40

  • javascript
  • あとで読む
• あとで読む

  directiveメソッド、controller属性について（基本）

  3 users

  tsudoi.org

  • テクノロジー
  • 2015/05/22 18:01
• あとで読む

  要素の横幅と高さの比率を保つ | 集の一期一会

  196 users

  tsudoi.org

  • テクノロジー
  • 2015/01/04 20:30

  • レスポンシブ
  • css
  • responsive
  • コーディング
  • webデザイン
  • HTML
  • 比率
  • web制作
  • *css
  • *webデザイン
• あとで読む

  シェアボタンの設置方法（オリジナル画像用）

  3 users

  tsudoi.org

  • テクノロジー
  • 2014/12/08 10:35

  • html
• あとで読む

  【Gruntの設定】Sassファイル複数対応、ブラウザの自動更新、これでコーディングがよりスムーズに！

  5 users

  tsudoi.org

  • テクノロジー
  • 2014/10/12 23:05

  • grunt
  • sass
  • css
• あとで読む

  sassの設計について

  3 users

  tsudoi.org

  • テクノロジー
  • 2014/09/29 13:40
• あとで読む

  集｜吉本 集

  3 users

  tsudoi.org

  1.名前は可能な限り短くする 可能な限り短いid/class名にする。また、名前でどういう要素か判断できるとベストです。 ただし、短くし過ぎて意味がわからなくなるのもNG 悪い例 #wrapper{ width: 960px; } .btm{ margin: 0 0 20px; } 良い例 #wrap{ width: 960px; } .bottom{ margin: 0 0 20px; } 理由として id/class名が長すぎると全体的にソースコードが長くなり綺麗なソースコードではなくなるため 2.単語区切りの繋ぎのルールを統一する id/class名の単語区切りは、統一するようにしましょう。 繋ぎ方は、「-（ハイフン）」「_（アンダーバー）」「キャメルケース」などがあります。 悪い例 #headerInner{ width: 960px; } #main-inner{ width:

  • 学び
  • 2014/04/08 13:03

次のページ