はてなブックマーク

SCSSを導入しようかと検討する際に、このブログの記事を参考にしてくれた奇特な方が居たそうな。どうもありがとう。 で、声をいただくと書かない訳にはいかないので、条件分岐のIf文と反復処理の構文に絞った内容で書いてみようかと思う次第です。 SCSSとはCSSの拡張言語です。長くなったり、複雑になって管理できなくなったりするCSSを効率的に書けるようにします。効率的にする機能として、以前に紹介した変数やパーシャル、これから紹介する条件分岐のif文と繰り返し処理のfor文などがあります。他にも継承させる@extendや関数化できる@mixinなどがありますが、これは別の機会で。 条件分岐の使い方デザイナーならjavascriptとかで触れたことがある条件分岐、if文の使い方です。 公式サイトを見ると、基本的な記述例と以下内容が記載されています。 Note: Control directives

この記事は、Javascript と jQuery の違いがイマイチよく分からないといった初学者や触り始めて間もない人を対象にしています。 私「サイト構成、ページデザインを見ると JavaScript で動きをつける部分は少なく、その箇所も高難易度ではないのでコード量も多くならないと思います。ここは jQuery を使わずに素の JS で書いても良いではないでしょうか。jQuery を読み込まないのでリクエスト数も減りますし。」 困惑の表情を浮かべたものの、意を決した様子で彼は言った。 彼「どういう意味ですか?」 想定外の返答に私は事態を飲み込めず、「どこのことですか?」と質問に質問を返すという愚行に出た。しかし、その答えは単純で、彼は JavaScript = jQuery だと誤認していたのであった。 先週の土曜日に相談された時の会話を少し脚色しました。で、いろいろ聞いていると、上に登

ここ最近、いろんなWebサイトを見ています。いつにも増して見ています。手元にiPhoneとNexus6を置いているので、それらも駆使して見ています。 そんな中、AndroidのChromeで閲覧していると、アドレスバーが通常と異なる色になるサイトがいくつかありました。どうしても試してみたくなったので、実際にやってみたのが以下の画像です。 タブ選択する時はアイコン周りにも色とアイコンが付きます。 今回は、小ネタとして、この設定方法を紹介します。 Google Developpersに設定方法が記載されており、これを参考にさせていただきました。 参考サイト: Support for theme-color in Chrome 39 for Android 対応環境Android用 Chromeのバージョン 39以降Android バージョン5(Lolipop)以降※iOSのsafariとChr

Wordpressで始めたブログを管理画面がいらないという理由で静的サイトジェネレータのmiddlemanに乗り換えて早3ヶ月。CMS案件やWebアプリケーションのHTML/CSS制作にmiddlemanを使っていたのですが、ブログ機能はこの移行で初めて取り組みました。今回はこのブログ機能に絞って書いていきます。 というわけで、以下のような方におすすめの内容でお届けします。 middlemanを使ったことがある方middlemanでブログを作りたい方middlemanでのブログ初期設定をやろうとしている方なんとなく見てしまっているという奇特な方 ← どうもありがとうmiddlemanを初めて使う方は、まずは過去記事をご覧ください。 インストールからサーバーの起動まで ブログサイト制作するには、上記ページ内のmiddlemanを起動してみようのスケルトン作成の箇所に補足として記載している、$

今年も残すところあと、二週間とちょっとです。皆様いかがお過ごしでしょうか。 フリーランスの方々にとっては、年末が決算月になるので、最後の追い込みなのではないでしょうか。 かくいう私もご多分にもれず、せこせこPCと格闘しております。 そして今、採用関連の新サービスを構築中で、サービス設計とデザインは一段落し、今は年内公開に向けてエンジニアの方々が奮闘しています。 また、12月は冬真っ盛りで、みんな大好き炬燵(こたつ)の時期。自分は一度入れば抜け出せない蟻地獄のような炬燵から卒業して10年程経ちますが、調査や取材をしないで記事を書くことを指す炬燵ブログからの卒業は難しいものです。 Wikipediaによると、ブログとは以下のように定義されています。 より頻繁に用いられている広義には作者の個人的な体験や日記、特定のトピックに関する必ずしもウェブに限定されない話題などのような、時系列で比較的頻繁に

静的サイトをどのように制作していますか? 静的サイトジェネレーターを使っていますか? Web デザイナーは Photoshop や Sketch でサイトデザインをして HTML / CSS / JavaScript でコーディングといった、静的サイトの制作を行う機会が多いかと思います。 私の場合も同様に、Wordpress や Web アプリケーションに組み込むための静的サイトを制作することが多く、これを効率的に行うべく LESS をやり始めたのですが、周りで使っている人がほぼ皆無。Sass / SCSS 割合の高さに焦り、慌てて切り替えました。 そして、さらなる効率性を求めて 1 年ほど前から静的サイトジェネレーターを取り入れました。 静的サイトジェネレーターとは？そもそも静的サイトジェネレータとは、静的サイトを効率的に制作するためのツールで、好みの言語で開発して納品用に HTML /

