(X)HTML/CSS/Dreamweaverの質問に優しく答えるスレ20at HP
(X)HTML/CSS/Dreamweaverの質問に優しく答えるスレ20 - 暇つぶし2ch896:Name_Not_Found
16/03/04 21:59:00.45 .net
■はcssでborderだのbeforeだのwebfontでやるより楽だよな

897:Name_Not_Found
16/03/04 22:42:21.93 .net
仮想環境等は?
日本語フォントをオフにすることできるのか?

898:Name_Not_Found
16/03/04 22:54:55.46 .net
ふと思ったけど正方形ブロックを幅も高さも1emにしたら割と簡単にイケルんちゃう?

899:Name_Not_Found
16/03/04 22:55:55.11 .net
>>897
英語OS入れるだけっしょ。
旧modern.ieで配られてる奴ならハナから英語だし。

900:Name_Not_Found
16/03/04 23:11:36.40 .net
>>898
わかってないなあ。

<style>

</style>
<p><span><span>こんにちはさようなら</p>

901:Name_Not_Found
16/03/04 23:19:44.43 .net
↑誤爆

<style>
span{
display:inline-block;
margin-right:0.5em;
width:1em;
height:1em;
background-color: #000;
}
</style>
<p><span></span>こんにちはさようなら</p>

なんて書くより、

■こんにちはさようなら

だけで済む魔法の■だぞ

902:Name_Not_Found
16/03/04 23:23:54.11 .net
短い記述どころか、CSSすら不要でデザインができるという魔法の■だ。
しかも「しかく」と打って変換するだけでいいんだぞ

903:Name_Not_Found
16/03/04 23:25:11.09 .net
英語OSだろうが、日本語フォントが入ってたら検証の意味ない

904:Name_Not_Found
16/03/05 00:15:08.25 .net
baseタグでベースURLを決めているときに
<a href="#top">上へ</a>
みたいなことをやると、ベースURLにすっ飛ぶんだけど
まあ当たり前なんだろうけどちょっとこのときだけは
ベースじゃなくて当該ページ内でジャンプしてほしい
どうすればいいかな

905:Name_Not_Found
16/03/05 00:17:04.40 .net
>>901
それとか罫線記号とか、便利よね

906:Name_Not_Found
16/03/05 08:19:12.94 .net
>>886
> unicodeコードポイント指定しとけば2byteフォント対応してないとしても表示できるんじゃないの?
実体参照はどこを参照すると思ってる?
ブラウザがフォントを内蔵してると思っているのかな

907:Name_Not_Found
16/03/05 08:54:58.96 .net
そんなあなたに疑似クラス

908:Name_Not_Found
16/03/05 13:53:34.12 .net
実体参照はどこを参照してんの?

909:Name_Not_Found
16/03/05 15:42:52.18 .net
詳しい方、教えてください
URLリンク(jsfiddle.net)
ここのbackgroundをひとつにまとめることは出来ないものでしょうか

>>873さんと>>876さんのやり取りから出来るものと思いまして。
よろしくお願いします

910:Name_Not_Found
16/03/05 17:44:40.90 .net
■って英文で見かけないね
日本語ではマーカーによく使うけど

911:Name_Not_Found
16/03/05 17:55:42.73 .net
・(ナカグロ)もないよね。
リストっぽい表現をテキストだけでするとき、あちらさんはどうやってるんだろ?

912:Name_Not_Found
16/03/05 18:05:16.19 .net
■をマーカーとして使うくらいならもっと洒落たアイコン使うわ

913:Name_Not_Found
16/03/05 18:22:38.23 .net
■とか●、簡単で使いやすくていいじゃない

914:Name_Not_Found
16/03/05 18:32:07.27 .net
list-style-typeプロパティで指定してんじゃね。半角しかないしな。

915:Name_Not_Found
16/03/05 19:02:33.61 .net
list-style-typeプロパティのあの四角って、テキストではどうやって出すの?

916:Name_Not_Found
16/03/05 19:06:10.75 .net
>>909
まずは 1 枚の background ごとに、ひとまとめにする宣言を作ってみる
それができたら、それぞれの値をカンマで区切ってつなげるだけ

917:Name_Not_Found
16/03/05 19:49:44.89 .net
>>915
テキストじゃなくてブラウザエンジンの描画だよ。

918:909
16/03/05 20:53:16.56 .net
>>916
レスありがとうございます。

URLリンク(jsfiddle.net)

最初から値にカンマが入っていると動かないのか、
試してみましたが自分では解決できませんでした

もうしばらく調べてみます。
ありがとうございました。

919:Name_Not_Found
16/03/05 22:41:12.51 .net
>>917
半角じゃないの?

920:Name_Not_Found
16/03/06 01:38:50.92 .net
>>919
じゃないよ。全角半角の概念がないブラウザによる描画

921:Name_Not_Found
16/03/06 03:08:47.38 .net
>>908
フォント

