Sass（SCSS記法）の書き方紹介 | 東京のホームページ制作 / WEB制作会社 BRISK
2020年の冬からSassが社内標準として採用されました。 最初は戸惑いましたが、慣れるとCSSを書くのがつらくなるぐらい便利です。 Sassのごく一部の機能しか使っていないな、と思ったので書き方をまとめてみました。 SassについてSass（Syntactically Awesome StyleSheet）はCSSのメタ言語です。CSSのメタ言語をCSSプリプロセッサと呼んだりします。 メタ言語は言語を定義したり、言語についての情報を記述したりするための言語です。CSSの機能を拡張した言語の1つがSassと言えます。 SassはCSSに変換（コンパイル）する必要があります。環境構築が面倒という方もGUIコンパイラやVSCodeのプラグインなどを使えば、気軽にSassを導入できます。 GUIコンパイラの使い方については、こちらの記事を参考にしてみてください。 Sass(SCSS)を始めよう
【最新】Swiperの使い方・カスタマイズを解説！サンプルやオプション15個付き ー基礎から応用までー | 東京のホームページ制作 / WEB制作会社 BRISK
TOPブログ【最新】Swiperの使い方・カスタマイズを解説！サンプルやオプション15個付き ー基礎から応用までー Webサイトのコーディングをするなら必修とも言えるスライダー。 スライダー実装用のJSプラグインはいろいろありますが、本記事ではその中でもSwiperを使用した実用的なカスタマイズ例をご紹介します。 デモページを見る まずはこちらのデモページをご覧ください。 片方だけはみ出しているスライダー、サムネイルと連動するスライダー、SPだけスライダーにする方法などなど、実際によく必要になる機能を網羅できるようなデモを厳選してご用意しました。 初心者さん向けのかなり初歩的な内容から、いろいろカスタマイズを加えた応用編まで解説していきます。 メインビジュアルの作例5つ（#11 ～ #15）については、Swiperのカスタマイズ方法だけでなく、アニメーションやデザインの参考になればと思い様
【コピペでOK】サイトに動きをつけるCSSアニメーションまとめ（デモ・サンプルコード付き） | 東京のホームページ制作 / WEB制作会社 BRISK
最近ではアニメーションが実装されたWebサイトも多くなり、趣向を凝らしたリッチな演出を取り入れているサイトもそう珍しくなくなってきました。 特に重要な要素を動かすことで興味を引かせたり、飽きずに読み進めてもらうためのきっかけになったり、といったメリットがありますよね。 ただ、アニメーションのイメージはなかなか文面でも口頭でも伝えにくいもの。 「ふわふわ」「しゅっと」「するする」「ぬるっ」などとオノマトペを駆使して説明しても、ディレクターとコーダーの間の認識の共有は結構難しいのです。 結局、イメージに合った動きをしているサイトを見つけて「この動きで！」と伝えるのが楽なんですよね。 そこで本記事では、そういった言葉にしにくい部分にフォーカスを当てて、シンプル・綺麗、ポップ、スタイリッシュ、柔らかい印象などのイメージ別にCSSアニメーションをご紹介します。 デモ・サンプルコード付きですので、ぜひ
日付入力フォームをinput type=”date”でカスタマイズ【IEにも対応】 | 東京のホームページ制作 / WEB制作会社 BRISK
「日付入力フォームを作ってほしい」 あなたはそう言われたら、どうやって実装しますか？ HTML5になって追加された「input[type=date]」を使うでしょうか。それともプラグインを使うのでしょうか。 どちらにも一長一短があり、設置するサイトの目的に応じて柔軟に対応することが求められます。 だがしかし！この日付入力フォームのカスタマイズはなかなか曲者でして、苦戦している方も少なくないでしょう。 Chromeではうまく表示されても、IEでうまくいなかったり、ちょっと見た目をいじったら動かなくなってしまったり。 今回はそんな悩める日付入力難民の皆様のために、日付入力フォームをどんな端末から見ても同じ見た目・動きになるようカスタマイズする方法について書きました。少しでもお役に立てればなによりでございます。 ※結論から言うと「日付入力フォームのカスタマイズなら、プラグイン(datepicke
slick sliderの使い方からカスタマイズまで【スライダープラグイン決定版】 | 東京のホームページ制作 / WEB制作会社 BRISK
「スライダーを実装したい！」「でも何を使えばいいの？」という方に朗報です。 この記事ではスライダーを作成するプラグイン「slick」の設定方法から使い方、カスタマイズまでをしっかりばっちり説明していきます。 slickを使えばデザイナーやディレクターの要望にばっちり応えられること間違いなし！（かもしれません。） 目次 slick（スリック）とはslickの使い方～導入編～slickの使い方～実践編～slickの使い方～カスタマイズ編～slickの使い方～レベルアップ編～slickの使い方～もっとレベルアップ編～slickの使い方～まとめ～slick（スリック）とはslickはjQueryベースの、スライダーを作成するためのプラグインです。レスポンシブにも対応し、IE8以上のブラウザであれば完全対応で、カスタマイズの幅も広いため、世界的に利用されています。 また、商用の利用もOK（※ちょっぴ
【レスポンシブ】CSSで作るtableデザイン＆コーディング【コードあり】 – 東京のホームページ制作 / WEB制作会社 BRISK
もはやスマホ表示を考えないwebサイトは新規制作やリニューアルではほぼない今日、どんなに横に長いテーブルでもレスポンシブでどうするか考える必要があります。 PCで組むだけなら何も考えずに済むのですが、スマホの縦長の画面で如何にユーザビリティを落とさず横長になりがちなテーブルを表示させることができるか、いくつかtableコーディングのパターンを用意してみました。 demo Contents 縦に積むテーブルレスポンシブ 横並びを縦並びにするテーブルレスポンシブ 疑似要素で見出しを用意するテーブルレスポンシブ content:attr() で見出しを表現するテーブルレスポンシブ spanで見出しを表現するテーブルレスポンシブ スクロールで表示させるテーブルレスポンシブ 縦に積むテーブルレスポンシブ PC SP ごくごく一般的なテーブルパターンですね。 ソース上は上から順番に要素が並んでいるので
東京のホームページ制作 / WEB制作会社 BRISK
Together, We Think WEBに対して謙虚で誠実に向き合う制作会社です。 BRISKは東京都江東区を拠点とするWEB制作会社です。 企業サイトや採用サイトの制作、 WordPress構築を得意としています。 創業から11年を超え、WEB制作事業1本で続けてきました。 WEBディレクター出身の代表が 「こんなデザイナー・エンジニアがいたら良いな」 と思うメンバーを採用し成長してきた会社です。 数多くの制作実績の中で培ったデザイン力・技術力には自信があります。 外注ゼロで自社内で制作しているため、 スピード感・柔軟性がありクオリティの高いサイト制作が自慢です。 営業マンがいないBRISKですが制作力で案件をいただけており、 一度ご依頼いただければまたリピートしていただける、 ありそうでなかなかないWEB制作会社です。 「WEBに対して謙虚で誠実に向き合う」をモットーにしていますの
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
