ジメジメする梅雨のお悩み、一挙解決！ ＞＞

詳しい人求む！

webコーディング技術のトレンドについて

締切済

  • 質問者：sanaeeeee
  • 質問日時：2017/05/18 10:29
  • 回答数：1件

事情があり、約1年半のブランクを経て、web制作の業界に復帰したwebデザイナーです。
1年半の間、一度もデザインもコーディングやデザインをすることなく復帰しました。

web技術ということで、一年半も何もしないでいると、まるで浦島太郎になったかのように、
トレンドが変化し、何から学びなおせばいいかすらわからない状態です。

そこで、現役のweb業界の皆様にお聞きしたいことがあります。

これまで私は下記のような感じで作業をしていました。

・XHTML（HTML5は少し使用する程度）
・CSS2（CSS3はベンダープレフィックスを付けての使用が多かった）
・CSSフレームワークはほぼ使わず、手作業でレスポンシブ対応等
（webアイコンのフレームワークは使用していました。）
・jQueryを使用した動き
・webフォントは使用せず

上記を踏まえて、

・これからコーディングする時はやはりHTML5+CSS3
・FaundationやBoostrapなど進化したフレームワークを使った方がいい
・むしろファイルサイズが大きくなる上記フレームワークを使うより、
CSS3のFlexboxでレイアウトがトレンド
・CSSはSaasを学んだ方がいい
・フロントのデザイン面の動きではjQueryでの動作よりCSS3などで動きを付けるのがトレンド
（jQueryはもう古い？）

という感じになってきているのかな、と思っているのですが、
実際はどうなのでしょうか。
コーディング等は人それぞれ、という部分もあるかと思いますが、
現在のトレンドというか、主な流れを教えていただけたら幸いです。

また、久しぶりにがっつりとFandationフレームワークを使用してみたのですが、
divタグなどへのクラス付与がとんでもないことになってしまっている部分があります。
<div class="columns medium-2 small-4 medium-centered small-centered container">
→このような感じです。
さらにWordPressなどを使うと、元から付随するクラスなどがあり、かなり多いクラス付与になってしまいます。

各種フレームワークを使う場合は、このようになることは普通なのでしょうか？
なんだかソースが見づらい気がしてならないのですが。。。

長くなり申し訳ありませんが、お力をお貸しいただけると幸いです。

よろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (1件)

参考程度に

No.1

  • 回答者： taigoito
  • 回答日時：2017/05/18 12:00

まずご質問にお応えすると、



>>これからコーディングする時はやはりHTML5+CSS3
>>FaundationやBoostrapなど進化したフレームワークを使った方がいい

この点は仰る通りだと思います。

>>CSSはSaasを学んだ方がいい

SassはSassでもSCSSがトレンドです。

>>フロントのデザイン面の動きではjQueryでの動作よりCSS3などで動きを付けるのがトレンド

jQueryも使いますが、animationメソッドなど、
CSS3に委託できる部分は、なるべくCSS3が良いと思います。
jQueryは、addClassやremoveClassで、
CSS3のanimationやtransitionを定義したクラスを制御する感じです。
これは、アニメーションを少し変えたい場合など、
メンテナンス性の問題かと思います。

この際、非同期通信の並列処理が必要で、Promise/Deferredに関する知識が必要です。
jQueryにも$.Deferredという便利なクラスがあります。

>>クラス名

クラス名の記述は長くなります。7,8個付けるのは普通です。好みはあるかと思います。

フレームワークを重たいと考えるなら、記述を減らしていく方向で。
フレームワークをがっつり活かすなら、記述を足していく方向で。

前者なら例えば、GridSystemだけフレームワーク使って、後は自身で記述するなど。

僕は逆に、それだと、HTMLとCSSを行ったり来たり、ということになりがちなので、
記述が多い分を「拡張性が高い」と解釈し、
SCSSで、足りない凡庸クラスを増やして使っています。
CSSの上書きは、ファーストビューなど重要なところ以外では、あんまり使いません。

******************************

その他、参考までに。