ここ数年、UIデザイナーに人気のデザインツールの一つに Sketch3 がよく挙げられます。周りを見ても使っている人が増えたなという印象があるのですが、自分も使い始めるようになって今ではメインのデザインツールとして手放せなくなりました。 SketchはFireWorksに変わるツールオランダの Bohemian Coding が作った Sketch3 は名前の通り、既に version3。Dribbble でも数多くのsketchで制作した作品が掲載されています。昔の Web デザイン定番ツールといえば fireworks でしたが、Adobe が開発をやめたことをきっかけに注目されたのが、ベクタードローイングツールの Sketch。Webデザインが効率的に行えるように様々な工夫があり、今では、導入企業も多く Google や Apple なども使っているデザインツールになっているようです

スマホファーストでおまけ的にPC対応という案件が以前よりも増えていますが、やっぱり多いのはPC優先でスマホ表示も確保するというもの。で、このような複数デバイス間の表示を最適化する手法としては以下のものがあります。 モバイル用とデスクトップ(PC)用を別々に用意してアクセスする端末で切り替えるブラウザのウィンドウサイズによって表示内容を変える1はユーザーエージェント(何を使ってアクセスしているか)で判別する形式で、Wordpressではwp_is_mobile()という関数を用いてif文で条件分岐させれば簡単に実現可能です。 2はレスポンシブウェブデザインと言われ、メディアクエリを用いて制御する手法。これについては、Googleがモバイル フレンドリーなサイトを構築するガイドラインを出しています。 参考1: はじめる - ウェブマスター向けモバイルガイド ↑ 知らない人は必須なので目を通して

毎朝アクセス解析を見ていると、IE8 以前のバージョンからの流入が激減しており、喜びを隠せない日々を過ごしています。 実際、クライアント先の学習塾の 4 月から 7 月の IE だけの平均を見ると、IE9 が 10%、IE11 が 75%、残りが IE7、8、10 という割合です。そして、IEでの流入数が減った分、モバイルからの流入が増え続けており、モバイル率が 7 割近くまで上がりました。 古いブラウザの割合が減ることは、Web制作者にとっては嬉しいことで、対応する時間が大幅に減ります。そして、対応ブラウザのバージョンが上がると、Flexbox だって使えるようになります。(←前置き長い) FlexboxがCSSレイアウトを楽にするこのサイトは、IE9 以下からの流入が 3% 未満なので、完全に無視して CSS レイアウトは Flexbox を使っています。Flexbox は CSS3

ハンバーガーメニューを使っているサイトをよく見かけますが、見た目先行で効果が出にくいようです。 GIGAZINEの記事 - なぜメニュー表示用ボタンの「ハンバーガーアイコン」はダメなのか？ クライアントにハンバーガーメニューを実装して欲しいと言われることもありますが、ターゲット層によってはほとんどクリックされません。実際に自分のサイトで2ヶ月間ハンバーガーテストをしましたが、ヒートマップやページ分析ツールで見ると全く押されていなかったです。 で、お盆に入って少し落ち着いたので、ハンバーガーをやめること、データから分析した観点でUIを修正すること、リファクタリングの3点を行いました。リファクタリングはコード内容を見直して、冗長な記述や重複箇所、プログラムの効率化を図る作業のことで、定期的にこれを行うとよろし。 今回は、このサイトのSCSSを再構成したこともあり、初心者がSCSSを始める際に理

ここ最近、Web デザインや HTML / CSS コーディングをこれから始める方や始めて間もない方に相談される機会が結構ありまして、今回はその中でもよく聞かれる「テキストエディタは何がおすすめですか？」についてのお話。 種類や情報過多で選べないGoogle様に「テキストエディタ」について尋ねれば、約 1,230,000 件の情報を返してくれます。これではちと多すぎるので、用途や OS などのキーワード、「プログラミング」「mac」「win」「おすすめ」「無料」とかを足して、絞り込んでいくと経験豊富な方の確かな情報に辿りつきます。 それでも「種類が多すぎて何を使っていいかわからない」と言われることも少なくないので、その場合は Atom を使ってみればと言っております。 Atom とは無料なのに拡張性抜群の Github 製のテキストエディタです。バージョンも安定版の 1.0 になって起動や