¿Cual es la diferencia entre position: relative, position: absolute y position: fixed?

publicado por: Anonymous Sé que estas propiedades de CSS sirven para posicionar un elemento dentro de la página. Sin embargo, ¿cuándo debería usar cada una de ellas? solución La propiedad position sirve para posicionar un elemento dentro de la página. Sin embargo, dependiendo de cual sea la propiedad que usemos, el elemento tomará una referencia…(Continue Reading)

input[type=checkbox] に対して :before, :after 疑似要素が使えるのはChromeだけ?

投稿者: Anonymous チェックボックスと連動して変化する表示を CSS だけで実装できないかと、以下のようなコードを書きました。これは Chrome 46 では期待通りに動き、チェック状態がテキストで表示されます。 _x000D_ _x000D_ input:before {_x000D_ content: ‘not checked’;_x000D_ position: absolute;_x000D_ top: 30px;_x000D_ }_x000D_ input:checked:before {_x000D_ content: ‘checked’;_x000D_ } _x000D_ <input type=”checkbox” /> _x000D_ _x000D_ _x000D_ しかし Firefox や IE 11 では動作せず、開発者ツールで見ると :before が効いていないようです。 これは Chrome の独自仕様に過ぎず、他ブラウザでの動作は期待しない方がいいのでしょうか? 解決 これは Chrome の独自仕様に過ぎず、他ブラウザでの動作は期待しない方がいいのでしょうか? はい、期待しないほうが良いと思います。 CSS 2 では img 要素で画像が表示されない場合に、設定しておいた before, after…(Continue Reading)

¿Como hacer para agregar un acceso directo de una web a la pantalla de inicio automaticamente?

publicado por: Anonymous Disculpen el español, quiero hacer que un boton en mi web le de la orden al navegador de android, que cree un acceso directo de la pagina WEB, pero que lo haga automaticamente que el usuario no tenga que hacer nada mas sino, pulsar el boton ¿alguna idea? solución No es posible…(Continue Reading)

jQueryを使ってテーブルの複数行を表示、非表示にしたい

投稿者: Anonymous 表を作成していて初期は隠し行ありの状態でその行をクリックすれば隠し行すべてが表示されるものを作成しております。 現状下記サイトを参考にして作成したのですが、1行しか開閉できません。(初期状態で残りの行も見えてしまう) http://kachibito.net/snippets/expand-table-rows-using-jquery-html-and-css 複数行開閉する方法があれば教えて頂きたくお願いします。尚、理想の画面は次の通りです。 初期 _x000D_ _x000D_ <style type=”text/css”>_x000D_ #table_detail tr:hover{_x000D_ background-color:#ddd;_x000D_ cursor:pointer;_x000D_ }_x000D_ #table_detail .hidden_row{_x000D_ display:none;_x000D_ }_x000D_ </style>_x000D_ <script src=”http://code.jquery.com/jquery-1.11.1.js”></script>_x000D_ <script>_x000D_ function show_hide_row( row ) { $( “#” + row ).toggle(); }_x000D_ </script>_x000D_ _x000D_ <!DOCTYPE html>_x000D_ <table border=1 id=”table_detail” align=center cellpadding=10>_x000D_ _x000D_ _x000D_ <tr onclick=”show_hide_row(‘hidden_row1’);”>_x000D_ <td colspan=”4″>第一次会員様</td>_x000D_ </tr>_x000D_ <tr id=”hidden_row1″ class=”hidden_row”>_x000D_ <th>名前</td><td>住所</td><td>電話番号</td><td>グループ</td>_x000D_…(Continue Reading)

Posicionar un radio button con imagen al lado del otro dentro de modal

publicado por: Anonymous No estoy pudiendo resolver el problema en el que aparece un radiobutton debajo del otro. Quiero colocarlo a la derecha del primero dentro del modal. Así me aparece: Y acá está el HTML de esa parte: <div class=”cc-selector”> <input checked=”checked” id=”visa” type=”radio” name=”credit-card” value=”visa” /> <label class=”drinkcard-cc visa” for=”visa”> <img src=”<?php echo…(Continue Reading)

Google ChromeでHTMLとCSSをモバイル表示をさせたときの画面サイズが異常です。

