タグ

関連タグで絞り込む (27)

タグの絞り込みを解除

layoutに関するkiyo_hikoのブックマーク (25)

  • Graphvizレイアウトサンプル

    (追記：2014-3-3) Gvizについてのまとめ頁を作りました。 Gvizの目次 - Rubyの世界からGraphvizの世界にこんにちは！ Graphvizには複数のレイアウトフォーマットがありますが、どれも名前が変わっていて生成されるレイアウトを名前から想像することが困難です。幾つかのレイアウトの説明はGraphvizのサイトに書いてあるのですが、それを読んでもやっぱりピンと来ません。その結果、毎度グラフを作るたびにレイアウトを試行錯誤することになります。 でも、レイアウトはやっぱりサンプルを見るのが一番手っ取り早いですよね。 そんなわけで… Graphvizのレイアウトサンプルを作って、ここに貼っておくことにします。サンプルの作成にはいつもの様にGvizを使います。ちなみにGviz0.1.2では、gvizコマンドの-mオプションでlayouts一覧を表示できるようになりました。

  • 軽量で依存性なしのレンガ状レイアウト実装JS「Macy.js」:phpspot開発日誌

    複数選択が可能なドロップダウンリストが作れるjQueryプラグイン「Janki... 次の記事 ≫：ゲームボーイ版のポケモンフォントが使える「pokemon-font」

  • CSSの進化がすごい！レスポンシブ対応の六角形のヘキサゴン レイアウトを簡単に実装できるスタイルシート


    シンプルなHTMLで、レスポンシブ対応の六角形のヘキサゴン レイアウトを簡単に実装できるスタイルシートを紹介します。 JavaScriptは完全に不要で、CSS Gridを使用してdiv要素にclassを付与するだけで実装できます。 Hexi-Flexi Grid Hexi-Flexi Grid -GitHub Hexi-Flexi Gridの特徴 Hexi-Flexi Gridのデモ Hexi-Flexi Gridの使い方 Hexi-Flexi Gridの特徴 JavaScriptは必要なし、CSSのみで実装。 六角形のアイテムの高さ・幅、列・行は自由に設定。 セル、列、行のモジュラー形式。 背景画像を自動入力する機能をサポート。 サポートブラウザ CSS Gridで実装するため、サポートブラウザは下記の通りです。 Firefox 56+ Chrome 61+ Safari 10.1+
    CSSの進化がすごい！レスポンシブ対応の六角形のヘキサゴン レイアウトを簡単に実装できるスタイルシート
    kiyo_hiko
    kiyo_hiko 2018/11/19
    すごい
    リンク

  • 画像上の自由な位置に文字を重ねる方法 [ホームページ作成] All About


    画像の上に文字や入力フォームなどを重ねて表示させたいと思ったことはありませんか？ 例えば、図のような画像の看板部分にぴったり合うように文字を表示したい場合などです。 画像の上に重ねて文字を表示したい場合でも、1枚の画像を細かく分割して掲載したり、table要素を駆使したりする必要はありません。CSS(スタイルシート)を使えば、1ピクセル単位で表示位置を微調整して、簡単に画像の上に文字を重ねることができます。 今回は、ウェブページ上に掲載した画像の上に、文字や入力フォームなどの任意のオブジェクトを重ね合わせて表示する方法をご紹介いたします。HTML＋CSSだけの簡単な方法です。 画像の上に文字やオブジェクトを重ねる例 今回ご紹介する方法を使えば、以下のような重ね合わせ表示が作れます。ここでは例として、画像の上に文章を重ねたり、画像の上に選択フォームを重ねたり、画像の上に枠付きのキャプションを
    画像上の自由な位置に文字を重ねる方法 [ホームページ作成] All About
    kiyo_hiko
    kiyo_hiko 2017/04/03
    relative positionなdivの上にabsoluteを重ねてずらす
    リンク

  • U2Kの覚え書き　position:absoluteした時のdivの高さを可変にする

    グリッドデザインのような横幅可変なサイトで、画像をとかを横幅に合わせて伸縮させたい場合がある。 imgタグであれば、width:100%; だけ指定しておけばOKだが、divとかで、position; absolute;した時など、高さが指定されていないのでうまくいかない。 そんなときの対処法。 ■HTML<div class="box ratio-1_1"> <div class="inner"> <p>1 : 1</p> </div> </div>■css.box { position: relative; width: 50%; height: auto; background: #444; } .ratio-1_1:before { content: ""; display: block; padding-top: 100%; /* 1:1 */ } .inner { positi

    U2Kの覚え書き　position:absoluteした時のdivの高さを可変にする

  • Bootstrapの使い方（３）〜グリッドシステムの活用方法 | IT工房｜AI入門とWeb開発


    Bootstrapのグリッドシステムの仕組みを更に掘り下げてみます。 Bootstrapを使用するときに注意する点はボックスモデルの概念が通常と違うところです。 Bootstrapは通常のボックスモデルではありません。border-boxです！！ レイアウトの幅を算出するときはこの事をふまえておく必要があります。 Bootstrapでは全ての要素にいきなり次のように初期化を行っています。 * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } Bootstrapでは内容領域︵width)にパディングとボーダーが含まれます。通常のボックスモデルは内容領域︵width︶にパディングとボーダーは含まれません。 グリッドシステムの基本構造 グリッドシステムの基本構造は次のよ
    Bootstrapの使い方（３）〜グリッドシステムの活用方法 | IT工房｜AI入門とWeb開発

  • Padrino - Layouts

    kiyo_hiko
    kiyo_hiko 2016/04/05
    Appレベルでの設定、Controllerレベルでの設定、render時の設定。述語の評価結果でlayoutを使い分けたいけどそれやるにrenderを包むヘルパー書いて置き換える漢字仮名。
    リンク

  • Layout file on Padrino

    kiyo_hiko
    kiyo_hiko 2016/04/05
    render :foo, :layout => :"path/to/layout"
    リンク

  • HTML+CSS 子要素の幅を合計100%にしても崩れる時のチェックポイント - 株式会社ハナウタ - HANAUTA INC.


    こんにちは、オオニシです。2回目の投稿です。 最近マスク着けてる人を多く見かけるようになってきましたね。風邪やインフルなんかで年越ししないように、しっかり健康には気を付けていきましょう。 今日は、友人からウェブコーディングのヘルプを受けた内容でひとつ書いてみます。 子要素の幅を合計100%にしても崩れる さて、タイトルの通り本題です。 プライベートな時間で友人のサイトコーディングを手伝っていたら、こんなことを言われました。 慣れた方ならどこが原因なのかある程度目星を付けて調べられると思いますが、慣れないと対処にかなり時間とられてしまいます。 まずはfloatを使った場合の正常ケース <div style="width:100%;"> <div style="width:50%; height:20px; background-color:red; float: left;"></div>
    HTML+CSS 子要素の幅を合計100%にしても崩れる時のチェックポイント - 株式会社ハナウタ - HANAUTA INC.
    kiyo_hiko
    kiyo_hiko 2015/11/20
    borderでも崩れる 子要素のpaddingでも崩れてたのでとにかく気をつけたい
    リンク

  • MdN Design｜総合情報サイト

    Webデザイン 1-11 表示領域に合わせて可変するリキッドレイアウト リキッドレイアウトとは、ブラウザの表示領域に合わせてコンテンツの幅・位置を可変で表示させるもの。表示環境による違いを最適化し、スマートフォン対応などにも有効だ。 制作・文／栗林 宏之 B's StuDio Browser IE 7over Firefox 3over　Safari 4over 01 リキッドレイアウト（可変グリッド）とはブラウザの幅に合わせてコンテンツの表示範囲（位置）を変えつつ、解像度の違いでユーザビリティを損なわないように最適化したレイアウトを維持する表示方法である【1-1】。 【1-1】ブラウザ幅に合わせてコンテンツの表示領域も変わるのがリキッドレイアウト。 02 基本は幅の指定を相対値で指定することとなる。2カラムレイアウトを例にすると【2-1】、まず全体を含むid［wrapper］にブラウザに

    MdN Design｜総合情報サイト

  • IE8から始めるテーブルレイアウト と IE10からのFlexible Box


    IE8から始めるテーブルレイアウト と IE10からのFlexible Box 2012-11-08 テーブルレイアウトと聞くと<table>タグを使い、入れ子で<tr>, <td>タグのオンパレードを連想する人も多いと思いますが、今回の内容はCSSの display display: table; はCSS2.0からある仕様です。 要素をCSSでテーブルのようにあしらうことができるため、多くの利点があります。 display: table; display: table;はIE8以降のtable要素に、デフォルトスタイルシートで定義されているものです。 IE8からサポートされているのでIE7以下を切り捨てれば、今からでも使うことができます。 display: table;以外にも多くの値が存在し、tableを形作る要素に振り分けられています。 以下は、tableに振り分けられているCSS
    IE8から始めるテーブルレイアウト と IE10からのFlexible Box

  • CSS でレイアウト

    CSSでレイアウト Web ページのレイアウトは、よくテーブルが使われてきました。現在は少なくなりましたが、まだ一部で使われています。新聞、雑誌記事のように格子状に分割し文章や画像を貼り付ける方法です。 いわゆる「段組」です。自由に複雑な段組ができます。代表的なブラウザは、テーブルレイアウトで作成された Web ページの表示に違いがでることはほとんどないのですが、 HTML ソースは複雑になりメンテナンスが難しく、標準仕様を策定している W3C では「アクセシビリティ」という点でテーブルレイアウトは推奨していません。アクセシビリティとは、様々な利用環境に配慮することで、例えば、テキストブラウザ、音声読み上げブラウザ、モバイルなどです。CSS によるレイアウトを推奨しています。 現在は、高機能でマルチスクリーン、レスポンシブに対応できる、新バージョン CSS3 の「マルチカラムレイアウト」や

    kiyo_hiko
    kiyo_hiko 2015/10/23
    table-layout: fixed; そのうち使っていくスタイルかもしれない
    リンク

  • とっても使えるoverflowプロパティ。その使い方色々。

    光の4戦士を買ったんすが、売り文句通りレトロな感じがしていいですね。 まぁまだ2, 3時間程度しかやってないんで、これからどうなるか分かりませんが時間を見つけてやって行こうかと。 さて、以前からoverflowプロパティは使い勝手が良いというか、使う場面が多いプロパティの一つですが、考えてみると色んな事に使ってるなぁ～と思ったので自分が良く使うのをまとめてみました。 あんまoverflowプロパティを使った事が無い方は、ビックリですよ！ これで、ソコの可愛いアナタもoverflowプロパティの虜になる事間違い無し！！（わかんないけど サンプルとかは以下よりどうぞ。 サンプルサイトを見る サンプルをダウンロード 基本的に、全てoverflow: hidden; の指定を足す事で解決したり実現出来る感じです。 01 clearfixみたいに使う まずは以前の「clearfixを使わないでやるに

    とっても使えるoverflowプロパティ。その使い方色々。
    kiyo_hiko
    kiyo_hiko 2015/08/02
    float入った場合でもちゃんと領域内に収める、など
    リンク

  • overflow―スタイルシートリファレンス

    ページが移転しました。

    kiyo_hiko
    kiyo_hiko 2015/08/02
     初期値visible＝はみ出す、他‥hidden＝枠内しか表示させないようにする、scroll＝スクロールバー付き表示する、auto＝ブラウザー依存。なるほど。  

    ●css
    ●overflow
    ●layout
      
    リンク

  • CSS3の「フレキシブルレイアウト」使い方まとめ フラップイズム


    どうも、くーへいです。 今回は﹁レスポンシブデザイン﹂での使用が想定される、﹁フレキシブルボックス﹂についてまとめてみたいと思います。 なお、本記事は﹁CSS Flexible Box Layout Module Level 1﹂の2014年5月22日付けの編集者草案︵Editor’s Draft︶を基に作成しています。 また、﹁CSS Flexible Box Layout Module Level 1﹂は未だに策定中であり、現在は2014 年3月25日付の最終草案︵Last Call Working Draft︶が最新仕様です。 2014年5月22日付けの編集者草案は、2014 年3月25日付の最終草案に微修正を加えたものです。 最初にブラウザの対応状況について注意点 ﹁フレキシブルボックス﹂で検索すると、いくつかの素晴らしい記事が出てきますが、中には古い記事が多く含まれています。 ﹁
    CSS3の「フレキシブルレイアウト」使い方まとめ フラップイズム

  • javax.swing Component preferredSize の罠


    コンサルタントの独り言、、、かな？ Web/OLTP/Java/Swift Performance/RealTimeComunication/Media Swingでの部品のサイズは、sizeでも、maximumSizeでも、minimumSizeでもなく、preferredSizeが使われるため、ここを設定することが多いのだが、サイズが可変になる場合にはむしろ﹁null﹂にしておいた方が吉である。 そもそも、Swingでは、サイズはLayoutManagerの管理下にあり、上記のサイズ指定は参考値という扱いのようだ。とはいっても最大の参考値は﹁preferredSize﹂であり、初期表示はこの値が使用される。 ■状況‥ JPanelにBorderLayoutを設定し、NorthにJToolBarを配置、Centerにはイベントに応じて異なるJPanelが挿入され、サイズも動的に変化すると

  • box-sizing は魔法のコトバ！もうpaddingやborderを含めた幅の計算はヤメヤメ | Cappee Design


    あとで読みたい人は… CSS3の box-sizing プロパティがかなり便利です。 あるのは知っていたのですが実際何案件か使ってみてやっぱり便利でした。 CSS覚えたての頃よくやった横幅や高さを指定する時のミスがなくなります。 ﹁あれ、なんで崩れるんだろ？﹂ ﹁padding と border 分マイナスするの忘れてた～﹂ ってのがよくありました。︵今もたまに。。︶ それが魔法のコトバ﹁box-sizing﹂を唱えれば、マイナスすることなく横幅や高さを指定することができます。 これはものすごい効率化になりますね！ box-sizing の書き方 box-sizing プロパティでボックスサイズ(width, height ) の算出方法を 指定します。 指定できるのはこちらの2種類です。 content-box … ︻デフォルト値︼padding と border を要素の幅と高さに含

  • How to Use GridBagLayout (The Java™ Tutorials > Creating a GUI With Swing > Laying Out Components Within a Container)

  • 第229話　GridBagLayoutだとjTextFieldが小さくなってしまう


    ﹁また，小さくなった﹂とこうしろうがため息まじりに言う。こうしろうは現在，Eclipse + Visual Editorでカメラ台帳の登録フォームを作成している。 GridBagLayout GridBagLayoutを使うとjTextFieldが小さくなってしまうことがあるのだ。また，小さくなったと言うのだからこれまでもうまくいかなかったことがあるのだろう。 原因は最後の方にとっておいて，Swingのレイアウトについておさらいしよう。 BorderLayout JFrame Visual Classを新規作成するとデフォルトで設定されているのが，このBorderLayoutである。North，West，Center，East，Southにコンポーネントを，この例の場合はボタンを配置する。風水みたいなレイアウトである。 FlowLayout 次がFlowLayout。左から右，上から下へと
    第229話　GridBagLayoutだとjTextFieldが小さくなってしまう

  • CardLayout get the selected card's name

    kiyo_hiko
    kiyo_hiko 2013/08/27
    visibleで見ればいいのかと思って「for (Container c : cards) {if (c.isVisible) return c;} return null;」みたいに書いたらうまく行かなかった。showするときにContainerを変数に覚えとく方式でうまく行った
    リンク
  • 1 2 次のページ

お知らせ

もっと読む

公式Twitter

  • @HatenaBookmark

    リリース、障害情報などのサービスのお知らせ

  • @hatebu

    最新の人気エントリーの配信

はてなブックマーク

公式Twitter

はてなのサービス

  • App Storeからダウンロード
  • Google Playで手に入れよう
Copyright © 2005-2024 Hatena. All Rights Reserved.