922:Name_Not_Found
16/03/06 03:26:49.56 .net
hrの線と同じで、リストのあれらは文字ではない何かって事なんだろうね。

923:Name_Not_Found
16/03/06 03:30:33.89 .net
>>918
2行目と3行目のbackground、ポジションとサイズ、端折ったらあかん。
デフォルト値が再指定される。
今回の場合では1行目のグラデ指定がなかったことにされる。

924:Name_Not_Found
16/03/06 03:37:30.79 .net
よろしくお願いします

URLリンク(www.coolwebwindow.com)のno.16
URLリンク(www.coolwebwindow.com)

メニューバー(黒い部分)を二段にすることはできますか。

925:Name_Not_Found
16/03/06 05:02:28.35 .net
>>924
二股の意味が分からん。

926:Name_Not_Found
16/03/06 05:03:00.19 .net
ごめん、二段か。すんません。

927:909
16/03/06 10:45:01.61 .net
>>923
レスありがとうございます。

URLリンク(jsfiddle.net)

試行錯誤してみましたがbackground-sizeを入れると機能しませんでした。
URLリンク(jsfiddle.net)上では動かないようですが、
ふたつの正方形の右下と左上が重なるようにしたいです。

 ■
positionの後に/で区切ってsizeを入れると見かけましたが、
うまくいかないものですね。

928:Name_Not_Found
16/03/06 11:18:24.22 .net
擬似要素2枚に分けて重ねれば

929:909
16/03/06 12:18:49.02 .net
>>928
レスありがとうございます。

該当要素はすでに別の箇所で疑似要素を両方とも使用しており、
背景として使用したいのでbackgroundで作成したいです。
ご助言、感謝します。

930:Name_Not_Found
16/03/06 13:50:47.25 .net
>>921
だから、閲覧者の環境に■を表示できるフォントが入ってないと、
実体参照で記述しても表示されないってことなんでしょ?

931:Name_Not_Found
16/03/06 14:14:59.02 .net
>>930
文字化けすんのがオチちゃいますか

932:Name_Not_Found
16/03/06 14:53:09.89 .net
海外でも■は表示できているっぽいぞ。
URLリンク(en.wiktionary.org)
font-family: Symbola,sans-serif; とかで表現しているな。
★をURLに含んでいるようなサイトも海外にある。

933:Name_Not_Found
16/03/06 16:18:07.57 .net
>>924もどなたかお願いします

934:Name_Not_Found
16/03/06 16:27:58.15 .net
なんで二股するの?

935:Name_Not_Found
16/03/06 16:33:15.15 .net
疑似要素って何ですか?

936:Name_Not_Found
16/03/06 16:35:48.56 .net
かなりの初心者なのですが、以下の画像のように
URLリンク(fast-uploader.com)

動画を縮小させて表示し、その周りに静止画を表示したいと考えています。
HTML5を使えば良いのでは?とアドバイスを受けたことがあるのですが、
具体的にどうすれば良いかピンと来ません。

どこかに良いサンプルがあれば教えていただけないでしょうか

937:Name_Not_Found
16/03/06 16:41:18.05 .net
>933
HTMLとCSSの基礎が分かっていれば簡単にできるよ

938:Name_Not_Found
16/03/06 16:50:17.74 .net
>>930
そうだよ
だからこそ>>886は意味不明だと思う

939:Name_Not_Found
16/03/06 16:59:09.76 .net
html 画像 張り付け
で検索すればいろいろ出そう

940:Name_Not_Found
16/03/06 17:22:12.95 .net
つーかwebフォントでいんじゃね?
二次利用可能なフリーフォント探してサブセットフォント作って読み込ませる感じ?

941:924
16/03/06 17:57:50.79 .net
924ですがどなたかお願いできないでしょうか。

これで最後です。

942:Name_Not_Found
16/03/06 18:11:02.78 .net
>>924
ulを二回書けば?

943:924
16/03/06 18:15:35.19 .net
>>942
無事解決しました。
ありがとうざいました!!!!!

944:Name_Not_Found
16/03/07 02:24:33.66 cO8E+L0J.net
1. input[type="submit"]とinput[type="button"]
2. input[type="submit"]:hoverとinput[type="button"]:hover
をそれぞれ値が同じなので、CSSに併記したいのですが、カンマ区切りは以下のどれが正しいでしょうか?

1.
input[type="submit"] , input[type="button"] {……}
input[type="submit"] , [type="button"] {……}

2.
input[type="submit"]:hover , input[type="button"]:hover {……}
input[type="submit"]:hover , [type="button"]:hover {……}
input[type="submit"] , [type="button"]:hover {……}

945:Name_Not_Found
16/03/07 03:29:44.59 .net
どちらの場合もinputを省略してる箇所があるけど、その根拠というか理屈は何?

946:Name_Not_Found
16/03/07 03:40:29.52 .net
よろしくお願いします