DreamweaverがBootstrap3に対応しているのが、結構気になりますが、
既にBootstrap4のアルファ版が公開されていて、
そっちの方が使い易いと感じます。個人的には。
これのカスタマイズにSCSSが必要です。

SCSSのコンパイルに、Grant、Gulpなどのタスク管理ツールが便利と言われる反面、
変化が激しすぎてついていけないという声もあります。

それから色々プロパティや、単位が増えて楽になりました。
flexboxもそうですし、vw, vh, vminとかも良く使います。

ブラウザも進化していて、
ベンダープレフィックスはそのうち不要になりそうです。

JavaScriptは、React.jsがアツイようですが、僕は詳しく知りません。
個人的には、まだCoffeeScript使っていますが、巷では下火と言われています。

******************************

こちらこそだらだらと長くなり、すみません。
一年半というと、逆に僕が学び始めた頃なので、
質問者さんの方が大先輩ですね！！
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

このQ&Aを見た人はこんなQ&Aも見ています

関連するQ&A

関連するカテゴリからQ&Aを探す

専門家回答数ランキング

専門家

※過去一週間分の回答数ランキングです。

Q質問する（無料）

他の専門家の回答をチェック

このQ&Aと関連する良く見られている質問

Qこのプログラムを説明すにあたり！

私は頭が錆びないようにPHPプログラムを勉強しています。
以下のプログラムはPHP参考書の通りに入力しました。
　しかし！<?php～?>の順番を変えてもプログラムは動きます。
そこで、もしあなたが第三者に以下のプログラムの流れを説明しようとした場合
主観でもいいのですが、最初にどんなプログラムを持ってきますか？
　よろしくお願いします。
<!DOCTYPE html>
<html>
<head>
<title>P262 Sample8-4 ｺﾝｽﾄﾗｸﾀとｸﾗｽの変数</title>
</head>
<body>

<?php

$pr1 = new Person("鈴木",56);
$pr2 = new Person("佐藤",38);
?>

<table border="2">
<tr bgcolor="#AAAAAA">
<th>名前</th>
<th>年齢</th>
</tr>

<?php

print "<tr><td>";
print $pr1->getname();
print "</td><td>";
print $pr1->getage();
print "</td></tr>";

print "<tr><td>";
print $pr2->getname();
print "</td><td>";
print $pr2->getage();
print "</td></tr>";

?>
</table>

<?php

print "<hr>";
print "合計人数:";
print Person::$count;

?>

<?php

class Person
{

public static $count = 0;

public function __construct($nm,$ag)

{
person::$count++;


$this->name = $nm;
if($ag>=20 && $ag<=60){
$this->age = $ag;
}
else
$this->age = -1;
}
public function getname(){return $this->name;}
public function getage(){return $this->age;}
}

?>

</body>
</html>

私は頭が錆びないようにPHPプログラムを勉強しています。
以下のプログラムはPHP参考書の通りに入力しました。
　しかし！<?php～?>の順番を変えてもプログラムは動きます。
そこで、もしあなたが第三者に以下のプログラムの流れを説明しようとした場合
主観でもいいのですが、最初にどんなプログラムを持ってきますか？
　よろしくお願いします。
<!DOCTYPE html>
<html>
<head>
<title>P262 Sample8-4 ｺﾝｽﾄﾗｸﾀとｸﾗｽの変数</title>
</head>
<body>

<?php

$pr1 = new Person("鈴木",56);
$pr2 =...続きを読む

Aベストアンサー

できればクラスの宣言は上部にもっていくか、別ファイルにわけてincludeします
あとは表示部分はひとまとめにしたほうがいいでしょう

<?php
class Person
{
public static $count = 0;
public function __construct($nm,$ag){
person::$count++;
$this->name = $nm;
if($ag>=20 && $ag<=60){
$this->age = $ag;
}
else
$this->age = -1;
}
public function getname(){
return $this->name;
}
public function getage(){
return $this->age;
}
}


$pr1 = new Person("鈴木",56);
$pr2 = new Person("佐藤",38);


$table=<<<eof
<tr>
<td>{$pr1->getname()}</td>
<td>{$pr1->getage()}</td></tr>
<tr>
<td>{$pr2->getname()}</td>
<td>{$pr2->getage()}</td>
</tr>
eof;

