信頼はずっと、挑戦はもっと。

お問い合わせ
TEL:03-3496-3888

BLOG コアテックの社員ブログ (毎週月曜~金曜更新中)

LIST OF ARTICLES

記事一覧

  • テクログ

    CSS設計

    結構最近ブログ記事を書いた気がしたのですが2回目の執筆回がやってきました、ひこです。今回は名前だけは知っていたのですが実践していなかったcss設計について、仕事で使う機会があったので書きます。cssは書けば動く、というシンプルな言語なので気軽に学習・実践が可能ですが、その分クラスの命名規則など個人差が出やすいです。チーム開発では人によって命名方法が違うとどんどんコードがぐちゃぐちゃになって補修性が悪くなるので、一定の法則で命名してチーム内で理解しやすく保守しやすいhtmlを書こうというようなものです。既存のコードの改修などだといきなり途中からcss設計を導入する=命名方法が異なるコードの作成なので難しい部分もあるのですが、「新規ページである」「比較的シンプルなデザイン」「繰り返し使うオブジェクトが多い」などから勉強もかねて導入してみました。導入したcss設計は「BEM」と「flocss」を使い分けるような形です。いきなり複数のcss設計が入ったのは色々理由がありますが、私の計画性の無さとかで、誠に申し訳ないと思っています。_:(´ཀ`」 ∠):_具体的な命名は以下のような形です。<nav class="nav__gloval>   <ul class="p-boxFlex nav__gloval__list">     <li class="nav__gloval__item">       <a class="nav__gloval__link" href="">リンク</a>     </li>   </ul> </nav> 「nav__~~」はBEMのBlock Element modifierの命名方法ですね。「p-boxFlex」はflocssのprojectになっています。本で読みつつ学習を進めているのでBEMやflocssとは違うのかもしれませんがこれには理由があります。flocssの命名規則では最小単位のcompornent「c-」があるのですが、素直に最小要素を「c-~~」と命名しているとcompornentの個所が膨大になり、css設計で管理しづらくなる為、繰り返し利用するcompornentのみ「c-」を付け、他はBEMで書いています。また、はじめから何でもcompornent、projectと設定していくと、再利用性のない要素までflocssの命名規則にあてはめられ、無駄に種類が増えてしまう為です。これらは私の経験値不足によるところも大きいかと思うので、どんどん改良していけるかと思っています。まだまだcss設計初級者な私が今回感じたメリットですが、これをブラッシュアップしていくとクラス名のコピペだけでページを作成していけそうな気がします。また、知名度のある設計思想なので学習コストが低い(ネットで記事など探しやすい)点も良いと思いました。まだ試したことが無い方はcss設計はじめてみるのもいかがでしょうか。
  • グルメ

    秋の味覚

    はじめまてブログ担当が回ってきました、ひこと申します。今回は私の出身地群馬県からちょっと珍しい情報を書こうと思います。秋刀魚不漁や台風での農作物被害など、秋の味覚達の不穏なニュースが多く残念ですね。群馬県も農作物生産が盛んなのですが、本日はりんごのお話です。りんごと言うと青森・長野や、品種で言うとふじ・つがるなどが有名ですね。しかし!群馬にもりんごを栽培している沼田市というところがあります。さらに!その地域で少量栽培されている幻の品種『名月』(ぐんま名月)というりんごがあるんです!名前にぐんまと入れてしまうあたりちょっと自己主張が強すぎる感もありますが、味は間違い無し。ふじと近しい品種で、甘みが強くて蜜が入っています。個人的にふじはとても好きなのですが、それよりもしっかりと甘いのに後味はスッキリ。果肉もほどよく固めで歯ごたえが良いです。ちょうどこの記事を書いている11月上旬頃が旬で、この時期を逃すと1年手に入りません。生産数が少なく痛みやすい品種のようで、都内などではなかなか手に入らないかもしれませんが群馬に行った際はぜひ探してみてください。