投稿者: Anonymous 現象 Google Chromeのモバイル表示を320×568pxに設定して、そのサイズに合わせたコード(HTMLとCSS)を書いていたのですが、VS CodeのLiveServer機能でGoogle Chromeのモバイル表示をさせると、980×1739pxの大きさになってしまいます。 期待値 Google Chromeのモバイル表示で、320×568pxの大きさで表示させること。 再現手順 下記のコードをGoogle Chromeのモバイル表示で実行すると再現できます。CSS設計の方式は、FLOCSSです。 index.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="./foundation/reset.css"> <link rel="stylesheet" href="./foundation/grid.css"> <title>Facebook</title> </head> <body> <div class="advice"> <i class="fas fa-mobile-alt"></i> <p>iPhone用Facebookで高速ブラウジング</p> </div> <div class="fbLogo"> <img src="./img/image_0.svg" alt="某SNSのロゴ"> </div> <div class="loginForm"> <input class="telNumEmail" type="tel email"> <div class="lineSpacing"></div> <input class="password" type="password"> <div…(Continue Reading)

Como convertir un HTML a PDF con jsPDF, sin perder los estilos CSS

publicado por: Anonymous tengo el siguiente HTML <!DOCTYPE html> <html lang=”es”> <head> <title>hola</title> <meta charset=”utf-8″> <link link=”” rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css” type=”text/css”> <link rel=”stylesheet” href=”https://v40.pingendo.com/assets/4.0.0/default/theme.css” type=”text/css”> <link href=”/public/css/app.css” rel=”stylesheet”> <script src=”https://code.jquery.com/jquery-3.2.1.slim.min.js” integrity=”sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN” crossorigin=”anonymous”></script> <script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js” integrity=”sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q” crossorigin=”anonymous”></script> <script src=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js” integrity=”sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4″ crossorigin=”anonymous”></script> <script src=”https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js”></script> <script src=”https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js”></script> </head> <body> <div id=”print”> <div class=”container”> <div class=”row”> <div class=”col-md-10 offset-md-1″> <p…(Continue Reading)

2倍サイズに書き出した画像が通常ディスプレイでぼやけてしまう

投稿者: Anonymous Retinaディスプレイ対応のため、画像、動画を2倍で書き出したのですが、Retinaディスプレイは綺麗に表示されますが、通常ディスプレイではぼやけてしまいます。 何か対応はありますか? 解決 Google Chrome で起こるのであれば画像サイズがちょうど2倍になっていなければぼやけることがあります。 img { -webkit-backface-visibility: hidden; } を適用することで解消されるかもしれません。 回答者: Anonymous

CSS: Propiedad: transition (ease, linear, ease-in, ease-out, ease-in-out)

publicado por: Anonymous Quisiera que me dieran una explicación de cada una de las propiedades que tiene la propiedad transition (ease, linear, ease-in, ease-out, ease-in-out) y en que caso o situaciones conviene usar una u otra, en el caso de la propiedad “linear” se que la transición comenzara de tal forma mencionada partiendo de cualquier…(Continue Reading)

¿Cómo personalizar el alto de una fila en una tabla HTML?

publicado por: Anonymous Tengo el siguiente código html para crear una tabla, lo coloco a modo de ejemplo, quiero que las filas de mi tabla se vean mas anchas (si funciona) y las mismas filas se vean mas altas (no funciona), investigando un poco me encontré lo siguiente: El atributo height no funciona en todos…(Continue Reading)

liの高さが中身のimgの高さより大きくなる。

投稿者: Anonymous liの高さが中身のimgの高さより大きくなりますが なぜなのでしょうか? インスペクターでも 高さが166になっています。 中身の画像の高さは160pxなのに、 liの高さは166pxになってしまいます。 *{ margin:0; padding:0; } として、リセットしてもいるのですが。 liの高さ:166px imgの高さ:160px <ul class=”box”> <li><img src=”image.png” alt=””></li> <li><img src=”image.png” alt=””></li> <li><img src=”image.png” alt=””></li> <li><img src=”image.png” alt=””></li> <li><img src=”image.png” alt=””></li> <li><img src=”image.png” alt=””></li> <li><img src=”image.png” alt=””></li> <li><img src=”image.png” alt=””></li> <li><img src=”image.png” alt=””></li> <li><img src=”image.png” alt=””></li> </ul> [css] @charset “UTF-8”; /* CSS Document */…(Continue Reading)

HTMLテキストフィールドの高さを合わせる方法は?