$goukei=<<<eof
<hr>
合計人数:
eof;
$goukei.=Person::$count;

print <<<eof
<!DOCTYPE html>
<html>
<head>
<title>P262 Sample8-4 ｺﾝｽﾄﾗｸﾀとｸﾗｽの変数</title>
</head>
<body>
<table border="2">
<tr bgcolor="#AAAAAA">
<th>名前</th>
<th>年齢</th>
</tr>
{$table}
</table>
{$goukei}
</body>
</html>
eof;
?>

できればクラスの宣言は上部にもっていくか、別ファイルにわけてincludeします
あとは表示部分はひとまとめにしたほうがいいでしょう

<?php
class Person
{
public static $count = 0;
public function __construct($nm,$ag){
person::$count++;
$this->name = $nm;
if($ag>=20 && $ag<=60){
$this->age = $ag;
}
else
$this->age = -1;
}
public function getname(){
return $this->name;
}
public function getage(){
return $this->age;
}
}


$pr1 = ...続きを読む

他の回答も見る

Q複数の項目を一つの欄で表示したい

お世話になっております。
今回も、ご教授のほど、お願いしたいです

データベースのデータをHTMLで表示する際に
複数の項目を一つの欄で表示したいです。

例えば
DB側のデータが

顧客　　　購入物
A社　　　　A品
A社　　　　B品
A社　　　　C品

となっているときに、画面では

顧客　　　購入物
　　　　　　A品
A社　　　　 B品
C品

という風に同一顧客の購入物をまとめて一つの欄で表示したいです。
開発環境はVisualStudio2015、MVC5です。

実際には購入日等、他の情報も絡んできますが
今回は上記の問題が解決できれば大丈夫です。

よろしくお願いします。

Aベストアンサー

行毎の前後関係を調査し、前行のデータを踏襲している場合はカウントアップする
後行のデータが変わった時点で保持したカウントデータをrowspanに振り当てる
といった処理をしてください

他の回答も見る

Qサイトに表示しているテキスト（タグ？）について

今日は、サイトのある部分についての事について質問させてください。

右メニューなどに「タグ」「関連トピック」などの定義で
テキストをいくつか並べているサイトを最近よく見かけます。

例）まとめnaver
　https://matome.naver.jp/

これをすることによって、何が変わってくるのでしょうか？
また、これは手動で作っていくのか、自動で何かが表示されるように
しているのか……
など、上記テクニックの検索キーワードが思いつかず、
ご相談させていただきました。

Aベストアンサー

お探しのキーワードは、「タグクラウド」ではありませんか？？

タグクラウドを設置する表の目的は、ユーザー（サイトの閲覧者）にとって便利であろう、という計らいです。
その単語をクリックすると、その単語に関連する記事だけを抽出して見られるのはご存知ですよね。
「カテゴリー」と異なるのは、一つの記事に対して複数設定できる、という点でしょうか。

でも確かに使う人少ないですよね？
もう一つ、いわば裏の目的として、SEO（検索エンジン最適化）のための対策と考えられます。

タグクラウドは、プログラムによって自動生成するものです。
主にPHPなどのプログラミング言語と、データベースという道具を使います。（ちなみに僕も作ったことあります。）
ブログの記事ページや、ショッピングサイトの商品ページのようなものは、
日付、記事タイトル、記事内容、画像、カテゴリー・・・というように、決めた形式でデータを管理しています。
この中に「タグ」というデータを設け、全データからその数や最大値をプログラムで割り出して、表示させます。

Webサイトは、内包するページ数が多いほど、検索上位に挙がってきやすいと考えられていたため、一時流行った名残ではないでしょうか。
しかしながら、今どきのSEOでは、似たようなページが多いことは、むしろペナルティと考えられる場合もあります。
この辺りはSEOの専門家の中でも、意見が分かれるところでしょう。
検索上位を表示するプログラムの仕様は明らかにされていないため、決定的な答えは出ません。

