忍者ブログ

WEB-dブログ.株式会社プライムネットワーク

株式会社プライムネットワークスタッフが、html5やCSS3、phpなどのWEB技術に関することやワードプレスなどのCMSについて学んだことなどを紹介して行きたいと思います。

Sassって便利だから、使ってみれば?
なんて声が、1年前から勧められているにも関わらず今日まで来てしまいました。

話に聞いていると、なんだか便利で良さそうな気もするのですが、仕事のうえで、そこまでCSSを頻繁に使うこともなく、ちょこっとした修正ばっかりだったので、いままでスルーしていました。

ところが、なんだが最近、一からCSSを書かねばならないハメになり、遅まきながらSassについて調べてみました。
(やはり必要に駆られないとヤラない性分は変わりません・・・)

Sassについて

sass

CSSのコーディングを便利にするもので、Sass(さっす,さす)と言うそうです。
要するにCSSの書き方にプログラミングでいうところの変数や計算式などが使え、書いたもの(.scss)をコンパイルしてCSSを作るという、かなりプログラミング寄りなものです。

とはいえ、コテコテのプログラミング言語ほど難しくなく、普通にCSSを書けるデザイナーであれば、問題なく移行できそうです。

まぁ、変数だのなんだのを考えるのも面倒くさいけど、現在の僕の中では、ある程度のCSSのルールができあがっているので、これをさらに推し進めればいいだけなので、頑張ってみようかな!

インストールでやる気が・・・

さて、しばらくぶりに勉強意欲が湧いてきたところで問題が・・・

なんとSassを使うためには、Rubyが必要になってくるのだそうです!!!
Masユーザであれば、最初からOSにRubyが入っているから簡単にインストールできるようですが、なにせ会社のパソコンはWindows。

まずは、Rubyからインストールしなければなりません!!!

インストーラがあるので簡単かと思ったら、今度はコマンドプロンプトで、わけのわからないコマンドを打たねばならない!
しかも、一度で済むこと無く、数回コマンドプロンプトで入力しなければなりません

読んだだけで、断念です。
いままである程度のインストール作業をこなして来ましたが、コマンドプロンプト系のインストールにいい思い出はありません。

上手く行けばいいのですが、一度として1回で上手くいった試しがありません。

なので、今回は、インストールの仕方をリンクで掲載しておきます。

このエントリーをはてなブックマークに追加
PR

改めて、CSS3って凄いなと思う。

いままで画像やjavascriptで表現しなければならなかったことが、いとも容易くできてしまうのです。

とはいえ、すべてのブラウザで上手く動くかどうかは検証しなければなりませんが・・・

そんな中、ブログを作る上で、簡単に出来たらいいなと思っていたものがあったので、書き留めておきます。

オリジナル
こんな感じで文字数を制限してくてるのだ!!
文字が多すぎる場合は、「・・・」に変わる
こんな感じで文字数を制限してくてるのだ!!

これは、どのようなCSSになっているのかというと・・・


.overMoji {
width: 100px;
overflow: hidden;
white-space:nowrap;
text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
}

ここで使っているのは、「text-overflow」というプロパティ

とにかくwidthを指定して、省略符号を出したい部分の範囲を決めます。
今回は、widthを100pxにしてみました。

このプロパティに、省略符号をつけたければ「ellipsis」という値、
省略符号を表示しないのであれば「clip」という値をつければいいのです。

その他にもCSS3には、数々の素晴らしいプロパティがあるので、ちょくちょく紹介していきたいと思います。

このエントリーをはてなブックマークに追加

仕事柄、たくさんのワードプレスでwebページを制作しております。

そもそもワードプレスで制作する理由としては、webの知識はなくとも、自社のコンテンツは依頼者本人でアップしてもらいたいから・・・

ワードプレス

一昔前はCMSを導入しようにも、CMS自体がとても高額だったので、どうしてもhtmlで静的ページを作成することになっていました。

そうすると、更新するためには、どうしてもFTPでの接続であったり、直接htmlを編集しなければならないという作業が出てくるので、webの知識のない人からするととても大変です。

おまけに管理している僕らとしても、「依頼者が操作を誤ってFTP上のファイルを消してしまわないか?html自身を壊してしまわないか?」などと余計な心配が増えてしまいます。

このようなトラブルはとても多くて、何度徹夜したことか・・・
私が悪いわけではないのに・・・

ですので、基本的には「更新作業」は、僕らに依頼してもらうという形を取っていました。

しかしながら、ワードプレスの登場により、webについて全く知識のない人でもお手軽にwebページを更新できるようになりました。

ワードプレスのおかげでスキルアップを余儀なくされる

知識のない人が簡単に更新できるワードプレスなのですが、その半面、今度は僕らのような静的ページオンリー、つまりhtmlやcssだけで制作してきた人間には受難の時がやってきます。

というのもワードプレスは、phpで動いており、制作したデザインをワードプレスに対応させるには、基本的なPHPの知識とワードプレス自体がどのような動きをするのか勉強しなければならなくなったのです!

僕自身、プログラミングに対して毛嫌いするような嫌悪感はなく、いづれは覚えたいなと思っていたので、好都合と言えば、好都合なのですが、デザイン重視でプログラミングなんて興味ありませんというような人は大変です。

ただでさえソースコードなんて見たくないのに、その動きさえも理解しなければいけないのです!

おまけに、いままでのプレイムネットワークでは「htmlで制作さえできればOK」だったものが、ワードプレスのニーズの増加により、デザイナーはデフォルトでワードプレスをカスタマイズできて当たり前!のような風潮になってしまったのです。

そう考えるとやはり、物事事象はシーソーとなっているのでしょうね。

カスタマーが便利になればなるほど、それを作る人間に負担がかかる・・・

やはりwebの世界には安住の地はありません
生涯勉強なのでしょうね。

このエントリーをはてなブックマークに追加
前のページ 次のページ
Copyright © WEB-dブログ.株式会社プライムネットワーク All Rights Reserved
忍者ブログ / [PR]