投稿者: Anonymous このTwitterページの上部ログインフォームにて、アカウント名フィールドとパスワードフィールドの上辺の位置が揃っています。 これを再現しようとCSSを考えているのですが、参考にデベロッパーツールで確認してもどこにその指定があるのか分かりません。 分かる方いらっしゃいますか?調べ方もご教示いただけたら助かります。 解決 これはCSSのFlexboxというスタイルが使用されているようです。 各inputフィールドは<div>でbox化されており、その親要素の<form>を見ると、display:flexというスタイルが適用されています。 これにより、<form>の子要素を横並びのレイアウトにすることができ、上辺の位置を合わせたようなスタイルになります。 以下サンプルです。 _x000D_ _x000D_ input {_x000D_ margin: 5px 10px;_x000D_ }_x000D_ _x000D_ .LoginForm {_x000D_ display: flex;_x000D_ } _x000D_ <h4>Flexbox未指定</h4>_x000D_ <div>_x000D_ <form>_x000D_ <div>_x000D_ <input type=”text” placeholder=”username”/>_x000D_ </div>_x000D_ <div>_x000D_ <input type=”password” placeholder=”password”/>_x000D_ </div>_x000D_ </form>_x000D_ <div>_x000D_ _x000D_ <h4>Flexbox指定</h4>_x000D_ <div>_x000D_ <form class=”LoginForm”>_x000D_ <div>_x000D_ <input type=”text” placeholder=”username”/>_x000D_ </div>_x000D_ <div>_x000D_ <input type=”password” placeholder=”password”/>_x000D_ </div>_x000D_…(Continue Reading)

¿Cómo superponer elementos por encima de un background con transparencia y textura?