ツィッターやインスタグラム等のSNSでも「ハッシュタグ」と呼ばれるものがあり、SNSのハッシュタグで何かを検索する方は、非常に多いですよね。
一方で、Webサイトのタグクラウドを使いこなしているユーザーは少ないと思われます。
デザインによっては、何かかっこよく見えたりもして、Web系のエンジニアの読本にも、タグクラウドっぽいテキストが付いてたりします。
結局のところ、Webサイトにタグクラウドを設けるか設けないかは、好みの問題かと思います。
設置したから使う人もいれば、使わない人もいるでしょう。

技術に関するご質問でしたら、質問を変えるか、
「タグクラウド」、「作り方」で検索されてください。

少しは役に立つ説明になったでしょうか？

お探しのキーワードは、「タグクラウド」ではありませんか？？

タグクラウドを設置する表の目的は、ユーザー（サイトの閲覧者）にとって便利であろう、という計らいです。
その単語をクリックすると、その単語に関連する記事だけを抽出して見られるのはご存知ですよね。
「カテゴリー」と異なるのは、一つの記事に対して複数設定できる、という点でしょうか。

でも確かに使う人少ないですよね？
もう一つ、いわば裏の目的として、SEO（検索エンジン最適化）のための対策と考えられます。

タグクラウドは、プロ...続きを読む

他の回答も見る

Qホームページについて教えてください。 全くの初心者なのでわからない事だらけです。 初心者でもわかるよ

ホームページについて教えてください。

全くの初心者なのでわからない事だらけです。
初心者でもわかるように教えて欲しいです。

自分でホームページを作ろうとしてあまりの難しさに断念しました。
ホームページ制作会社に依頼して制作してもらい、その後Yahooの検索に引っかかるようにしたり、月々色々お金かかりますよね？

初期費用と月額費用はどれくらいかかるものですか？

Aベストアンサー

1.ホームページ制作会社に依頼して制作してもらう
これは制作作業のお願いですので、値段は依頼内容によって大幅に異なります。
純粋な制作だけなら10万円でも受けてくれるところはあります。
上を見ればキリはありません（数千万円とかそれ以上の案件もあります）。

2.Yahooの検索に引っかかるようにする
基本的には、まともに作っていればいつの間にか勝手に引っかかるようになります。Yahoo!でもGoogleでも同じ。
それで良ければ無料と思っていいです。
「より上位に引っかかるようにする」となればこれはお金のかかる話です。
SEOと呼ばれるものですが、これはすでに運用しているサイトに対して行ったほうが効果が出やすいこともあり、
構築時にはSEO的に正しい作り方をする、という程度の話。
（この辺は制作会社のスキル次第です）

3.月々色々お金かかる？
ランニングコストの主なものは、「サーバー費用」と「更新費用」です。
サーバーというのはホームページを置いておく場所のこと。
まあ、お店の家賃だと思って下さい。費用は規模によりけりで無料もあれば数万円の場合もあります。
大した機能のないホームページであれば年間1万円程度見ておけば良いでしょう。

更新費用は文字通り。ホームページは更新しなければそのうち忘れ去られます。
というか、更新しないなら作る意味は無いと言ってもいいです。時間とお金の無駄。
更新するには文章書いたり、画像作ったりいろいろやることありますよね？
その作業を代行してもらうならその分のお金が発生します。
費用は頼む内容次第ですが、安くはないですよ。

これ以外だとドメイン費用というのがあります。これはホームベージの住所。
◯◯◯◯.comとかあるでしょ？あれです。
あれを取得、維持するには年間数百円〜数千円の費用がかかります。
ま、この辺は大したことないですから割愛してもいいかな。
制作会社が説明してくれるでしょう。


あとは「ホームページ」を作るのを止めてSNSやブログにしてしまうという手もあります。
要するにウェブ上の絵日記みたいなものですが、これはデザインや機能、ドメインを選べない反面、
誰でも手軽に作れるものになっています。大手サービスのほとんどは無料で利用できます。

私個人としてはそちらをオススメしますね。
もしどうしてもオリジナルなホームページがほしいと思うのであれば、
せめて毎年100万円程度の費用（あるいは労力）をかける覚悟をした方がいい。
構築費に結構お金をかけたけれど、まともに更新出来ずにデザインも機能もどんどん古臭くなり、
気がつけば誰も訪れなくなっているとか、よくある話です。
ホームページをちゃんと運用するというのは手間と費用のかかることなんです。

