人に聞けない痔の悩み、これでスッキリ >>

https://www.human.or.jp/
こちらのサイトのTOPページの「recruit tips」の背景が、
中央がグレーで左右がホワイト、またセクションの真ん中もホワイトのように見えます。
このような特殊なグラデーションはどのようにやるのでしょうか?
プロパティだけでも教えていただけたらこちらで調べてみます。

A 回答 (1件)

そのサイトの該当部分でやっていることを再現すると、こういうことです。



<html lang="ja">
<head>
<style type="text/css">
.block-a {
height: 200px;
-webkit-box-shadow: 0px 38px 43px -3px rgba(200,200,200,0.1);
box-shadow: 0px 38px 43px -3px rgba(200,200,200,0.1);
position: relative;
}
.block-a:before, .block-a:after {
background-repeat: no-repeat;
background-position: center;
background-size: cover;
content:"";
background: -webkit-gradient(linear, left top, left top, from(rgba(255,255,255,0.1)), color-stop(70%, #fff));
background: -webkit-linear-gradient(left, rgba(255,255,255,0.1), #fff 70%);
background: linear-gradient(to right, rgba(255,255,255,0.1), #fff 70%);
display: inline-block;
position: absolute;
width: 50%;
height: 100px;
bottom: -100px;
right: 0;
}
.block-a:before {
background: -webkit-gradient(linear, right top, left top, from(rgba(255,255,255,0.1)), color-stop(70%, #fff));
background: -webkit-linear-gradient(right, rgba(255,255,255,0.1), #fff 70%);
background: linear-gradient(to left, rgba(255,255,255,0.1), #fff 70%);
left: 0;
}

.block-b {
height: 200px;
position: relative;
}
</style>
</head>
<body>
<div class="block-a">
INTERVIEW
</div>
<div class="block-b">
RECRUIT TIPS
</div>
</body>
</html>
    • good
    • 0
この回答へのお礼

ありがとうございます!!!とても助かりました。

お礼日時:2018/12/16 18:13

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

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

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

Qfloatを指定したdiv内のimg要素が14pxほど下がって表示される

初心者質問です。
img要素をfoat:left;などを指定したdiv要素内に置くと、必ず14pxほど下がって表示されてしまいます。
position:relativeなどで持ち上げると、そのdiv全体でリンクさせる場合、14px分カーソルに反応する範囲が下にはみ出してしまいます。

imgをズレないように表示させるためにはどうすればよいでしょうか。

Aベストアンサー

こんにちは

例えば、以下のCSSを追加したらどうなりますか?
p { padding:0; margin:0; }

Qスタイルシートの記載エラーについて。 このエラーはなんていう意味のエラーでしょうか? エラーの意味が

スタイルシートの記載エラーについて。
このエラーはなんていう意味のエラーでしょうか?
エラーの意味がわかる方、何卒、アドバイスお願いいたします。
またストークに固定フッターを記載するスタイルシートで下記のアドレスを参考にして作成いたしました。
https://setsuyaku-rich.com/stork-footer/

Aベストアンサー

こんにちは

>Unknown property 'box-img_border'
って書いてあるみたいなので、そのまんま、「'box-img_border'なんて知んないよ」ってことではないの?

普通のHTMLで一般的なブラウザを対象としたCSSなら、今のところ'box-img_border'なる属性は存在しないと思います。
接続子に「_」を使うことも、現在のところないはずです。
https://developer.mozilla.org/ja/docs/Web/CSS/Reference

環境が違うとか、あるいは、スクリプト等で拡張している独自のCSS属性とかであるのなら、また別ですが・・・

Qweb・レスポンシブデザインについて

コーディング初心者です。

画像の右側にテキストが入るようなコーディングをしました。(※画像参照)
PC表示では成功したのですが、スマホ表示がうまくいきません。

スマホ表示では画像を非表示にしてテキストだけ流したいのですが、
まず画像をdisplay:none;にしたところ、
画像は非表示になったのですが、テキストボックス?が左に寄ってしまって、
右側に変な空間が出来てしまいます。(※画像参照)

タグはこんな感じです。タグの書き方を紹介しているサイト様のものを参考にしました。

【HTML】
<div class="box">
<img src="画像.jpg" width="400px">
<div class="right">
<p>この文章はダミーです~</p>
</div></div>


【CSS @media screenの部分】※max-width:1000px

.box {
margin: 10px 0;
float: left;
background: #CEECF5 ;
}
.box img {
max-width: 30%;
float: left;
}
.box p {
margin: 0;
padding: 10px;
text-align: left;
font-size: 1.2em;
line-height: 1.6em;
}
.right {
width: 70%;
float: left;
}


%指定しているwidthの部分を無効にすれば治るのでは?と思っているのですが、
どうやったら解除されるのか、わかりません。
floatをnoneにしてみたり、widthを100%にしてみたりしているのですが、
見当違いなことをしているのか、クラス名の指定場所を間違えているのか、全く変わりません。

いったい何が邪魔をしているのでしょうか…
そもそもこういう方法自体が古かったりしますか?

これだけでは判断できないかもしれませんが、
お詳しい方、教えていただけると嬉しいです。

よろしくお願いします。

コーディング初心者です。

画像の右側にテキストが入るようなコーディングをしました。(※画像参照)
PC表示では成功したのですが、スマホ表示がうまくいきません。

スマホ表示では画像を非表示にしてテキストだけ流したいのですが、
まず画像をdisplay:none;にしたところ、
画像は非表示になったのですが、テキストボックス?が左に寄ってしまって、
右側に変な空間が出来てしまいます。(※画像参照)

タグはこんな感じです。タグの書き方を紹介しているサイト様のものを参考にしました。

【HTML...続きを読む

Aベストアンサー

古い方法でも今のブラウザは、全てサポートされていますので大丈夫です。
#1さんのように、CSS3のFLEXでも良いでしょうが、
もっとも単純なのは、画像に回り込み(float)させるだけです。

で、「←こうしたい」のご希望ですが、
右側に約半分もの空白スペースがあるのは、おかしくないですか??


<div class="box">
<img src="画像.jpg" alt="***">
<p>この文章はダミーです~</p>
</div>


.box {
width:100%; overflow: hidden;
margin: 10px 0;
float: left; /* ←これ不要なのでは? */
background: #CEECF5 ;
}
.box img {
max-width: 30%; /* ←minも加えると良い */
float: left;
margin-right:10px;
}
.box p {
margin: 0;
padding: 10px;
text-align: left;
font-size: 1.2em;
line-height: 1.6em;
}

/* 480px以下 */
@media only screen and (max-width: 480px){
.box img { display: none;}
} /* //480px以下 */



CSSは、最初に両方を設定せずに、
PC用か、スマホ用か、どちらかだけを基本に書いて、
その後から、@mediaクエリでどちらか一方を編集するだけです。

その他、

<p>の中に画像を入れても構いませんし、その場合には、<div>すら不要になり、もっとも簡素化出来ます。

背景画像にして、背景分のpadding-leftでも可能です。

古い方法でも今のブラウザは、全てサポートされていますので大丈夫です。
#1さんのように、CSS3のFLEXでも良いでしょうが、
もっとも単純なのは、画像に回り込み(float)させるだけです。

で、「←こうしたい」のご希望ですが、
右側に約半分もの空白スペースがあるのは、おかしくないですか??


<div class="box">
<img src="画像.jpg" alt="***">
<p>この文章はダミーです~</p>
</div>


.box {
width:100%; overflow: hidden;
margin: 10px 0;
float: left; /* ←これ不要なのでは? */
background: #CEECF5...続きを読む

Qあるタグが反応しません...

mi:first-letter {
font-size: 2em;
color: #7172ac;
}

あるサイトで見つけて使おうと思ったのですがこれが反応しません...どうすれば...

Aベストアンサー

mi とは何でしょうか?
div.mi か div#mi の間違いである可能性はないですか?

疑似要素 ::first-letter については以下を参照
https://developer.mozilla.org/ja/docs/Web/CSS/::first-letter

QCSSについてです。

CSSを使って、
スクロールしても常に指定の位置(右下とか)にいてそれをクリックすると指定の位置(一番上)に戻るボタンみたいなものを作りたいんですけどどう書けばいいですかね?

⚠︎縦スクロールの物を作ろうとしてます。JavaScriptは使いたくないです。

Aベストアンサー

こんにちは

HTMLやCSSの解説サイトはたくさんありますので、そのあたりで調べればすぐに見つかると思いますけれど…
実現方法もいろいろ考えられると思いますので、ほんの一例です。

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<style type="text/css">
#trigger { position:fixed; bottom:0; right:0; text-decoration:none; }
#trigger button { color:black; padding:3px 10px; }
</style>
</head>
<body>
<a name="top" id="top">The TOP is here</a>

<div style="height:600px; background-color:#FFE;"></div>
<div style="height:600px; background-color:#EFF;"></div>
<div style="height:600px; background-color:#FEF;"></div>

<a href="#top" id="trigger"><button>to The TOP</button></a>
</body>
</html>

こんにちは

HTMLやCSSの解説サイトはたくさんありますので、そのあたりで調べればすぐに見つかると思いますけれど…
実現方法もいろいろ考えられると思いますので、ほんの一例です。

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<style type="text/css">
#trigger { position:fixed; bottom:0; right:0; text-decoration:none; }
#trigger button { color:black; padding:3px 10px; }
</style>
</head>
<body>
<a name="top" id="top">The TOP is here</a>

<div style="height:600px; backgr...続きを読む

QHTMLで簡単なアニメーションを作成したい。

皆様のお知恵を拝借いたしたく、ここに質問させていただきます。

HTMLを使って簡単なアニメーションを作成したいです。
具体的には、
横に倒した円柱を上下させるだけのものですが、
この上下させる動作を指示するファイル(XY座標の数字)から読み取り、その指示どおりに円柱が動くものを作成したいです。できればその円柱を3次元で表現したいです。

以前にhtmlとcanvasで絵描きができるhomepageを作成したことがあります。
この応用と考えて降りましたが、ネットなどで調べてもcanvasでできるのかとの疑問がありました。

そこで質問ですが、
(1) HTMLで上記のようなことは可能でしょうか?
(2) もしcanvas以外のもので簡単に作成できるようであれば、そのプログラムの名前を知りたい。
(3) 可能であれば、上記の様なものに近いプログラムをみたことがある、参考にできそうなサイトをご紹介いただければ幸いです。

いろいろご注文をしておりますが、何卒よろしくお願いします。

Aベストアンサー

こんにちは

>横に倒した円柱を上下させる
円柱自体の形が変わらないのであれば、画像にしてしまえば簡単になりますね。
(画像を上下移動するだけのことになる(?)ので、canvas等も必要ありません)
見る向きが変化して、円柱の表示が固定画像ではできないような場合は、canvas等を利用して計算しながら描画することが必要になりそうです。
(2次元座標で図が描ければ良いので、対象をオブジェクト化できるSVGなどの方が便利かもしれません。)

移動する内容があらかじめ決まっているのなら、CSSアニメーションだけでの移動も可能ですが、外部データの内容に応じて可変的に移動するということのようですので、その部分はjavascript利用ということになりそうです。

よって。
(1)可能です。
(2)固定画像でも良ければCanvasは不要。(使っても良いですが)
   円柱の見た目も変化するのなら、canvas、SVGなどなど。
(3)画像を移動するだけのスクリプトなら世に溢れています。
   内容の良し悪しは別として、以下は一例です。
http://www.myu.ac.jp/~akizuki/sct/object_ns/index.html

また、
>できればその円柱を3次元で表現したいです。
というのが、どの程度の意味合いなのか不明ですが、3Dを対象としたライブラリもいろいろ作られているので、場合によってはそのようなものを利用した方が簡単かも。
以下は、WebGL利用のThree.jsを利用した例です。
http://www.potree.org/potree/examples/animation_paths.html

こんにちは

>横に倒した円柱を上下させる
円柱自体の形が変わらないのであれば、画像にしてしまえば簡単になりますね。
(画像を上下移動するだけのことになる(?)ので、canvas等も必要ありません)
見る向きが変化して、円柱の表示が固定画像ではできないような場合は、canvas等を利用して計算しながら描画することが必要になりそうです。
(2次元座標で図が描ければ良いので、対象をオブジェクト化できるSVGなどの方が便利かもしれません。)

移動する内容があらかじめ決まっているのなら、CSSアニメーショ...続きを読む

Q画像を形そのままで横に並べたい

画像を形そのままで並べたくてcolumn-countを使っているのですが、左の図のように並びます
右の図のように並べる方法はありますか?

Aベストアンサー

.sample01 li{
list-style:none;
display:inline-block;
width:23%;
text-align:center; /* これ追加 */
}

Qウエブサイトに掲げる綺麗な画像が欲しいけど、自分はデザインのツールなどの使い方は知らない、どうしたら

ウエブサイトに掲げる綺麗な画像が欲しいけど、自分はデザインのツールなどの使い方は知らない、どうしたらいいですか?ただの画像でもウエブサイト作成の会社に依頼する必要なのか?フリーランスの方のほうがもっとよいかと思ってて、どうやってそのような方と連絡取れるでしょうか?もしかしたら他いい方法があれば教えていただければ助かります。

Aベストアンサー

とりあえず フリー素材 を利用することを考えましょう。
https://creive.me/archives/10744/

かなり高度な画像編集ができるフリーソフトもあるようです。
この機会に少しいじれるようになってみるのも良いのではないでしょうか。
https://forest.watch.impress.co.jp/library/nav/genre/pic/piccam_picedit.html

Qホームページを作っているのですが、PCサイトとスマホサイトを自動切り替えする方法が分かりません。

ホームページ作りを始めたばかりの初心者です。
ホームページ作りはホームページビルダークラシックで、白紙から作っています。htmlで作っていて、そのhtmlも基本しか分かっていません。
PCサイト用のページとスマホサイト用のページを作ったのですが、PCから閲覧したときはPC用のページが、スマホから閲覧したときはスマホ用のページが表示されるようにするには、どうすればいいのでしょうか?
初心者でもできるでしょうか?初心者でも可能であるならば、出来るだけ簡単にかみ砕いて教えていただけると、大変助かります。方法を検索しても分かりませんでした。

Aベストアンサー

最近のホームページは、レスポンシブ・デザインって技術を使って作られています。
ブラウザ画面の解像度に応じて、自動的に画面のレイアウトを変化させるようにしているのです。
たとえば、画面が小さいときは、縦に並べるとか、画像は省略するなどをしているのです。

マスターすべき必須技術としては、さしあたり、Bootstrap、jQuery、JavaScriptです。
なので、htmlのみしか知らないのでは、対応できないでしょう。
これらを覚えるために色々と参考書を購入して勉強しましょう。

ちなみに、紙芝居的なホームページではなく、「ブログやりたい」とか「アンケートページを作りたい」「会員管理できるようにしたい」など動的なページ、ユーザ管理が必要となれば、データベース処理も必要ですし、セキュリティ管理は必須となります。
ですので、上記に加えて、PHPあるいは、C#とかJavaとかSQLとかの言語や、AJAX、クロスサイトスクリプト攻撃への防止技術も盛り込まないといけなかったりします。

ですので、初心者が自力でやるのは無理でしょうね。

最近は、WordpressなどのCMSが流行しています。
初心者は、こういうソフトを使うしかないと思います。

最近のホームページは、レスポンシブ・デザインって技術を使って作られています。
ブラウザ画面の解像度に応じて、自動的に画面のレイアウトを変化させるようにしているのです。
たとえば、画面が小さいときは、縦に並べるとか、画像は省略するなどをしているのです。

マスターすべき必須技術としては、さしあたり、Bootstrap、jQuery、JavaScriptです。
なので、htmlのみしか知らないのでは、対応できないでしょう。
これらを覚えるために色々と参考書を購入して勉強しましょう。

ちなみに、紙芝居的なホームペ...続きを読む

QCSSで「!important;」よりも優先にすることはできないですか?

CSSで「!important;」よりも優先にすることはできないですか?

Aベストアンサー

div.article-body-outer div.article-body img.classname {
height: 240px !important;
margin: 10px !important;
}


人気Q&Aランキング