PyQt5ウィジェットとレイアウトの基本
ボタン
btn = QPushButton("ボタン")
ボタンクリックイベント
btn.clicked.connect(関数名) # 括弧は不要
ラジオボタン
rbtn = QRadioButton("オプション")
ラベル
label = QLabel("ラベル: ")
入力フィールド
# 入力ボックス
edit = QLineEdit(None) # 親ウィジェット
edit.setPlaceholderText("プレースホルダー")
グル ...
8月7日 12:58 投稿
CSSボックスモデル:ウェブレイアウトの基本構造
ウェブレイアウトの本質
ウェブレイアウトのプロセスは以下の通りです:
関連するウェブ要素を準備します。ほとんどのウェブ要素は「ボックス」として扱われます。
CSSを使用してボックスのスタイルを設定し、適切な位置に配置します。
ボックス内にコンテンツを追加します。
ウェブレイアウトの核心的本質は、CSSを使ってボックスを配置することにあります。
...
8月3日 17:01 投稿
CSS Flexboxの基礎:柔軟なレイアウト設計とその活用
Flexboxとは
Flexbox(Flexible Boxの略)は、ウェブページ内の要素の配置を、より効率的かつ柔軟に行うためのCSSレイアウトモデルです。特に、コンテナ内のアイテムを一次元の方向(行または列)に沿って配置し、アイテム間のスペース配分や位置調整を簡単にするために設計されました。
従来のfloatやpositionプロパティを用いたレイアウトと比較して、レスポンシブデザイ ...
7月31日 06:28 投稿
CSSの行高についての詳細解説
テキストの4本の線、上から順に頂線、中线、基線、底线です。
行高:上下のテキスト行の基線間の垂直距離を指し、図中の赤い2本の線の間の垂直距離です。(図中の上下の同色線の間の垂直距離)
行間:1行の底线から次の行の頂線までの垂直距離を指します。
半行間:行間の半分
1.コンテンツ領域:
テキスト行の各要素はコンテンツ領域を生成します。これはフォント ...
7月25日 22:03 投稿
CSSレイアウト実装テクニック
垂直方向の中央揃え
インライン要素の場合
heightとline-heightの値を同一に設定します。
ブロック要素の場合
絶対位置指定(要素サイズ既知)
.container {
position: relative;
}
.target-element {
position: absolute;
top: 50%;
left: 50%;
width: 180px;
height: 240px;
margin-left: -90px;
margin-top: -120px;
}
transformプ ...
7月2日 00:45 投稿
CSSスタイルシートとウェブレイアウト完全ガイド
CSSスタイルシート(カスケーディングスタイルシート)
CSSの適用方法には主に3つの形式があります。
インラインスタイル
<p style="color: red; font-size: 16px;">
この要素にはインラインスタイルが適用されています
</p>
埋め込みスタイル
<style>
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back ...
6月28日 19:06 投稿