初心者なのは仕方ないのですが、格安で手軽に解決することはありません。
そこは断言できます（苦笑）。

1.ホームページ制作会社に依頼して制作してもらう
これは制作作業のお願いですので、値段は依頼内容によって大幅に異なります。
純粋な制作だけなら10万円でも受けてくれるところはあります。
上を見ればキリはありません（数千万円とかそれ以上の案件もあります）。

2.Yahooの検索に引っかかるようにする
基本的には、まともに作っていればいつの間にか勝手に引っかかるようになります。Yahoo!でもGoogleでも同じ。
それで良ければ無料と思っていいです。
「より上位に引っかかるようにする」となればこれはお金...続きを読む

他の回答も見る

QHTML5 カード風レイアウトとaタグ

こんにちは。

HTML5で、インライン要素の中にブロック要素を入れてはいけないと言うものの、
カード風のレイアウトで、
カード全体をクリックできるようにするためには、
<a>タグでカード全体をラップするしかないと思うのですが、
そもそもこのやり方は、推奨されないのでしょうか？？

やはりカードの中にボタン等設けるべきなのでしょうか？？

ちゃんと動作すればいいじゃん！と言う意見ではなく、
HTML/CSSの書き方にこだわりのある方に、意見を伺いたいと思います。
どうぞよろしくお願いします。

Aベストアンサー

html5では、インライン要素やブロック要素の概念自体がなくなりましたよ？
そんなものは、廃止です。なんでもやっていいわけではないく、「コンテンツ・モデル」が変わったわけです。

このブロック扱い、インライン扱いはｃｓｓだけで使用します。HTML5の文章構造からは、インライン要素の中に、ブロック要素を入れられます。

じゃんじゃん、<a>タグでカード全体をラップしてください。なんの問題もありません。

「html5 ブロック要素 インライン要素」で検索すれば、説明したページが山ほど出てきますし、なんなら、<a>タグでカード全体をラップしたページをlintしてみてください。バリデート通りますよ。

他の回答も見る

Q少ない順 昇順 降順

とある参考書をやっていまして
データを少ない順に並べ替えるプログラムがある
と記述されている場合は昇順なのでしょうか、降順なのでしょうか？

Aベストアンサー

昇順です
数が少ないのから昇っていく（大きくなっていく）
と考えればいいです

他の回答も見る

Qレスポンシブ時の画像切り替え

レスポンシブ時にグローバルナビの各コンテンツ画像をマウスオーバーしたときに切り替えたいのですがうまくいきません。
backgroundで隠している状態なので、％が合わなく画像が見えてしまった状態です。PCのデザインではうまくいくのですが幅を％にすると重ならないです。
SP時のナビデザインはこのようなものを目指しております。
宜しくお願い致します＞＜

<div class="nav_bar">
<nav>
<ul class="nav_bar_in">
<li class="nav_01"><a href="#theme"><img class="pc" src="./img/nav_01_off.png" alt="" width="262"><img class="sp" src="./img/nav_01_sp_off.png" alt="スマートフォン用の画像" width="100%"></a></li>
<li class="nav_02"><a href="#plan"><img class="pc" src="./img/nav_02_off.png" alt="" width="262"><img class="sp" src="./img/nav_02_sp_off.png" alt="スマートフォン用の画像" width="100%"></a></li>




pc { display: none !important; }
.sp { display: block !important; }

.nav_bar li {
width: 50%;
float: left;
}
.nav_01{
background: url(../img/nav_01_sp_on.png) no-repeat;
}

レスポンシブ時にグローバルナビの各コンテンツ画像をマウスオーバーしたときに切り替えたいのですがうまくいきません。
backgroundで隠している状態なので、％が合わなく画像が見えてしまった状態です。PCのデザインではうまくいくのですが幅を％にすると重ならないです。
SP時のナビデザインはこのようなものを目指しております。
宜しくお願い致します＞＜

<div class="nav_bar">
<nav>
<ul class="nav_bar_in">
<l...続きを読む

