Dart Sass、使ってる？Preprosを使えばコンパイルも楽勝！
2020年6月14日 CSS, 便利ツール 最近Sass界隈が賑わっているように感じます。おそらく「Sassを@importから@useに置き換えるための手引き」という記事でDart Sassダートサスの存在を知った方も多いでしょう。今回はそんなDart Sassをザックリと、そして便利なコンパイラー「Prepros」について紹介します。 ↑私が10年以上利用している会計ソフト！ Dart Sassとは 一口にSassと言っても、実装している言語によって3つに分かれます： Ruby Sass … Ruby製。2019年没。サポートされません。 LibSass … C++製。今一番広く使われている様子。 Dart Sass … Dart製。公式推奨。 ICS MEDIAの池田氏によるアンケートだと、LibSassがだんとつ人気ですね。 ウェブのフロントエンジニアに質問。 Sassのコンパイル
Sassのモダンなコンパイル環境が3分で作れるParcel入門 - 独自設定ファイルは不要 - ICS MEDIA
ウェブ開発ではSass、TypeScriptなどの言語のコンパイルや、出力ファイルの最適化、ローカルサーバーの起動などさまざまな作業が求められます。現在は、それらの作業を自動化するwebpackやGulp.jsがよく使われています。 webpackにはwebpack.config.js、Gulp.jsにはgulpfile.jsという設定ファイルがそれぞれ必要で、両ツールともその使用方法を覚える学習コストがあります。 Parcelパーセルというツールを使うと、webpackやGulp.jsのような独自の設定ファイルを使うことなく、各種言語のコンパイルやバンドルができるようになります。バンドルとは、複数のファイルを1つにまとめることを指します。Parcelとは、設定ファイルが不要で高速なウェブアプリケーションのバンドルツール。次のようなことが可能です。 Sassのコンパイル Autoprefi
[WordPress]カスタムメニュー機能の設定と設置と書き出されるソースコードを分かりやすく紹介します | オレインデザイン
では、実際にテーマにカスタムメニューの位置を定義していきましょう。 カスタムメニューの位置をfunctions.phpに定義する では、functions.phpファイルを開いて、カスタムメニューの位置を設定していきます。 if ( ! function_exists( 'lab_setup' ) ) : function lab_setup() { register_nav_menus( array( 'global' => 'グローバルナビ', 'header' => 'ヘッダーナビ', 'footer' => 'フッターナビ', ) ); } endif; add_action( 'after_setup_theme', 'lab_setup' ); 順に説明していきます。 １行目のif文ですが、lab_setup()がない場合にlab_setup()を読み込む、という条件分岐になり
![[WordPress]カスタムメニュー機能の設定と設置と書き出されるソースコードを分かりやすく紹介します | オレインデザイン](https://cdn-ak-scissors.b.st-hatena.com/image/square/41aba80aa54a0e3f9579d8a5480babb9aeabfe0b/height=288;version=1;width=512/https%3A%2F%2Folein-design.com%2Fwp-content%2Fuploads%2F2017%2F05%2Fpost-thumbnail-wordpress.jpg)
#cssnite に参加してDreamweaverのファンになったいくつかの理由。 | DevelopersIO
3/11(土)に CSS NITE Dreamweaver（ドリームウィーバー）祭り に参加してきました(ง `ω´)ง エディタでゴリゴリHTMLとかCSSとか書くのも好きですが、本業でない場合、少しでも効率化させたいと思うものです。Dreamweaverは実はイケるらしい！と、風の噂で気になってはいましたが、これに参加して少し納得しました。すっかり使ってみたい欲にかられて最近のコーディングは極力、使うようにしています。 実際、8年ぶりのDreamweaverは、印象違います！なんてったって、余計なことをしない（笑） GUIを操作するだけで、ある程度のページは作れますが、やっぱり、基礎力(html,css)がないと、ちょっと難しいですかね。 それでは、気になったところを中心にダイジェストでお知らせします。（有料セミナーということもあり、公式な資料公開は、開催90日後からだそうなので） 初
WordPressのローカル環境のためのGUIツール”Local by Flywheel”が便利 – Capital P – WordPressメディア
便利すぎて、正直びっくりした。 Local by Flywheel のウェブサイト WordCamp US へ参加した際にブースを出していたのを見かけていたのが “Local by Flywheel” というローカル環境を構築するためのツール（https://local.getflywheel.com/）。 MAMP (Pro) の UI が綺麗で速くて各サイトが分離されていて、機能がとても多い版というと分かりやすいでしょうか。また、WordPress の環境に特化しており、ワンクリックインストールやマルチサイト、SSL、Apache/Nginx の選択や切り替え、メールのデバッグツールや開発中のサイトの一時的な公開など、WordPressを使ってウェブサイトを作りましょう、となった場合に必要になりそうな機能を備えています。 で、無料です。 トップページに書かれているその機能は以下のように
Sassってなに？だった私がSassの使い方を解説してみた｜dwango creators' blog（ドワンゴクリエイターズブログ）
こんにちは。 新卒デザイナーのshikaです。 入社から早くも3か月が経ちました。仕事をする上で「高いクオリティ」と「限られた時間」との両立がどれほど大変かということを、強く実感しています。学生の時は時間に余裕もあり、ポートフォリオを作る時も自由に時間を使えました。Webページの制作にもCSSを生のまま書いていたのですが、コーディング作業の効率化をしようと思い、以前から気になっていたSassに手を出してみました。 その結果、ある程度使えるようになったので、Sassの導入方法や初歩的な部分を解説してみようと思います。 Sassって？ Sassとは、「Syntactically Awesome StyleSheet」の略です。直訳すると構文的に、凄い、スタイルシート…？ とりあえず、いろいろ便利になったCSSというイメージで大丈夫だと思います！ Sassは2種類の構文で構成されたスクリプト言語
Windowsユーザーも必見！Mac初心者から中級者になるための6つのTips | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、マウスはトラックボール派のもりたです。 ロジクールのレシーバーとBluetoothの相性が悪いらしく、競合してキーボードが認識されませんって画面に出るんですけど、普通に使えてます。 まいっか。 今回は以前書いた生粋のWinユーザーがMacにすんなり馴染める！便利な無料アプリや、設定まとめの補足で、元WinユーザーのためのMacトピックです。 索引 Windowsでいう「マイコンピューター」を設定する マジックマウスの接続が切れた時の対処法 CDの取り出し方 Dockに入ってないアプリケーションを整理する ファイルの中身を簡単に確認できるクイックルックを活用する 文字が小さくて見づらい…画面のズーム機能を使う ウェブデザイナーの為のおまけ Windowsでいう「マイコンピューター」を設定する WindowsからMacに移行した人が高確率で躓くポイントです。 逆にMacしか使ったこ
Contact Form 7 に追加すればスパムが届かなくなる魔法の1行 | 毎日興味津々
タイトルはちょっとあおり気味にw 問い合わせフォームから飛んでくるスパム対策のために、 Akismet や 画像認証 など色々テクニカルな方法があります。 しかし、私はどっちも使っていません。 Akismetは、スパムアドレスじゃないのにはじかれることがあった（気がする） 画像認証は設定が面倒だし、それ以上にコンバージョン率が下がりそう それでも、私のところにはスパム問い合わせは飛んできません。 （あ、もちろん手打ちの営業メールは時々飛んできますよ） 今回ご紹介する方法は意外なほどシンプルに自動スパムを弾く方法です。 以下の1行を追加してみてください [acceptance acceptance-0] 確認ページはございません。内容をご確認の上チェックを入れてください これだけです。 これだけで、スパムが届かなくなります。 [acceptance] は、よく会員登録などで見かける
【「カテゴリ別に表示できる」などいろいろ機能追加しました】WordPressプラグイン「Newpost Catch」バージョンアップしました｜今村だけがよくわかるブログ
【「カテゴリ別に表示できる」などいろいろ機能追加しました】WordPressプラグイン「Newpost Catch」バージョンアップしました WordPressで最新記事の隣などに、記事に設定したアイキャッチ画像を自動で表示するウィジェットプラグイン「Newpost Catch」をバージョンアップしました。最新記事の横に小さくサムネイルっぽく表示させたりもできます。画像付きの記事は、視認性もわりと上がるんじゃないかと思っています。 ウィジェットで設定できる項目が増えましたプラグインを有効にして、ウィジェットを設置すると、こんな感じになります。 いずれ内容は「プラグイン専用ページ」にも詳しく書くとして、今回は追加・変更になった部分を説明します。 １．カテゴリ別に新着記事を表示/非表示これまでプラグインを使用していただいた方からの要望で、最も多かったのが「カテゴリ別に新着記事表示できないのかな
Dreamweaver歴8年半の僕が3日前にSublime Text 2にしてやったこと | clear sky source
これまでかたくなに Dreamweaver を利用していたのですが、CS6 にアップデートしたあたりから動作が重くなり、直近ではもーやってられんとなりましたので重い腰をあげて Sublime Text 2 デビューをはたしました。 これでやっと僕にも春が来るのかなとワクワクしております。 参考にした記事 以下あたりを読みました。 基本 Sublime Text 2ってエディタがすごくイイ。Dreamweaverから乗り換えた時の初期設定とか使い方とかをメモ | Mnemoniqs Web Designer Blog Sublime Text2の複数カーソルの使い方 #SublimeText2 – Qiita [キータ] SublimeText2を3ヶ月使ってみて利用を決めたPackageまとめ | 濃紺ピッチャー Emmet系 Sublime Text 2のEmmetでdivの閉じタグにコ
Sass（+ Compass）：Firebug やデベロッパーツールで SCSS の該当行を表示
Sass（+ Compass）：Firebug やデベロッパーツールで SCSS の該当行を表示 2013.03.04 | この方法お勧めです！ | 制作あるある | 覚えておきたい こんにちはピンクです。確定申告の季節ですね！青色申告の私は毎年この時期、宿題を溜めてしまった夏休み最終日の小学生のようになっています…。 さて、Sass ネタです。 Firefox の Firebug や、Chrome のデベロッパーツールで要素のスタイルを確認すると、どのスタイルシートの何行目に記述があるか分かるようになっています。 上図は Firebug で適当にとったキャプチャです。「スタイルシート名.css」の n 行目に記述があるよー、と書いてありますね。デフォルトではここは .css の何行目か、しか見てくれません。 Sass（.scss）で書いて表示確認をして「ああ～ここ少し調整したいな…」なん
jQuery の on() と off() を理解する - tacamy--blog
初心者向けの本とかだと、イベントを jQuery オブジェクトの後に直接指定する、 $('.foo').click(); のような書き方で説明されている場合が多いけど、少し複雑なことをしようとするとそれだと困ることが出てきます。そんなときに便利なのが on() を使ったイベント設定です。 on() ひとつで bind() live() delegate() を表せる jQuery 1.7 で、bind() live() delegate() がすべて on() に統合されたそうです。 つまり on() の書き方によって、3 パターンの使い方ができるということです。 .foo という要素をクリックしたら何かするという例で、イベントの設定と削除の方法をそれぞれ書いてみます。 bind() $('.foo').bind('click', function(){...}); は $('.foo')
[O][Webデザイン]IllustratorをWebデザインに使う時に気をつけたい設定 | Olein | 岐阜県岐阜市のデザイン屋ブログ
はじめに Webデザインを行う上で一番使われているソフトといったら、やはりAdobe Photoshopでしょうかね。僕も仕事で使うことはよくあるんですが、やはり画像の補正やら修正・レタッチ、合成などがほとんどで、オブジェクトを作って配置していくということをPhotoshop上で行うことに慣れていません。 そして、僕自身仕事で一番使うのはやはりAdobe Illustratorです。印刷物のデザインをメインにやってきましたので、自ずとそうなってしまいます。しかし、IllustratorはWebデザインには向いていないとよく言われます。そう言われるにはたくさんの理由があるのだと思うのですが、線にアンチエイリアスがかかるときがあることや、そもそもIllustratorの操作に慣れていないという声もよく聞きました。 ですので、今回こちらの記事では、僕のようなスタイルの人がWebデザインをIllu
これがスマートフォン向けサイトを作るときの viewport 設定３パターンだ
スマートフォン向けの Web サイトを作るとき、viewport の設定次第で使い勝手が大幅に変わる。 最近はレスポンシブ Web デザインが流行してるけども、その大前提として viewport の設定パターンを抑えておくのは重要だろう。 この記事では、viewport の設定によって、見た目・使い勝手がどう変わるかを解説する。 パターン1: 何も考えずに HTML を書く まずは、viewport を指定せずに、単純な HTML をスマートフォンで表示してみる。 <!DOCTYPE html> <head> <meta charset="utf-8"> </head> <body> <img src="/images/logo-ja.png"> <p>色んな素材がごった煮になった様子をお椀で表現しています。 湯気が<strong>「てっく」</strong>に見えるのが隠し味になっていま
MacBook Proをホームサーバ（iTunesサーバ兼ファイルサーバ）にする方法
Macをホームサーバーにするのはとても簡単です。 参考：NASより使いやすいぞ！OS10.6.8以降が動くMacをホームサーバーに仕立てよう！ 今回はネットワーク経由でファイルの保存が可能になる『ファイルサーバー』 iTunesホームシェアリングの中心になる『iTunesサーバー』 以上の2つを機能させるための設定方法です。 ポイントは『できるだけ省電力』そして『遠隔操作』です。 画像はクリックで原寸になります。 システム環境設定 以下は『アップルメニュー』＞『システム環境設定』内での各種設定です。 ネットワークは必ず『IPアドレス』と呼ばれるもので管理されています。 そのIPアドレスは、おそらく『DHCP』という機能で自動的に設定されていると思います。 DHCPの場合、なにかのタイミングで違うIPアドレスに変わってしまう可能性があります。 IPアドレスが変わってしまうと、他のMacやiP
Illustratorで木の質感を出す方法【初級編】 | ナナメウエblog
おはようございます。 気づいたらもう2月ですね。 今年も残り11ヶ月、心の底からillustratorを愛していきたいと思いますよろしくお願いします。 それではillustratorで木の質感を表現する方法を紹介します。 illustratorでの木の質感表現はいくつかあるのですが、今回は最も簡単な方法を紹介します。 今回の場合は木の木目が黒くなるので、濃いめのフローリングなどの質感に使えるかと思います。 illustratorで木の質感を表現する方法 まずは四角形のオブジェクトを作成します。 色の設定は上が#785032、下が#4a3b29のグラデーションを作成します。 続いて[効果] → [テクスチャ] → [粒状]を適用します。 値の設定は、「密度：15」「コントラスト：4」「粒子の種類：縦」にします。 「密度」パラメータを大きくすると、より風化したような木の質感が出せま
ローカル環境（XAMPP）にWordPressをインストールする手順 ｜https://wp.yat-net.com/name
すでに様々なサイトで紹介されていますがローカル環境へのWordPressインストール手順を記述します。解説はWindowsベースになっており環境はXAMPPを想定しています。XAMPPの導入については過去記事「WordPressをローカルで開発するためのXAMPP事始め＆WordBench神戸、大阪について」をご参照ください。 手順は以下の通りです。 WordPress本体のダウンロード ファイルの設置 データベース作成 WordPressの初期設定 WordPress本体のダウンロード WordPress本体をダウンロードします。記事執筆時点での最新版は3.5.1です。 http://ja.wordpress.org/ ファイルの設置 ダウンロードしたファイルを解凍し、ドキュメントルート（公開用）ディレクトリに設置します。僕はxampp/htdocs/になるのでそこにwp20130128
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Loading...
WordPressのカスタマイズでよく使うコードが簡単な設定で、あっという間に生成できるオンラインサービス -Hasty
https://blog.mismithportfolio.com/web/20161218localflywheel