publicado por: Anonymous Estoy realizando un Sistema Web responsivo, en el cual tenemos un fondo con transparencia y textura, sobre el cual se quiere agregar elementos que no queden por debajo de la transparencia. Ejemplo _x000D_ _x000D_ html,*{_x000D_ margin:0;_x000D_ padding:0;_x000D_ width: 100%;_x000D_ height: 100%;_x000D_ }_x000D_ _x000D_ .fondoLogin{_x000D_ max-width: 100%;_x000D_ max-height: 100%;_x000D_ background-color: red;_x000D_ }_x000D_ .fondoLogin:before{_x000D_…(Continue Reading)

@Styles.Render no funciona en servidor

publicado por: Anonymous Estimados amigos de Stackoverflow, tengo el siguiente problema: Estoy desarrollando una aplicación ASP.NET MVC 4, la que he subido a un servidor Azure. El tema es que cuando estoy trabajando de manera local, compilo y corro la aplicación en el servidor local se me ven todos los estilos como corresponde y todo…(Continue Reading)

¿ Como poner un logo en la barra de navegación?

publicado por: Anonymous Hola estoy creando mi sitio web con la ayuda de todos y trato de poner un logo en la parte izquierda de la barra de navegaciòn, pero hasta ahora solo conseguí un ejemplo que me hace enorme la barra de navegación. <a class=”navbar-brand” href=”#”> <img id=”logo” src=”images/logo-1.png” > </a> No se como…(Continue Reading)

メガメニューのトグルがうまく行かない

投稿者: Anonymous ヘッダーにメガメニューを実装しようとしています。 下記スニペットのような実装をしているのですが、 初めて.nav(または.nav__item)をホバーした場合はslideDownで開く .nav内でかつ.nav__itemを行き来する場合はfadeInとhideで切り替え .navのエリアから出た場合はslideUpで閉じる ということがやりたいです。 .nav内にいる場合は.navに.is-activeを付与して is-activeがあれば.nav__itemをfadeIn,hideする なければ.nav__itemをslideDown,slideUpする 上記の考えで大丈夫だと思っていましたが、.navを出た際にis-activeが消えるより早くitemのhideが実行されてしまいました。 delayやsetTimeoutでタイミングをずらせば出来そうではありますが、 あまりそういうことはやりたくないと感じました。 何か良い実装方法はありますでしょうか。 ご回答のほど、よろしくお願いいたします。 _x000D_ _x000D_ $(function(){_x000D_ const $nav = $(‘.nav’);_x000D_ const $item = $(‘.nav__item’);_x000D_ _x000D_ $nav.hover(_x000D_ function(){_x000D_ $nav.addClass(‘is-active’);_x000D_ },_x000D_ function(){_x000D_ $nav.removeClass(‘is-active’);_x000D_ }_x000D_ );_x000D_ _x000D_ $item.hover(_x000D_ function (){_x000D_ const $this = $(this);_x000D_ if($nav.hasClass(‘is-active’)) $this.find(‘.megamenu__body:not(:animated)’).fadeIn();_x000D_ else $this.find(‘.megamenu__body:not(:animated)’).slideDown();_x000D_ },_x000D_ function (){_x000D_ const $this = $(this);_x000D_…(Continue Reading)

como puedo poner un div debajo de otro (css)

publicado por: Anonymous Hola estoy intentando poner un div debajo de otro: <div class=”wrap”> <div class=”lowNav”> <a href=”#” class=”search”>&nbsp;<span></span>&nbsp;</a> <a href=”#” class=”nav”>&nbsp;<span></span>&nbsp;</a> </div> <div class=”searchbox”> <form action=”http://google.com” method=”get” target=”_self”><input type=”hidden” name=”customize_messenger_channel” value=”preview-0″><input type=”hidden” name=”customize_changeset_uuid” value=”639cac79-978a-4d85-8d32-584c9d1c87d9″><button name=”search” class=”btn”> <span> </span></button> <input type=”text” name=”s” autocomplete=”off” value=””></form> <div class=”autocomplete” style=”display: none;”> </div></div><div class=”nav”> <ul class=”sections”> <li> <div class=”menu”><ul>…(Continue Reading)

:before, :after 疑似要素をコピーさせることができるか?

投稿者: Anonymous CSSでスタイル付けをしている際にリストの先頭にそれぞれ共通するテキストがあるのでこれを擬似要素で作ろうと思いました li::before { content: “共通テキスト”; } <ul> <li>項目A</li> <li>項目B</li> <li>項目C</li> </ul> そのままだと擬似要素のテキストだけコピーできないようなのですがなぜコピーできないのでしょうか? 追加のCSSかJSを使う必要がありますか?それとも擬似要素以外を使う方がいいですか? ※開発者ツールを使えば選択できるようです 解決 なぜ before, after 擬似要素のテキストがコピー出来ないのか before, after 擬似要素のテキストがコピー出来ない理由は、端的にいえば、ドキュメントツリーにそれらの内容が存在しないからです。以下でもう少し詳細に説明します。 まず、 Cascading Style Sheets Level 2 Revision 2 の 12 章によれば、コンテンツは 2 つの方法により生成されます。1 つは content プロパティを持つ before, after 擬似要素により生成され、もう 1 つは display プロパティに list-item 値を持つ要素により生成されます。 12 Generated content, automatic numbering, and…(Continue Reading)

imagen html en android no se ajusta a la pantalla

publicado por: Anonymous la imagen no se adpata al tamaño de pantalla de cada dispositivo. En dispositivos como smartphones es necesario hacer zoom- para adaptar la imagen a la pantalla y en dispositivos grandes como tablets la imagen se rodea de un marco blanco, quedando mas pequeña que la pantalla. La imagen queda como se…(Continue Reading)

Flexboxの要素の大きさを画面サイズによらず固定したい

投稿者: Anonymous Flexboxでjustify-contentやalign-itemsを使うと簡単に中の要素を中央揃えさせることができますが、画面サイズによって、要素の大きさが変わってしまいます これを固定することはできますか? flexboxを要素を簡単に中央揃えできるbox(画面サイズによって伸び縮みしてほしくない)として使いたいのですがどうすればいいのでしょうか? widthやheightを使っても上手くいきませんでした 解決 flex-grow: 0; flex-shrink: 0; とすると画面幅によらず、widthに従います。(高さに関しては未検証です。) widthでなくflex-basisを使うのならばflexショートハンドを使って、 flex: 0 0 10em; の様に指定する事も出来ます。 _x000D_ _x000D_ div{_x000D_ border-style: solid;_x000D_ }_x000D_ .box{_x000D_ display: flex;_x000D_ justify-content: center;_x000D_ border-color: blue;_x000D_ }_x000D_ .item-by-width{_x000D_ width: 10em;_x000D_ flex-grow: 0;_x000D_ flex-shrink: 0; _x000D_ border-color: orange;_x000D_ }_x000D_ .item-by-basis{_x000D_ flex-basis: 10em;_x000D_ flex-grow: 0;_x000D_ flex-shrink: 0; _x000D_ border-color: orange;_x000D_ } _x000D_…(Continue Reading)

cambiar color de placeholder=”Segundo Nombre”

publicado por: Anonymous como puedo cambiar el campo del forms de bootstrap especificamente el placeholder de color blanco solución Puedes darle estilo al seudoelemento placeholder. #input_id::placeholder { color:white; } Pero esa especificación no es estándar y sólo funcionará en navegadores recientes. (Chrome 57+, Firefox 51+, Opera 44+ y Safari 10.1+) Para proveer compatibilidad con versiones…(Continue Reading)

Jqueryを使ったMonacaで画面のどまんなかに文字を表示させる方法について

投稿者: Anonymous すみません。質問させてください。 MonacaでjQueryを利用してページを作成しているのですが、1点詰まったことがあります。 画面の縦横の真ん中に文字を表示させように、 htmlで <div id=”startFl” data-role=”page” height=”100%”> <table width=”100%” height=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″> <tr height=”100%”> <td class=”mainscreen”><p id=”call_text_Fl”></p></td> </tr> </table> CSSで html { height: 100%; } body { height: 100%; } td.mainscreen{ width: 100%; height: 100%; margin: 0 auto; text-align: center; } として、見たのですが、横では中央に表示されたのですが、縦では真ん中になっていませんでした。 これは何が良くないのでしょうか。 お知恵をお貸しください。 解決 <div> タグに height という属性は存在しないため、CSSで指定する必要があります。 加えて、<td> や…(Continue Reading)

Personalizar reporte de excel generado con html y jquery

publicado por: Anonymous Estoy tratando de exportar una tabla común de html a excel usando Jquery. Mi script ya imprime la tabla, lo que necesito es personalizar los nombres que aparecen en los headers asi como tamaños de las columnas, colores etc. Esta es la imagen de mi reporte, se puede ver como los headers…(Continue Reading)

Imagenes usadas en seudolementos css ¿Es posible cambiar su tamaño?

publicado por: Anonymous Muy buenas a todos. Respondiendo una pregunta de la comunidad se me vino otra duda, siempre que usó imágenes en pseudoelementos ::before y ::after las coloco como background porque siempre que las intento usar como contenido: ::before{ content: url(‘imagen.jpg’) } A estas imágenes nunca les he podido modificar las dimensiones (alto y…(Continue Reading)

¿Cómo crear button anterior y siguiente con jQuery/css?

publicado por: Anonymous Cómo añado dos botones ( < ) ( > ), uno a la derecha y otro a la izquierda. Funcionalidad jQuery anterior y siguiente. Ejemplo: Código slider jsfiddle. solución En base al ejemplo publicado, puedes hacer lo siguiente. En tu HTML: agrega dos enlaces, a tu gusto, que representarían las flechas izquierda…(Continue Reading)

読み込んだ画像の範囲指定したところを黒く塗りつぶしたい

投稿者: Anonymous ※いただいたコメントにより修正しました。 下記の機能を実装したwebサイトを制作したいです。 ・画像URLを入力またはアップロードで取得した画像をブラウザに表示する ・表示した画像にマウスカーソルをのせると、PhotoshopやIllustratorで言うところのペンツールのような機能を持ったツールA※1に切り替わる ・ツールAで三角形以上の多角形を作ると、その多角形の内側を黒ベタに塗りつぶす ・黒ベタが施された状態の画像※2を保存できるボタン ※1:ツールAの動きは直線のみで、例えで出したペンツールに実装されているカーブ生成機能並びにカーブを調整するハンドルは不要です。 ※2:画像サイズとファイル形式は元画像のまま。 以上です。 下図は上記の機能を分かりやすくするためと、使用手順を説明する趣意の図です。 ※下図において画像読込機能については都合により省略します。 現状は画像読込機能のみ、HTML,css,jsで実装できました。 下記サンプルです。 https://jsbin.com/fojaqedito/edit?html,js,output しかし、その他の機能についてはどの言語で、どのように書けば実装できるのかが分からず困っています。 できればHTML,css,jsで実装したいですが他言語でも構いません。 ご助力お願いいたします。 _x000D_ _x000D_ $(function () {_x000D_ _x000D_ //input url_x000D_ $(‘#url’).change(function () {_x000D_ $(‘#main_file’).fadeOut(1);_x000D_ $(‘#main_url’).fadeIn(500);_x000D_ $(‘#view_url’).prop(‘src’, this.value);_x000D_ console.log(this.value);_x000D_ var file = $(‘#file’)[0];_x000D_ file.value = “”;_x000D_ });_x000D_ //input file_x000D_ $(‘#file’).change(function (e) {_x000D_ var reader = new FileReader();_x000D_ reader.onload =…(Continue Reading)

チェックボックスの非チェック時、チェック時、disabled時のデザインを変更する方法

投稿者: Anonymous 現状 fontawesomeを使用したチェックボックスを作っています。 _x000D_ _x000D_ document.getElementById(“disabled”).onclick = function () {_x000D_ var obj = document.getElementById(“check”);_x000D_ if (obj.disabled === true) {_x000D_ obj.disabled = false;_x000D_ return;_x000D_ };_x000D_ obj.disabled = true;_x000D_ }; _x000D_ html {_x000D_ text-align: center;_x000D_ }_x000D_ _x000D_ #checkBtn {_x000D_ cursor: pointer;_x000D_ }_x000D_ _x000D_ #check {_x000D_ display: none;_x000D_ } _x000D_ <link href=”https://use.fontawesome.com/releases/v5.6.1/css/all.css” rel=”stylesheet”>_x000D_ _x000D_ <label for=”check” id=”checkBtn”>_x000D_…(Continue Reading)