URLリンク(www.coolwebwindow.com)のno.16
URLリンク(www.coolwebwindow.com)

メニューバー(黒い部分)の色を変えたいのですが、
cssファイルを秀丸を開いてもどこを触って良いのかわかりません。

配色の変更法を教えていただけないでしょうか。

947:Name_Not_Found
16/03/07 08:32:54.95 .net
cssを一から勉強し直せとしか

948:Name_Not_Found
16/03/07 08:54:12.88 .net
>>946
それぐらい独学しろ

949:Name_Not_Found
16/03/07 10:21:09.41 .net
>>946
cssのmenuって書いてある所いじってみて

950:Name_Not_Found
16/03/07 13:13:50.59 0VQPZJIG.net
htmlをいじらずcssのみで下記順序を入れ替えることは可能ですか?
コンテナ
 ナビ
 コンテンツ
これをスマホで見たときだけ以下のようにする。
コンテナ
 コンテンツ
 ナビ
縦寸が可変するコンテンツの真下にナビが来るように順序を変えるcss記述法はありますか?
z-indexで順序返してみたんですがナビが来る縦位置を固定しか出来ず。。

951:Name_Not_Found
16/03/07 13:22:09.20 .net
できるお(´・ω・`)
応援するお(´・ω・`)

952:Name_Not_Found
16/03/07 13:32:15.67 .net
>>946

ブラウザは、FireFoxで、
アドオン FireBugを入れて、
FireBugのペイン開いて、
オレンジ色のゴキブリみたいなアイコンの隣にある矢印をクリックして、
WEB画面の黒いメニューをクリックしやがれ!!!

953:944
16/03/07 13:32:27.43 .net
>>945
グループ化する際に省略できる箇所があったりするのかなぁ?と思った次第です

1.
input[type="submit"] , input[type="button"] {……}

2.
input[type="submit"]:hover , input[type="button"]:hover {……}

で正解でしょうか?

954:950
16/03/07 13:42:10.80 0VQPZJIG.net
>>950です
top:指定で行けそうですね、有り難うございました。

955:Name_Not_Found
16/03/07 14:20:02.64 .net
ドヤ(´・ω・`)

956:Name_Not_Found
16/03/07 16:38:47.10 .net
ie用のメディアクエリの指定って
@media all and (-ms-high-contrast:none)
↑こんなんだけど

chrome用のメディアクエリの指定ってあるん?

957:956
16/03/07 16:40:42.10 .net
あったわ('ω')

958:944
16/03/07 19:53:38.57 .net
セレクタのグループ化は>>953であってますでしょうか?
どこか省略が可能な箇所はありますか?

959:Name_Not_Found
16/03/07 20:35:41.95 .net
>>958
素朴な疑問なんだが自分で試さないの?

960:Name_Not_Found
16/03/07 21:09:01.93 .net
>>958
,区切りのセレクタの1つめ2つめは別にグループとか関連性はないよ

961:944
16/03/07 21:14:43.76 .net
>>959-960
すみません。
試してみて不具合はなかったのですが(IE11)、環境が変わると違う挙動するとかあるかもと思い

962:Name_Not_Found
16/03/07 21:21:07.75 .net
fc2のテンプレートのcss編集で質問です。
ヘッダー画像と背景を変更してヘッダー画像は左右上下余白ないように設定できました。ですがブラウザを縮小した時ヘッダー画像がはみ出して横スクロールバーが出てしまいます。背景も途切れてしまいます。
改善できるcssコード分かる人いたら教えて下さい。
よろしくお願いします。

963:Name_Not_Found
16/03/07 21:41:41.56 .net
>>962
background-imageあとはググれ

964:Name_Not_Found
16/03/07 23:31:15.98 .net
>>961
この機会に環境(ブラウザ)を少し増やしてみませんか。
ChromeやFirefox、CSSの構造を調べる機能もあって便利ですよ。

965:Name_Not_Found
16/03/08 19:18:15.99 .net
javascriptは<head>内ではなく、</body>の直前に記載するのが良いとよく見かけるのですが
スムーススクロールやポップアップ系のスクリプトはそうした方が良いのでしょうか?

966:Name_Not_Found
16/03/08 20:00:35.39 .net
>>965
あれってレンダリングブロックを避けましょうって文脈での話なので、head内に書いたらアカンわけではないよ?

967:Name_Not_Found
16/03/08 21:32:11.80 .net
>>965
googleアナリティクスが昔は、</body>の直前推奨だったが、
現在は終了タグ </head> の直前だ。

jsファイルを読み込むのは1箇所にまとめた方がページ表示速度が上がる。
よって</head> の直前推奨。

但しjsの処理内容によっては末端の方が都合が良い場合もある


最新レス表示
レスジャンプ
類似スレ一覧
スレッドの検索
話題のニュース
おまかせリスト
オプション
しおりを挟む
スレッドに書込
スレッドの一覧
暇つぶし2ch