Aベストアンサー

僕の読解力が足らず、状況を良く呑み込めませんが、気付いたのは、
imgタグのwidth属性に"100%"の指定は効かないと思います。

HTML5でしたら、width属性、height属性は廃止されているので、
レスポンシブに用いるのでしたら、

img {
display: block;
max-width: 100%;
height: auto;
}

としておけば良いです。

あと、スマートフォン、タブレットでマウスオーバーは無意味だと思います。
タッチ操作なので。

他の回答も見る

Qul,table要素をランダムに並び替える方法を教えてください

下記サイトを参考にさせていただき、div要素のランダムな並び替えはできました。
http://www.finefinefine.jp/jquery/kiji2068/
しかし、ul要素のliやtable要素のtdの並び替えをしようとしたところ、
並び替えはできるのですが、CSSファイルの設定が無視されてしまいます。
liやtdの並び替えの方法を教えてください。
よろしくお願い致します。

Aベストアンサー

どのようなcss設定なのでしょうか？？
並べ替える要素ごとに設定されているということですか？
参照URLのソースを見てみたところ、

(1) <li>や<td>に設定されているクラス
(2) first-child等の疑似クラス

上記2点は、反映されません。
(2)の場合は当然無理ですが、(1)の場合だったら、以下のスクリプトに書き変えてください。
ID、クラスごと入れ替えるように工夫してみました。

$(function () {
　var arr = [];
　$("#sample li").each(function () {
　arr.push($(this).detach());
　});
　arr.sort(function () {
　　return Math.random() - Math.random();
　});
　$("#sample").empty();
　for (i = 0; i < arr.length; i++) {
　　$("#sample").append(arr[i]);
　}
});

他の回答も見る

Q【CSS】【HTML】横並びメニューについて ホームページに上画像のような４つボタンのある横並びメニ

【CSS】【HTML】横並びメニューについて
ホームページに上画像のような４つボタンのある横並びメニューを作りました。
ぼかしている部分と赤と黄色の棒を背景とし、その上にボタン部分となる各４つの画像を重ねています。

しかし４つの画像をピクセルで位置のの指定をしているため、ページ全体をセンタリングすると、各ボタン画像が背景について行かず下の画像のようになります。

ページ全体をセンタリングした場合も上画像のようにするためにはどうしたら良いのでしょうか？

ページは1000px程度で考えています。
さらにこのページを1920pxまで横に伸ばした場合に余白部分に赤と黄色の棒部分を表示させる方法があれば教えていただきたいです。（メニューから端まで同じデザインが続く感じ）
イメージはhttp://www.kumamoto-med.jrc.or.jpのホームページのような感じです。

ちなみにボタンはa:hoverで切り替えています。

Aベストアンサー

ソース拝見しました。

画像を横並びにする方法は色々ありますが、position: absolute;を使うケースはほとんどありません。
position: absoluteを使うにしても、position:relativeで、起点となる親要素を指定するのが重要です。
今回、画像がずれるという現象も、それに起因しています。

(1) floatとclearfixを用いる方法（floatとその解除）
(2) インライン要素に変えて並べる方法（ブロック要素とインライン要素）

既に古いですが、古いと言っても、この2つがレイアウトの基本です。
これができなければCSSを自身で記述してWebサイトを作るのは無理です。

ただ、今どきは、CSSフレームワークといって、CSSを自身で記述できなくとも、
特定のルールに沿ってクラス名を付与していけば、簡単にレイアウトが組める方法がありますので、
そちらのやり方をオススメします。

"Bootstrap 使い方"で検索してみてください。

こちらをぜひ使いこなして、カッコいいサイトを作ってみてください。

他の回答も見る

Q黄色い文字の部分の意味がわかりません。 教えてください。

黄色い文字の部分の意味がわかりません。
教えてください。

Aベストアンサー

日本語の意味としては、
他に SIZEをdefineしてある個所があるなら、その値（がいくつかは判らないが）を使います。
他に SIZEをdefineしてある個所がないなら、SIZEを 5 と定義して使います。
になります。

他の回答も見る
ページトップページトップ

Q質問する（無料）

このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング

おすすめ情報